salla-loyalty-reward
A reward card for one loyalty prize: image, points cost, group title, prize name and a redeem button.
Used inside salla-loyalty
<salla-loyalty> renders this component for you. You rarely use it directly.
A reward card for one loyalty prize: image, points cost, group title, prize name and a redeem button.
Used by the loyalty program components; a theme rarely places it directly. It does not open any modal itself, it
only emits rewardModalOpen and confirmModalOpen for its parent to handle.
The redeem button is disabled and shows an out of stock label when the prize key is free_product and
is_product_available is falsy. When the visitor is a guest, clicking redeem opens the login flow instead of
emitting confirmModalOpen.
Use it
In HTML or JSX, use the tag <salla-loyalty-reward> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoyaltyReward } from '@salla.sa/twilight-components-react/loyalty-reward';Example
import { SallaLoyaltyReward } from '@salla.sa/twilight-components-react/loyalty-reward';
export function Example() {
return (
<SallaLoyaltyReward
prize={{ id: 1, name: 'Free shipping', image: '/img/prize.png', cost_points: 200, key: 'free_shipping' }}
group={'Shipping'}
onRewardModalOpen={e => console.log(e.detail)}
/>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
group | group | Text shown above the prize name, normally the title of the prize group the prize belongs to. | string | |
prize | prize | The prize to show. Uses id, name, image, cost_points (points needed, as a number), key (for example free_product, free_shipping, coupon_discount) and is_product_available. | Prize | |
size | size | Card size. xs adds a compact modifier class, md is the default size. | "md" | "xs" | 'md' |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
confirmModalOpen | Fires when a logged in customer clicks the redeem button. event.detail is the prize object. | Prize |
rewardModalOpen | Fires when the image and text area of the card is clicked. event.detail is the prize object. | Prize |
Related
Renders: <salla-badge>.