Listen signal

This page details the requirements to integrate the listen signal which is used to respond to user interaction with the panel and perform your application specific logic.

Using listen signal

To determine when the user has selected an option for coverage you need to use the listen signal passing an onChange property that takes a function to handle the change event.

This is similar to addEventListener() difference being we are using XCE Signals instead.

Call signalLayer.push() with listen as the value for the signal property and add onChange as in the following example:

/* protection-offer example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer",
  onChange: (args) => {
    if(args.selectedOption !== "reject"){
      //Customer has selected a policy
      //List of selected policies available in args.selectedPolicies
    } else {
      //Customer has said no to a policy
    }
  },
});

selectedOption

The selectedOption property is a string value returned in the callback arguments object will match the radio input value attribute that the customer selected.

The input value attribute varies depending on your integration.

• For option 'YES' the radio input value and the selectedOption property equals the option displayed to the user as in: option-1.
• For option 'NO' the radio input value and the selectedOption property equals reject.

When more than one product is displayed, the value will increase its last digit accordignly: option-1 , option-2 , etc.

The 'NO' option of the panel will always match reject

selectedProductIDs

The selectedProductIDs property is an array of strings returned in the callback arguments object that can have the selected products metadata.

• For option 'YES' the selected product ids will be appended to the selectedProductIDs array with the ones they wish to book.
• For option 'NO' the selectedProductIDs array will return empty.

Use the selectedProductIDs values to filter the products before confirming the offer.

Example:

Access the args object in the onChange callback function to access the selectedProductIDs array as in the following example:

/* multiple policy offer example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer",
  onChange: (args) => {
    if (args.selectedProductIDs?.length) {
      // your data filtering logic here..
    }
    // your enable checkout logic here..
  },
});

Modal element

When working with our modal element the onSubmit property will be expected as part of the object pushed to the signal layer array.

This handler function will be triggered every time the modal element is closed by the user and will return the same arguments object including selectedOption.

/* protection-offer-modal example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer-modal",
  onChange: (args) => { // onChange runs on every input option change event
    if(args.selectedOption !== "reject"){
      //Customer has selected a product
      //List of selected products available in args.selectedProductIDs
    }
    // your enable checkout logic here..
  },
  onSubmit: (args) => { // onSubmit runs on modal close event
    if(args.selectedOption !== "reject"){
      //Customer has selected a product
      //List of selected products available in args.selectedProductIDs
    }
    // your enable checkout logic here..
  },
});

From here, you can perform whatever add-to-cart functionality is required and unblock the checkout journey that was preventing them from continuing until they selected an option.

The onChange and onSubmit handler function arguments will not include the native HTML Event object