salla-reward-exchange
Confirmation screen for exchanging loyalty points for a prize, with Confirm and Cancel buttons.
Used inside salla-loyalty
<salla-loyalty> renders this component for you. You rarely use it directly.
Confirmation screen for exchanging loyalty points for a prize, with Confirm and Cancel buttons.
Used inside the modals of salla-loyalty-program, salla-loyalty-panel and salla-loyalty-banner; a theme rarely
places it directly.
Confirm calls salla.loyalty.exchange with the prize id and productId, then closes the open modals. If the call
fails, the error message from the response is shown with salla.notify.error. Cancel only closes the open modals.
Use it
In HTML or JSX, use the tag <salla-reward-exchange> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaRewardExchange } from '@salla.sa/twilight-components-react/reward-exchange';Example
import { SallaRewardExchange } from '@salla.sa/twilight-components-react/reward-exchange';
export function Example() {
return (
<SallaRewardExchange
prize={{ id: 1, name: 'Free shipping', cost_points: 200 }}
productId={null}
/>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
prize | prize | The prize being exchanged. Uses id, name and cost_points (points needed, as a number). | Prize | |
productId | product-id | Id of the product the customer picked for a free product prize. Leave null for other prize types. | number | null |
Related
Renders: <salla-button>.
Used inside: <salla-loyalty-banner>, <salla-loyalty-panel>, <salla-loyalty-program>.