useCoupon

Use useCoupon to build a coupon box on your cart page: an input that applies a code, and a button that removes it.

ExampleCopy Anchor Link

import { useState } from 'react';
import { useCoupon } from '@salla.sa/twilight-theme-engine/hooks/useCoupon';

export function CouponBox({ applied }: { applied?: string | null }) {
  const { apply, remove, loading, error } = useCoupon();
  const [code, setCode] = useState('');

  if (applied) {
    return (
      <div>
        <span>Coupon: {applied}</span>
        <button onClick={remove} disabled={loading}>Remove</button>
      </div>
    );
  }

  return (
    <div>
      <input value={code} onChange={(e) => setCode(e.target.value)} />
      <button onClick={() => apply(code)} disabled={loading}>Apply</button>
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

Pass the applied code from the cart: cart.coupon. See Cart data.

APICopy Anchor Link

function useCoupon(): UseCouponResult;

interface UseCouponResult {
  value: string | null;
  loading: boolean;
  error: string | null;
  apply: (code: string) => Promise<boolean>;
  remove: () => Promise<boolean>;
}

GotchasCopy Anchor Link

• The hook changes the cart through the Salla SDK, and the cart is updated on the server. The hook does not refetch your cart data: read the new totals and cart.coupon from the cart, see Cart data.
• value is local state and starts as null on every page load, even when the cart already has a coupon. Read the applied code from cart.coupon, not from value.
• An empty or blank code fails with the error Please enter a coupon code (English only) and sends no request.
• Server errors (an invalid or expired code) arrive in error as the message of the error the SDK raised.
• apply and remove never throw. Check the boolean they resolve.
• Call them from event handlers, not during render: the hook is client-only, and it does nothing when the Salla SDK is not loaded yet.
• Store setting settings.cart.apply_coupon_enabled says whether the coupon box should be shown, see Store data.

NextCopy Anchor Link

• Cart data: cart.coupon, totals and discounts.
• useAsyncFn, the loading and error helper this hook is built on.
• Cart page