# salla-reward-action (https://docs.salla.dev/twilight/react/web-components/salla-reward-action)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-loyalty">
  [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty) renders this component for you. You rarely use it directly.
</Callout>

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 [#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).

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

## Example [#example]

```tsx
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" />
  );
}
```

```html
<salla-reward-action id="reward-action"></salla-reward-action>
<script>
  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));
</script>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                              | Type    | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------ | ------- | ------- |
| `prize`  | `prize`   | The reward the button acts on, an object with at least an optional `key` (such as `free_product`). Set as a JS property. | `Prize` |         |

## Events [#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` |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).

Used inside: [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).