Control visibility of the User Action button by using entity status and attribute

How-to Guide

Author:

Fluent Commerce staff

Changed on:

24 Jan 2024

Key Points

This article gives System Integrator (SI) Partners and Businesses a high-level idea of where new features can be built on top of the OMS reference solution to support the customer's requirement within Fluent OMS.
This idea/solution will provide a new feature where the user action button's visibility is based on the fulfilment's status and a entity in the attribute.

Steps

Use Case

As a Customer Service user, when the fulfilment is in escalated status, I want to execute certain backend functionalities (e.g. trigger a webhook to ERP for refund.) and mark the fulfilment status in a detailed level.

If the status is Escalated due to OOS for all items in the order - I need a user action button to trigger the process.

Suppose the status is Escalated due to OOS for a few items in the order. In that case, I need a user action button to acknowledge the fulfilment is PARTIAL fulfilled and trigger the partial delivery process in ERP.

Design Solution Overview

Introduce a new attribute in fulfilment level to keep track of "few items" OOS. The value of this attribute should be part of the order workflow.

In the fulfilment Detail Page, display the following user action button:

```
`CUSTOMER SERVICE CANCEL`
```
- If the status is Escalated
```
`ACCEPT SHORT DELIVERY`
```
- If the status is Escalated and OOS for a few items in the fulfilment

Technical Design Overview

To support the business solution design, the following technical areas need to be enhanced:

a new fulfilment attribute
```
`PARTIAL_DELIVERY`
```
to keep track of the items OOS. (Will not be part of this article)

Create two new Ruleset in HD Order workflow:

```
`CUSTOMERSERVICE_CANCEL`
```
```
`ACCEPT_SHORT_DELIVERY`
```

Update Mystique Manifest in Setting -

`fc.mystique.manifest.oms.fragment.ordermanagement`

Workflow ORDER HD changes

1{
2            "name": "CUSTOMERSERVICE_CANCEL",
3            "description": "Test CUSTOMERSERVICE_CANCEL Cancel",
4            "type": "FULFILMENT",
5            "subtype": "HD_PFS",
6            "eventType": "NORMAL",
7            "rules": [
8                {
9                    "name": "<Accountid>.base.ChangeStateGQL",
10                    "props": {
11                        "status": "CS_CANCELLED"
12                    },
13                    ... //Add call webhook rule in here.
14                }
15            ],
16            "triggers": [
17                {
18                    "status": "ESCALATED"
19                }
20            ],
21            "userActions": [
22                {
23                    "context": [
24                        {
25                            "label": "CUSTOMER SERVICE CANCEL",
26                            "type": "PRIMARY",
27                            "modules": [
28                                "adminconsole"
29                            ],
30                            "confirm": true
31                        }
32                    ],
33                    "attributes": []
34                }
35            ]
36        },
37        {
38            "name": "ACCEPT_SHORT_DELIVERY",
39            "description": "Test ACCEPT_SHORT_DELIVERY Cancel",
40            "type": "FULFILMENT",
41            "subtype": "HD_PFS",
42            "eventType": "NORMAL",
43            "rules": [
44                {
45                    "name": "FLUENTRETAIL.base.ChangeStateGQL",
46                    "props": {
47                        "status": "ACCEPT_SHORT_DELIVERY"
48                    },
49                    ... //Add call webhook rule in here.
50                }
51            ],
52            "triggers": [
53                {
54                    "status": "ESCALATED"
55                }
56            ],
57            "userActions": [
58                {
59                    "context": [
60                        {
61                            "label": "ACCEPT SHORT DELIVERY",
62                            "type": "PRIMARY",
63                            "modules": [
64                                "adminconsole"
65                            ],
66                            "confirm": true
67                        }
68                    ],
69                    "attributes": []
70                }
71            ]
72        },

Language: json

Name: CUSTOMERSERVICE_CANCEL and ACCEPT_SHORT_DELIVERY rulesets in Order workflow

Description:

Both rulesets have their own user action with filter status = escalated.

Mystique Manifest Change

Add the following code snippets to

` fc.mystique.manifest.oms.fragment.ordermanagement`

1"props": {
2    "title": "Fulfilment - {{fulfilmentById.id}} - {{fulfilmentById.status}}",
3    "actions": {
4        "primary": [
5            {
6                "type": "userAction",
7                "name": "ACCEPT_SHORT_DELIVERY",
8                "condition": "{{and fulfilmentById.attributes.byName.PARTIAL_DELIVERY}}"
9            }
10        ]
11    },

Language: json

Name: Code Snippets to control user Action Button visibility by checking an attribute value

Description:

The button will not be visible if the attribute value is not true.

Result

To test the change, let's add the attribute to the fulfilment:

1// QUERY:
2mutation updateFulfilment ($input: UpdateFulfilmentInput) {
3    updateFulfilment (input: $input) {
4        id
5        ref
6    }
7}
8
9// Variables:
10{
11  "input": {
12    "id": <fulfilmentId>,
13    "attributes":[
14        {
15            "name":"PARTIAL_DELIVERY",
16            "type":"BOOLEAN",
17            "value": "TRUE"
18        
19        }              
20    ]
21  }
22}

Language: graphqlschema

Name: updateFulfilment with Attributes

Description:

[Warning: empty required content area]

In the Fulfilment detail page, the escalated fulfilment without PARTIAL_DELIVERY attribute will only display

`CUSTOMER SERVICE CANCEL`

user action button

The escalated fulfilment with PARTIAL_DELIVERY attribute will display

`CUSTOMER SERVICE CANCEL`

and

`ACCEPT SHORT DELIVERY`

user action buttons:

Control visibility of the User Action button by using entity status and attribute

Key Points

Steps

Use Case

Design Solution Overview

Technical Design Overview

Workflow ORDER HD changes

Mystique Manifest Change

Result

Fluent Commerce staff

Building Blocks

By Type

Helpful Resources