salla-loyalty-panel
Cart widget that shows the customer's loyalty points balance and lets them exchange points for a prize.
Cart widget that shows the customer's loyalty points balance and lets them exchange points for a prize.
It is a cart page widget (salla-loyalty is the other loyalty component for the cart). For a logged in customer it loads the balance with salla.loyalty.getPoints(), and the
"exchange now" button opens a modal with the prizes grouped in tabs, then a prize details modal and a confirmation
modal. After an exchange or a reset succeeds, the page reloads.
Rendering has three states. When prize-title and prize-points are both set, it shows the exchanged prize with
a button that calls salla.loyalty.reset(). Otherwise, when the balance is 0 or unknown, it renders nothing.
Otherwise it shows the balance and the exchange button. The balance is the fetched points, falling back to
customer-points.
Use it
In HTML or JSX, use the tag <salla-loyalty-panel> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoyaltyPanel } from '@salla.sa/twilight-components-react/loyalty-panel';Example
import { SallaLoyaltyPanel } from '@salla.sa/twilight-components-react/loyalty-panel';
export function Example() {
return (
<SallaLoyaltyPanel customerPoints={450} />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
customerPoints | customer-points | Fallback points balance, used only when the balance could not be fetched from the API (for example for a guest). A fetched balance takes precedence. | number | |
prizePoints | prize-points | Points cost of the prize the customer already exchanged. Together with prize-title, it switches the widget to the exchanged prize state. | string | |
prizeTitle | prize-title | Name of the prize the customer already exchanged. Shown only together with prize-points. | string |
Related
Renders: <salla-list-tile>, <salla-button>, <salla-modal>, <salla-loading>, <salla-tabs>, <salla-tab-header>, <salla-tab-content>, <salla-slider>, <salla-reward-card>, <salla-reward-details>, <salla-reward-exchange>.