Twilight docs

Used inside salla-loyalty

<salla-loyalty> renders this component for you. You rarely use it directly.

The action button at the bottom of a loyalty reward's details popup. Used inside salla-reward-details; a theme rarely places it directly. It shows a "Redeem reward" button. When the store has the loyalty-system-v2 feature and the prize key is free_product, it shows a Cancel button instead, which closes every salla-modal on the page. For a guest, clicking Redeem closes the open modals and opens the login popup instead of emitting actionClick.

Use it

In HTML or JSX, use the tag <salla-reward-action> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaRewardAction } from '@salla.sa/twilight-components-react/reward-action';

Example

import { useEffect } from 'react';
import { SallaRewardAction } from '@salla.sa/twilight-components-react/reward-action';

export function Example() {
  useEffect(() => {
    const action = document.querySelector('#reward-action');
    action.prize = { id: 1, name: 'Free shipping', key: 'free_shipping', cost_points: 500 };
    action.addEventListener('actionClick', () => console.log('redeem', action.prize.id));
  }, []);

  return (
    <SallaRewardAction id="reward-action" />
  );
}