Extending order tracking

Learn how you can customize and extend the order tracking implementation to track orders with custom order statuses, add custom milestones, and modify out-of-the-box shipment status inclusion criteria for each milestone

As a store associate, you can track an order or order line from the moment the order is placed till it is shipped or picked and update the customers about the current status and the expected delivery time, if required.

Defining custom milestones for different order types and delivery methods

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present.SCREEN_EXTENSIONS_HOME/features/orders
Go to the SCREEN_EXTENSIONS_HOME/features/orders folder.
Copy orders-extension.module.ts from <WORKSPACE>/store-frontend/src/app/features/orders to <WORKSPACE>/store-frontend/store-extensions-src/app/features/orders folder.
If orders-extension.module.ts is already present, do not copy the file. Custom milestones and providers are declared in this file.
To create a new milestone, perform the following steps:
1. Run the following command:
```
ng g c /features/orders/modals/track-order-modal/components/<componentName>
--project=store-extensions --skip-import
```
2. Update the milestone class name in declarations and exports property of @NgModule decorator in orders-extension.module.ts.
Register the new milestone in track-order.config.ts.
Copy track-order.config.ts file from <WORKSPACE>/store-frontend/src/app/features/orders/config to <WORKSPACE>/store-frontend/store-extensions-src/app/features/orders/config folder and update the config.

The following example shows how to add a custom milestone, OrderPlaced:

static TrackOrderConfigList: ITrackOrderConfig =  {
     '0001': {
           SHP: [
               {
                      tid: 'OrderPlaced',
                      milestoneDescriptionKey: 'trackOrderModal.LABEL_OrderPlaced',
                      fromStatus: '',
                      toStatus: '1100.70.06.10',
                      component: OrderPlacedMilestoneComponent
               }
           ]
      }
}

Here, 0001 is the sales order OrderType and SHP is the delivery method.

The following table ITrackOrderConfigItem ITrackOrderConfigItem

Table 1. ITrackOrderConfigItem properties, need, and descriptions
Property	Mandatory	Description
`tid` {string}	Yes	Unique identifier for testing the milestone component.
`component` {component}	Yes	Reference of the component to be rendered for milestone.
`milestoneDescriptionKey` {string}	Yes	Description text for the milestone.
`statusValue` {string}	No	Fix status for milestone. The `statusValue` has higher priority than `fromStatus` and `toStatus`.
`fromStatus` {string}	No	Starting status for the milestone.
`toStatus` {string}	No	Ending status for the milestone.

Modifying the out-of-the-box shipment status inclusion criteria for each milestone

In track-order.config.ts, for the milestone that you want to modify, change the fromStatus and toStatus values for the required range.

You can also replace an existing milestone with a new custom milestone CustomMilestoneComponent as shown in the following JSON specification example:

static TrackOrderConfigList: ITrackOrderConfig =  {
     '0001': {
           SHP: [
               {
                      tid: 'Custom',
                      milestoneDescriptionKey: 'trackOrderModal.LABEL_Custom',
                      fromStatus: '1100',
                      toStatus: '1400',
                      component: CustomMilestoneComponent
               }
           ]
      }
}

Changing the style of an existing milestone component

Create a milestone with the same name in the <WORKSPACE>/store-frontend/store-extensions-src/app/features/orders/modals/track-order-modal/components folder.