# salla-offer-modal (https://docs.salla.dev/twilight/react/web-components/salla-offer-modal)



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

A popup (built on `salla-modal`) that shows the special offer attached to a product: the offer name and message,
the products, categories, brands or tags the customer gets the discount on (or a quantity discount table), and the
offer conditions. Put one instance on pages where offers can appear (usually once in the theme layout); it opens
itself when the product API reports an existing offer (unless the customer ticked "remember my choice" for that offer),
or when you call `open(productId)` or emit the `offer-modal::open` event with a product id. Nothing opens if the product has no offers.
It emits the global `promotion::viewed` and `promotion::clicked` events for analytics.

## Use it [#use-it]

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

```tsx
import { SallaOfferModal } from '@salla.sa/twilight-components-react/offer-modal';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaOfferModal } from '@salla.sa/twilight-components-react/offer-modal';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-offer-modal').open(123456);
  }, []);

  return (
    <SallaOfferModal />
  );
}
```

```html
<salla-offer-modal></salla-offer-modal>
<script>
  document.querySelector('salla-offer-modal').open(123456);
</script>
```

## Methods [#methods]

Call these on the element or a React ref.

### `open(product_id: number) => Promise<any>` [#openproduct_id-number--promiseany]

Fetches the offers for a product and opens the modal showing the first one. If the product has no offers the modal is not opened;
if the request fails, the modal opens with the error message.

| Parameter    | Type     | Description                                  |
| ------------ | -------- | -------------------------------------------- |
| `product_id` | `number` | The id of the product to look up offers for. |

Returns `Promise<any>`: Promise that resolves when the request has finished (it has no meaningful value).

### `showOffer(offer: any) => Promise<void>` [#showofferoffer-any--promisevoid]

Renders the given offer inside the modal and emits `promotion::viewed`. It does not open the modal itself, so use `open()` unless the modal is already open.

| Parameter | Type  | Description                                                                                                                                                                                          |
| --------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `offer`   | `any` | An offer object as returned by the product offers API, with `id`, `name`, `message`, `buy` and `get` (`get` holds the discounted `products`, `categories`, `brands`, `tags` or a `discounts_table`). |

## Slots [#slots]

| Slot       | Description                                                                                                                                                                                                              |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `category` | Replaces the category badge markup for categories in the offer. Read once from the element's initial children; the text `{name}` and `{url}` are replaced with the category's values, and `{tagIcon}` with the tag icon. |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-products-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-products-slider), [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder).