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



{/* 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>

A reward card for one loyalty prize: image, points cost, group title, prize name and a redeem button.
Used by the loyalty program components; a theme rarely places it directly. It does not open any modal itself, it
only emits `rewardModalOpen` and `confirmModalOpen` for its parent to handle.

The redeem button is disabled and shows an out of stock label when the prize `key` is `free_product` and
`is_product_available` is falsy. When the visitor is a guest, clicking redeem opens the login flow instead of
emitting `confirmModalOpen`.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <SallaLoyaltyReward
      prize={{ id: 1, name: 'Free shipping', image: '/img/prize.png', cost_points: 200, key: 'free_shipping' }}
      group={'Shipping'}
      onRewardModalOpen={e => console.log(e.detail)}
    />
  );
}
```

```ts
const reward = document.querySelector('salla-loyalty-reward');
reward.prize = { id: 1, name: 'Free shipping', image: '/img/prize.png', cost_points: 200, key: 'free_shipping' };
reward.group = 'Shipping';
reward.addEventListener('rewardModalOpen', e => console.log(e.detail));
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                                                   | Type           | Default |
| -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- |
| `group`  | `group`   | Text shown above the prize name, normally the title of the prize group the prize belongs to.                                                                                                  | `string`       |         |
| `prize`  | `prize`   | The prize to show. Uses `id`, `name`, `image`, `cost_points` (points needed, as a number), `key` (for example `free_product`, `free_shipping`, `coupon_discount`) and `is_product_available`. | `Prize`        |         |
| `size`   | `size`    | Card size. `xs` adds a compact modifier class, `md` is the default size.                                                                                                                      | `"md" \| "xs"` | `'md'`  |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event              | Description                                                                                      | Detail  |
| ------------------ | ------------------------------------------------------------------------------------------------ | ------- |
| `confirmModalOpen` | Fires when a logged in customer clicks the redeem button. `event.detail` is the `prize` object.  | `Prize` |
| `rewardModalOpen`  | Fires when the image and text area of the card is clicked. `event.detail` is the `prize` object. | `Prize` |

## Related [#related]

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