Enable bulk order Cancel in the UI by using the action property in the LIST component

How-to Guide

Author:

Fluent Commerce

Changed on:

8 July 2024

Key Points

To enable cancelling orders via the UI the cancel order ruleset needs to be used
Update the mystique manifest to show the list action.

Steps

Check cancel order ruleset in the workflow

Ensure that all of the order workflows contain the

`cancelOrder`

ruleset. For example:

1{
2    "name": "OrderCancel",
3    "description": "Order is Cancelled from admin console",
4    "type": "ORDER",
5    "subtype": "CC",
6    "eventType": "NORMAL",
7    "rules": [
8        {
9            "name": "{{accountId}}.core.SetState",
10            "props": {
11                "status": "CANCELLED"
12            }
13        },
14        {
15            "name": "{{accountId}}.order.SendEventForAllFulfilments",
16            "props": {
17                "eventName": "CancelFulfilment"
18            }
19        }
20    ],
21    "triggers": [
22        {
23            "status": "CREATED"
24        },
25        {
26            "status": "RECEIVED"
27        },
28        {
29            "status": "BOOKED"
30        }
31    ],
32    "userActions": [
33        {
34            "context": [
35                {
36                    "label": "CANCEL ORDER",
37                    "type": "PRIMARY",
38                    "modules": [
39                        "adminconsole"
40                    ],
41                    "confirm": true
42                }
43            ],
44            "attributes": []
45        }
46    ]
47},

Language: json

Name: cancel ruleset in order workflow

Description:

[Warning: empty required content area]

Enable List User Action in the order manifest

1{
2  "component": "fc.list",
3  "props": {
4    "defaultPageSize": 100,
5    "dataSource": "orders",
6    "actions": [
7      {
8        "type": "UserAction",
9        "name": "OrderCancel"
10      }
11    ],
12    "responsiveness": "card",
13    "filter": {
14      "enabled": true,
15      "exclude": [
16        "workflowRef",
17        "workflowVersion",
18        "totalPrice",
19        "totalTaxPrice"
20      ]
21    }
22}

Language: json

Name: Update the mystique manifest

Description:

[Warning: empty required content area]

test the change in the UI

As you can see in the ruleset trigger section, Only

`CREATED`

`RECEIVED`

, or

`BOOKED`

status will enable the

`orderCancel`

feature. Therefore, the first record on the list must have the right status to see the checkbox:

An example of List that does not show the checkboxes

Here is an example where the first entry in the list is not in

`CREATED`

`RECEIVED`

, or

`BOOKED`

status:

Filtering the order list result

The user can filter the list by using the status:

Test bulk cancel

Select 2 entries and click the CANCEL ORDER button; a confirmation will be displayed. By clicking CONFIRM, both orders will move to

`CANCELLED`