Component: Compatible Add-ons

Available from: Release 112

The Compatible Add-ons component displays a list of available add-ons that a customer can purchase during the Update Subscription flow. It is designed to work alongside other update components, such as Update Cart Items, and supports a more compact layout that the Cross-sell component to accommodate a large number of available add-ons.

Behaviour

• Displays add-ons listed in the selected offer’s Cross-sell add-ons attribute

  • Excludes add-ons that have the same SKU as other add-ons the customer may already own

• Each add-on card displays:

  • Title: Display name add-on attribute

  • Description: Display description add-on attribute

  • Price: Pricing configured on the add-on

• When compatible add-ons are used in the Create Update Subscription Experience, existing add-ons will be retained if they are compatible with the new update offer. An add-on is considered compatible if it is included in the update offer's Cross-sell add-ons attribute. Add-ons that are not compatible with the update offer will be removed on the order effective date.

Props

Prop name	Prop type	Default	Notes
Heading	string	Compatible add-ons	Controls the heading displayed at the top of the component
Add add-on button label	string	Add	Label used on the button for adding an add-on to the Update Basket
No add-ons heading	string	empty	Displays when there are no add-ons to display