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



{/* 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 details view of one loyalty reward, shown in a popup of the loyalty program page. Used inside salla-loyalty-program;
a theme rarely places it directly.
It shows the reward image, its cost in points, terms (minimum order amount and maximum coupon amount when set),
a short text on how to use the reward, "Included" and "Excluded" tabs listing the categories, brands and products
the reward applies to, and the redeem button (`salla-reward-action`). On the cart page it also shows a back button that
reopens the `loyalty-rewards-modal` modal.

## Use it [#use-it]

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

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

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaRewardDetails } from '@salla.sa/twilight-components-react/reward-details';

export function Example() {
  useEffect(() => {
    const details = document.querySelector('#details');
    details.prize = { id: 1, name: 'Free shipping', image: '/reward.png', cost_points: 500, key: 'FREE_SHIPPING' };
    details.addEventListener('actionClick', () => console.log('redeem clicked'));
    details.addEventListener('productActionClick', e => console.log(e.detail.productId));
  }, []);

  return (
    <SallaRewardDetails id="details" />
  );
}
```

```html
<salla-reward-details id="details"></salla-reward-details>
<script>
  const details = document.querySelector('#details');
  details.prize = { id: 1, name: 'Free shipping', image: '/reward.png', cost_points: 500, key: 'FREE_SHIPPING' };
  details.addEventListener('actionClick', () => console.log('redeem clicked'));
  details.addEventListener('productActionClick', e => console.log(e.detail.productId));
</script>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type    | Default |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| `prize`  | `prize`   | The reward to show, a loyalty prize object. Used fields: `name`, `image`, `cost_points`, `key` (`FREE_SHIPPING` is treated specially), `order_minimum_amount`, `coupon_maximum_amount` (both amounts as strings), `included_*` and `excluded_*` id arrays (`product_ids`, `brand_ids`, `category_ids`), and optional pre-loaded `categories`, `brands`, `excludedCategories`, `excludedBrands`. Included products are fetched by id. Set it as a JS property. It must be set, otherwise rendering fails. | `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`             |
| `productActionClick` | Fires when the customer clicks redeem on one of the included products. `event.detail` is `{ productId }`.    | `{ productId: number; }` |

## Related [#related]

Renders: [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-products-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-products-slider), [`<salla-loyalty-exchange-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-exchange-product-card), [`<salla-badge>`](https://docs.salla.dev/twilight/react/web-components/salla-badge), [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs), [`<salla-tab-header>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-header), [`<salla-tab-content>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-content), [`<salla-reward-action>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-action).

Used inside: [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program).