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



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

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

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

## Example [#example]

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

```ts
const exchange = document.querySelector('salla-reward-exchange');
exchange.prize = { id: 1, name: 'Free shipping', cost_points: 200 };
exchange.productId = null;
```

## Properties [#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 [#related]

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

Used inside: [`<salla-loyalty-banner>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-banner), [`<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).