salla-next-order-coupon

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 itCopy Anchor Link

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

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

ExampleCopy Anchor Link

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

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

RelatedCopy Anchor Link

Renders: <salla-skeleton>, <salla-button>.