Adding new alert types

You can extend the default alerts implementation in Sterling Store Engagement to add new alert types and custom alert components.

1. Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:
   SCREEN_EXTENSIONS_HOME/features/alert
2. Navigate to the SCREEN_EXTENSIONS_HOME/features/alert folder.
3. Copy alert-extension.module.ts from <WORKSPACE>/store-frontend/src/app/features/alert to <WORKSPACE>/store-frontend/store-extensions-src/app/features/alert folder.
   If alert-extension.module.ts is already present, do not copy the file. Custom alert components and providers are declared in this file.
4. To create a new alert component, perform the following steps:
   1. Run the following command:

      ng g c <componentName> --project=store-extensions --skip-import

   2. Update the alert component class name in declarations and entryComponents property of @NgModule decorator in alert-extension.module.ts.
   3. After the custom component is created, you can access the alert configuration object and alert (Inbox) details object that is returned by the getExceptionList API, by injecting them in the constructor of the component as shown in the following code snippet:

      constructor(
          @Inject('config') public config,
          @Inject('data') public data,
          @Inject('parentComponentId') public parentComponentId
        ) { }

      The following table provides descriptions of each input binding:

      Binding	Description
      config	The alertType configuration object that is associated with its matching alertType. This is defined in extensionAlertConfig property.
      data	The alert (Inbox) record details.
      parentComponentId	Unique ID of the alert container component AlertContainerComponent.

   4. You can define actions such as pick order, pack order, confirm, or delete in the custom alert component based on your business needs.
   5. After completing these actions, to close the alert panel, emit an event with action as AlertCloseAction.CLOSE as shown in the following code snippet. This ensures that the alert panel is closed.

      @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
       this.eventEmitter.emit(AlertCloseAction.CLOSE);

5. To create a service or provider for the new alert component, perform the following steps:
   1. Run the following command:

      ng g s <serviceName> --project=store-extensions

   2. Update the service or provider name in providers of @NgModule decorator in alert-extension.module.ts.
   Note:

   • It is mandatory to pass the argument --project=store-extensions. Failing to do so will create the component in the application-provided src folder (<WORKSPACE>/store-frontend/src). The files created here are ignored and not rendered on browser.
   • Ensure that you import the newly created custom alert component, service, or provider classes into alert-extension.module.ts from store-extensions-src and not from the store-app-build folder.
   • Ensure that you import the out-of-the-box services, component, and type files by using @sim-app, @sim-core, or @sim-shared notations.
6. Register the alert to a view in one of the following ways. For more information, see View-Alert registration.
   1. Register the alert to an existing view.
      For example, if you want to add a custom alert, YCD_BACKORDER_NOTICE, to an existing view, Order_Fulfillment, the JSON specification will look like:

      {
                  personaName: 'Order_Fulfillment',
                  alertTypes: [
                         {
                               tid: 'YCD_BACKORDER_NOTICE',
                               exceptionType: 'YCD_BACKORDER_NOTICE',
                                component: ExtnBackOrderNoticeAlertComponent,
                                descBundleKey: 'alerts.LABEL_BackorderNotice'
                          }
                  ]
       }

   2. In the store-customization-impl.ts file, update the extensionAlertConfig property in the alert-persona JSON specification as follows:

      static extensionAlertConfig: IAlertsConfig =      {
              alertConfigList: [
             {
                  personaName: 'Order_Fulfillment',
                  alertTypes: [
                         {
                               tid: 'YCD_BACKORDER_NOTICE',
                               exceptionType: 'YCD_BACKORDER_NOTICE',
                                component: ExtnBackOrderNoticeAlertComponent,
                                descBundleKey: 'alerts.LABEL_BackorderNotice'
                          }
                     ]
              }
            ]
      }