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



{/* 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 product card with a "redeem reward" button, shown for each product that a loyalty reward
includes. Used inside salla-reward-details; a theme rarely places it directly.
It renders `custom-salla-product-card` if that element is registered, otherwise `salla-product-card`,
with the add to cart button hidden.

## Use it [#use-it]

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

```tsx
import { SallaLoyaltyExchangeProductCard } from '@salla.sa/twilight-components-react/loyalty-exchange-product-card';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaLoyaltyExchangeProductCard } from '@salla.sa/twilight-components-react/loyalty-exchange-product-card';

export function Example() {
  useEffect(() => {
    const card = document.getElementById('card');
    card.product = { id: 123, name: 'T-Shirt', url: '/p123', price: 100 };
    card.addEventListener('loyaltyProductExchange', e => console.log(e.detail.productId));
  }, []);

  return (
    <SallaLoyaltyExchangeProductCard id="card" />
  );
}
```

```html
<salla-loyalty-exchange-product-card id="card"></salla-loyalty-exchange-product-card>
<script>
  const card = document.getElementById('card');
  card.product = { id: 123, name: 'T-Shirt', url: '/p123', price: 100 };
  card.addEventListener('loyaltyProductExchange', e => console.log(e.detail.productId));
</script>
```

## Properties [#properties]

| Property  | Attribute | Description                                                                                                                       | Type  | Default |
| --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------- | ----- | ------- |
| `product` | `product` | The product to show. Accepts a product object (the same shape salla-product-card takes, `id` is required) or a JSON string of it. | `any` |         |

## Events [#events]

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

| Event                    | Description                                                                                          | Detail                   |
| ------------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------ |
| `loyaltyProductExchange` | Fires when the redeem button is clicked. `event.detail` is `{ productId }`, the `id` of the product. | `{ productId: number; }` |

## Related [#related]

Renders: [`<salla-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-product-card), [`<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).