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



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

Cart widget that shows the customer's loyalty points balance and lets them exchange points for a prize.
It is a cart page widget (`salla-loyalty` is the other loyalty component for the cart). For a logged in customer it loads the balance with `salla.loyalty.getPoints()`, and the
"exchange now" button opens a modal with the prizes grouped in tabs, then a prize details modal and a confirmation
modal. After an exchange or a reset succeeds, the page reloads.

Rendering has three states. When `prize-title` and `prize-points` are both set, it shows the exchanged prize with
a button that calls `salla.loyalty.reset()`. Otherwise, when the balance is 0 or unknown, it renders nothing.
Otherwise it shows the balance and the exchange button. The balance is the fetched points, falling back to
`customer-points`.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <SallaLoyaltyPanel customerPoints={450} />
  );
}
```

```html
<salla-loyalty-panel customer-points="450"></salla-loyalty-panel>
```

## Properties [#properties]

| Property         | Attribute         | Description                                                                                                                                          | Type     | Default |
| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `customerPoints` | `customer-points` | Fallback points balance, used only when the balance could not be fetched from the API (for example for a guest). A fetched balance takes precedence. | `number` |         |
| `prizePoints`    | `prize-points`    | Points cost of the prize the customer already exchanged. Together with `prize-title`, it switches the widget to the exchanged prize state.           | `string` |         |
| `prizeTitle`     | `prize-title`     | Name of the prize the customer already exchanged. Shown only together with `prize-points`.                                                           | `string` |         |

## Related [#related]

Renders: [`<salla-list-tile>`](https://docs.salla.dev/twilight/react/web-components/salla-list-tile), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading), [`<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-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-reward-card>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-card), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details), [`<salla-reward-exchange>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-exchange).