👂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 policy type value.

• For option 'NO' the radio input value and the selectedOption property equals reject.

There are legacy integrations where 'YES' equals accept.

Please consult your CSE for more information on what to expect as your selectedOption values.

selectedPolicies

The selectedPolicies property is an array of objects returned in the callback arguments object that can have the selected policies metadata.

• For option 'YES' the selected policies metadata will be appended to the selectedPolicies array with the ones they wish to book.

• For option 'NO' the selectedPolicies array will return empty.

Use the selectedPolicies metadata to filter the policies the user wish to book before booking.

We recommend using the id property in the metadata when filtering policies.

Policy object metadata schema:

{
    id: string;
    policy_code: string;
    policy_start_date: string;
    policy_end_date: string;
    policy_type: string;
    policy_version: string;
    price: float;
}

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

/* multiple policy offer example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer",
  onChange: (args) => {
    if (args.selectedPolicies?.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 policy
      //List of selected policies available in args.selectedPolicies
    }
    // your enable checkout logic here..
  },
  onSubmit: (args) => { // onSubmit runs on modal close event
    if(args.selectedOption !== "reject"){
      //Customer has selected a policy
      //List of selected policies available in args.selectedPolicies
    }
    // 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