EngineWeb components
salla-reward-card
A card for one loyalty prize with its image, points cost, group title and name.
Used inside salla-loyalty
<salla-loyalty> renders this component for you. You rarely use it directly.
A card for one loyalty prize with its image, points cost, group title and name.
Used inside salla-loyalty-program; a theme rarely places it directly.
The clickable area is marked with role="button".
Use it
In HTML or JSX, use the tag <salla-reward-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaRewardCard } from '@salla.sa/twilight-components-react/reward-card';Example
import { useEffect } from 'react';
import { SallaRewardCard } from '@salla.sa/twilight-components-react/reward-card';
export function Example() {
useEffect(() => {
document.getElementById('reward').prize = { id: 1, name: 'Free coffee', cost_points: 500, image: '/coffee.jpg' };
}, []);
return (
<SallaRewardCard id="reward" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
prize | prize | The prize to show. An object with id, name, description, image, cost_points and group_title. It must be set as a property (JS), not as an attribute. | Prize |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
actionClick | Fires when the default action button is clicked. It is not fired for content placed in the action slot. | MouseEvent |
areaClick | Fires when the image and text area of the card is clicked. event.detail is the original MouseEvent. | MouseEvent |
Slots
| Slot | Description |
|---|---|
action | Replaces the default "show reward" button at the bottom of the card. |
Related
Renders: <salla-badge>.
Used inside: <salla-loyalty-panel>, <salla-loyalty-program>.