# salla-next-order-coupon (https://docs.salla.dev/twilight/react/web-components/salla-next-order-coupon)



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

Shows the "coupon for your next order" offered by the store, with its discount amount, minimum spend, expiry date, a button to copy the code and a "shop now" button.
Use it on the order thank-you page. It has no attributes: it loads the store's thank-you coupon by itself (the first one returned), shows a placeholder while loading, and renders nothing when there is no coupon or loading fails.

When the customer copies the code, it shows a success notification and dispatches the `salla::next-order-coupon.code.copied` event through `salla.event`, with `{ code }` as the payload.

## Use it [#use-it]

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

```tsx
import { SallaNextOrderCoupon } from '@salla.sa/twilight-components-react/next-order-coupon';
```

## Example [#example]

```tsx
import { SallaNextOrderCoupon } from '@salla.sa/twilight-components-react/next-order-coupon';

export function Example() {
  return (
    <SallaNextOrderCoupon />
  );
}
```

```html
<salla-next-order-coupon></salla-next-order-coupon>
```

## Related [#related]

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