salla-reward-details
The details view of one loyalty reward, shown in a popup of the loyalty program page.
Used inside salla-loyalty
<salla-loyalty> renders this component for you. You rarely use it directly.
The details view of one loyalty reward, shown in a popup of the loyalty program page. Used inside salla-loyalty-program;
a theme rarely places it directly.
It shows the reward image, its cost in points, terms (minimum order amount and maximum coupon amount when set),
a short text on how to use the reward, "Included" and "Excluded" tabs listing the categories, brands and products
the reward applies to, and the redeem button (salla-reward-action). On the cart page it also shows a back button that
reopens the loyalty-rewards-modal modal.
Use it
In HTML or JSX, use the tag <salla-reward-details> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaRewardDetails } from '@salla.sa/twilight-components-react/reward-details';Example
import { useEffect } from 'react';
import { SallaRewardDetails } from '@salla.sa/twilight-components-react/reward-details';
export function Example() {
useEffect(() => {
const details = document.querySelector('#details');
details.prize = { id: 1, name: 'Free shipping', image: '/reward.png', cost_points: 500, key: 'FREE_SHIPPING' };
details.addEventListener('actionClick', () => console.log('redeem clicked'));
details.addEventListener('productActionClick', e => console.log(e.detail.productId));
}, []);
return (
<SallaRewardDetails id="details" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
prize | prize | The reward to show, a loyalty prize object. Used fields: name, image, cost_points, key (FREE_SHIPPING is treated specially), order_minimum_amount, coupon_maximum_amount (both amounts as strings), included_* and excluded_* id arrays (product_ids, brand_ids, category_ids), and optional pre-loaded categories, brands, excludedCategories, excludedBrands. Included products are fetched by id. Set it as a JS property. It must be set, otherwise rendering fails. | Prize |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
actionClick | Fires when a logged-in customer clicks the Redeem button. event.detail is the original click MouseEvent. | MouseEvent |
productActionClick | Fires when the customer clicks redeem on one of the included products. event.detail is { productId }. | { productId: number; } |
Related
Renders: <salla-slider>, <salla-products-slider>, <salla-loyalty-exchange-product-card>, <salla-badge>, <salla-tabs>, <salla-tab-header>, <salla-tab-content>, <salla-reward-action>.
Used inside: <salla-loyalty-panel>, <salla-loyalty-program>.