@akinon/pz-theme 2.0.67-rc.0 → 2.0.68-beta.0

package/src/blocks/basket-summary-block.tsx

@@ -2,17 +2,27 @@
 
 import React, { useState } from 'react';
 import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
 import {
   basketApi,
   useGetBasketQuery,
   useApplyVoucherCodeMutation,
   useRemoveVoucherCodeMutation
 } from '@akinon/next/data/client/basket';
+import { useGetBasketOffersQuery } from '@akinon/next/data/client/account';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useThemePageContext } from '../theme-page-context';
-import { formatMoney, parseAmount } from './commerce-format';
+import {
+  formatDate,
+  formatMoney,
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions,
+  parseAmount
+} from './commerce-format';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -23,6 +33,8 @@ interface BasketTotalsLike {
   total_discount_amount?: string;
   total_quantity?: number;
   voucher_code?: string | null;
+  /** One entry per campaign / voucher that cut the basket. */
+  discounts?: Array<{ description?: string; discount?: string }>;
   basketitem_set?: Array<{ currency_type?: string }>;
 }
 
@@ -34,12 +46,79 @@ interface TotalsRow {
   type: 'subtotal' | 'discount' | 'total';
 }
 
+/**
+ * One entry of the shopper's coupon wallet as the account offers service
+ * returns it (`/account/basket-offers` → `{ discounts: [...] }`).
+ */
+interface BasketOfferLike {
+  pk?: number;
+  label?: string;
+  voucher_code?: string | null;
+  amount?: string | null;
+  percentage?: string | number | null;
+  start_datetime?: string;
+  end_datetime?: string;
+}
+
+/** Both shapes the offers service answers with, plus a bare array. */
+const readOffers = (payload: unknown): BasketOfferLike[] => {
+  if (Array.isArray(payload)) return payload as BasketOfferLike[];
+  const record = (payload ?? {}) as Record<string, unknown>;
+  if (Array.isArray(record.discounts)) return record.discounts as BasketOfferLike[];
+  if (Array.isArray(record.results)) return record.results as BasketOfferLike[];
+  return [];
+};
+
 /**
  * Last-resort checkout target. Only used when the editor left `checkoutHref`
  * empty and no page context supplied one.
  */
 const DEFAULT_CHECKOUT_HREF = '/orders/checkout';
 
+const ALLOWED_DECIMALS = ['always', 'auto', 'never'];
+const ALLOWED_CURRENCY_DISPLAYS = ['', 'symbol', 'code', 'custom', 'none'];
+const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
+const COUPON_PRESENTATIONS = ['inline', 'collapsible'];
+const DISCOUNT_ROWS = ['total', 'each'];
+const COUPON_PLACEMENTS = ['before-cta', 'after-cta'];
+
+const readOption = <T extends string>(
+  value: unknown,
+  breakpoint: string,
+  allowed: string[],
+  fallback: T
+): T => {
+  const raw = String(getResponsiveValue(value, breakpoint, fallback));
+  return (allowed.includes(raw) ? raw : fallback) as T;
+};
+
+/**
+ * The arrow on a collapsible panel header: the design language is a small
+ * right arrow that turns down while the panel is open. Drawn inline so the
+ * block needs no asset; the designer restyles it through the `*-toggle-icon`
+ * part and the `open` state.
+ */
+const ToggleArrow = ({ open }: { open: boolean }) => (
+  <svg
+    width="8"
+    height="8"
+    viewBox="0 0 8 8"
+    fill="none"
+    aria-hidden="true"
+    style={{
+      display: 'block',
+      flex: '0 0 auto',
+      transform: open ? 'rotate(90deg)' : 'none',
+      transition: 'transform 150ms ease'
+    }}
+  >
+    <path
+      d="M3.4043 7.14648L6.12109 4.42871H0.0576172V3.42871H6.05078L3.4043 0.782227L4.11133 0.0751953L8 3.96387L4.11133 7.85352L3.4043 7.14648Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 /**
  * Functional commerce block: basket totals, optional voucher field and the
  * checkout call to action. Totals stay commerce-driven; the editor owns the
@@ -47,9 +126,29 @@ const DEFAULT_CHECKOUT_HREF = '/orders/checkout';
  * and the styling.
  *
  * Parts: root, totals, row, row-label, row-value, total, total-label,
- * total-value, coupon, coupon-applied, coupon-code, coupon-remove,
- * coupon-input, coupon-button, coupon-error, cta, empty. A child marked as the
- * item template replaces the built-in totals row.
+ * total-value, coupon, coupon-toggle, coupon-toggle-icon, coupon-form,
+ * coupon-applied, coupon-code, coupon-remove, coupon-input, coupon-button,
+ * coupon-error, gift-card, gift-card-toggle, gift-card-toggle-icon,
+ * gift-card-form, gift-card-fields, gift-card-input, gift-card-cvv,
+ * gift-card-button, gift-card-error, cta, cta-note, empty. A child marked as
+ * the item template replaces the built-in totals row.
+ *
+ * `couponPresentation: 'collapsible'` hides the voucher form behind a header
+ * row (`couponToggleLabel`) until the shopper opens it; `couponPlacement`
+ * moves the voucher (and the gift card panel) below the checkout button.
+ * `showGiftCard` adds a second collapsible panel with a card number and CVV.
+ * Commerce exposes no basket-level gift card endpoint, so the panel redeems
+ * through the voucher endpoint — the same call the brand storefronts make for
+ * code-like balances — which is why its error copy is separate.
+ * `discountRows: 'each'` prints one discount row per basket campaign or
+ * voucher (commerce `discounts[]`, labelled with the campaign description)
+ * instead of the single summed row.
+ * `showOffers` lists the signed-in shopper's coupon wallet (the account
+ * basket-offers service) as cards above the panels — validity date, label,
+ * value and an apply control that submits the offer's voucher code; the card
+ * whose code is on the basket is `selected` and its control removes it again.
+ * Parts: offers, offer, offer-date, offer-body, offer-label, offer-value,
+ * offer-apply, offer-apply-icon, offers-error.
  *
  * Checkout target resolution, highest priority first:
  *   1. `checkoutHref` property — authoritative whenever the author sets it.
@@ -92,7 +191,81 @@ const BasketSummaryBlock = ({
   const discountLabel = prop('discountLabel', 'Discount');
   const totalLabel = prop('totalLabel', 'Total');
   const discountPrefix = prop('discountPrefix', '-');
+  // `each` prints one row per basket campaign / voucher (commerce's
+  // `discounts[]`, labelled with the campaign description); `total` keeps
+  // the single summed row.
+  const discountRows = readOption<'total' | 'each'>(
+    block.properties?.discountRows,
+    currentBreakpoint,
+    DISCOUNT_ROWS,
+    'total'
+  );
   const emptyLabel = prop('emptyLabel', '').trim();
+  const shippingLabel = prop('shippingLabel', '').trim();
+  const shippingValue = prop('shippingValue', '').trim();
+  const ctaNote = prop('ctaNote', '').trim();
+  const couponPresentation = readOption<'inline' | 'collapsible'>(
+    block.properties?.couponPresentation,
+    currentBreakpoint,
+    COUPON_PRESENTATIONS,
+    'inline'
+  );
+  const couponPlacement = readOption<'before-cta' | 'after-cta'>(
+    block.properties?.couponPlacement,
+    currentBreakpoint,
+    COUPON_PLACEMENTS,
+    'before-cta'
+  );
+  const couponToggleLabel = prop('couponToggleLabel', 'Promo code');
+  const showGiftCard = boolProp('showGiftCard', false);
+  const giftCardToggleLabel = prop('giftCardToggleLabel', 'Gift card');
+  const giftCardNumberPlaceholder = prop(
+    'giftCardNumberPlaceholder',
+    'Card number'
+  );
+  const giftCardCvvPlaceholder = prop('giftCardCvvPlaceholder', 'CVV');
+  const giftCardApplyLabel = prop('giftCardApplyLabel', 'Apply');
+  const giftCardError = prop(
+    'giftCardError',
+    'Gift card could not be applied.'
+  );
+  const showOffers = boolProp('showOffers', false);
+  const offerApplyLabel = prop('offerApplyLabel', 'Apply');
+  const offerRemoveLabel = prop('offerRemoveLabel', 'Remove');
+  const offerPercentagePrefix = prop('offerPercentagePrefix', '%');
+  const offerApplyError = prop(
+    'offerApplyError',
+    'Coupon could not be applied.'
+  );
+  const rawOffersLimit = Math.round(
+    Number(
+      getResponsiveValue(block.properties?.offersLimit, currentBreakpoint, 0)
+    )
+  );
+  // 0 lists the whole wallet.
+  const offersLimit =
+    Number.isFinite(rawOffersLimit) && rawOffersLimit > 0 ? rawOffersLimit : 0;
+  const money: MoneyStyleOptions = {
+    decimals: readOption<MoneyDecimals>(
+      block.properties?.decimals,
+      currentBreakpoint,
+      ALLOWED_DECIMALS,
+      'always'
+    ),
+    currencyDisplay: readOption<MoneyCurrencyDisplay>(
+      block.properties?.currencyDisplay,
+      currentBreakpoint,
+      ALLOWED_CURRENCY_DISPLAYS,
+      ''
+    ),
+    currencyText: prop('currencyText', ''),
+    currencyPosition: readOption<MoneyCurrencyPosition>(
+      block.properties?.currencyPosition,
+      currentBreakpoint,
+      ALLOWED_CURRENCY_POSITIONS,
+      ''
+    )
+  };
 
   const pageContext = useThemePageContext();
   const dispatch = useAppDispatch();
@@ -102,9 +275,24 @@ const BasketSummaryBlock = ({
     useApplyVoucherCodeMutation();
   const [removeVoucherCode, { isLoading: isRemoving }] =
     useRemoveVoucherCodeMutation();
+  const { status: sessionStatus } = useSession();
+  const isAuthenticated = sessionStatus === 'authenticated';
+  // Guests have no coupon wallet; skipping avoids a guaranteed 403. The hook
+  // is called unconditionally (hook order is fixed) and only paid for when
+  // the wallet is actually shown.
+  const { data: offersData } = useGetBasketOffersQuery(undefined, {
+    skip: !showOffers || !isAuthenticated
+  });
 
   const [code, setCode] = useState('');
+  const [offersError, setOffersError] = useState('');
+  const [pendingOffer, setPendingOffer] = useState('');
   const [error, setError] = useState('');
+  const [couponOpen, setCouponOpen] = useState(false);
+  const [giftCardOpen, setGiftCardOpen] = useState(false);
+  const [giftCardNumber, setGiftCardNumber] = useState('');
+  const [giftCardCvv, setGiftCardCvv] = useState('');
+  const [giftCardFailure, setGiftCardFailure] = useState('');
 
   const contextBasket = (pageContext?.basket ?? null) as {
     totalAmount?: string;
@@ -112,18 +300,21 @@ const BasketSummaryBlock = ({
     totalDiscountAmount?: string;
     voucherCode?: string;
     checkoutUrl?: string;
+    totalQuantity?: number;
     items?: Array<{ currency?: string }>;
   } | null;
 
   const liveBasket = basket as BasketTotalsLike | undefined;
 
   const totals = {
+    count: liveBasket?.total_quantity ?? contextBasket?.totalQuantity ?? 0,
     subtotal:
       liveBasket?.total_product_amount ?? contextBasket?.totalProductAmount,
     discount:
       liveBasket?.total_discount_amount ?? contextBasket?.totalDiscountAmount,
     total: liveBasket?.total_amount ?? contextBasket?.totalAmount,
-    voucher: liveBasket?.voucher_code ?? contextBasket?.voucherCode ?? ''
+    voucher: liveBasket?.voucher_code ?? contextBasket?.voucherCode ?? '',
+    discounts: Array.isArray(liveBasket?.discounts) ? liveBasket!.discounts : []
   };
 
   // The basket reports the currency it was priced in; the storefront currency
@@ -134,8 +325,11 @@ const BasketSummaryBlock = ({
     localeCurrency ||
     '';
 
-  const money = (value?: string | number) =>
-    formatMoney(value, { locale, currency });
+  const formatAmount = (value?: string | number) =>
+    formatMoney(value, { locale, currency, ...money });
+  // `{count}` in a row label prints the basket's piece count ("2 Parça").
+  const withCount = (label: string) =>
+    label.replace(/\{count\}/g, String(totals.count));
 
   // No page supplies a basket page context yet, so `checkoutUrl` is inert for
   // now; the read is kept because the basket page context is being wired.
@@ -153,25 +347,54 @@ const BasketSummaryBlock = ({
   if (showSubtotal && totals.subtotal !== undefined) {
     rows.push({
       key: 'subtotal',
-      label: subtotalLabel,
-      value: money(totals.subtotal),
+      label: withCount(subtotalLabel),
+      value: formatAmount(totals.subtotal),
+      type: 'subtotal'
+    });
+  }
+
+  // A basket carries no shipping figure (that is checkout's); the row is the
+  // brand's own promise ("Kargo — 0 TL") and renders only when both halves are
+  // authored.
+  if (shippingLabel && shippingValue) {
+    rows.push({
+      key: 'shipping',
+      label: shippingLabel,
+      value: shippingValue,
       type: 'subtotal'
     });
   }
 
-  if (showDiscount && (parseAmount(totals.discount) ?? 0) > 0) {
+  const itemisedDiscounts =
+    discountRows === 'each'
+      ? totals.discounts.filter(
+          (entry) => (parseAmount(entry?.discount) ?? 0) > 0
+        )
+      : [];
+
+  if (showDiscount && itemisedDiscounts.length > 0) {
+    itemisedDiscounts.forEach((entry, index) => {
+      rows.push({
+        key: `discount-${index}`,
+        label: entry.description?.trim() || discountLabel,
+        value: `${discountPrefix}${formatAmount(entry.discount)}`,
+        type: 'discount'
+      });
+    });
+  } else if (showDiscount && (parseAmount(totals.discount) ?? 0) > 0) {
+    // No itemised list (or the mode is `total`): one summed row.
     rows.push({
       key: 'discount',
       label: discountLabel,
-      value: `${discountPrefix}${money(totals.discount)}`,
+      value: `${discountPrefix}${formatAmount(totals.discount)}`,
       type: 'discount'
     });
   }
 
   rows.push({
     key: 'total',
-    label: totalLabel,
-    value: money(totals.total),
+    label: withCount(totalLabel),
+    value: formatAmount(totals.total),
     type: 'total'
   });
 
@@ -249,6 +472,393 @@ const BasketSummaryBlock = ({
     }
   };
 
+  const applyOffer = async (offer: BasketOfferLike) => {
+    setOffersError('');
+    const voucher = String(offer.voucher_code ?? '').trim();
+
+    if (isDesigner || !voucher) return;
+
+    setPendingOffer(voucher);
+    try {
+      const nextBasket =
+        totals.voucher === voucher
+          ? await removeVoucherCode().unwrap()
+          : await applyVoucherCode({ voucher_code: voucher }).unwrap();
+
+      syncBasketCache(nextBasket);
+    } catch {
+      setOffersError(offerApplyError);
+    } finally {
+      setPendingOffer('');
+    }
+  };
+
+  const submitGiftCard = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setGiftCardFailure('');
+
+    const value = giftCardNumber.trim();
+
+    if (isDesigner || !value) return;
+
+    try {
+      const nextBasket = await applyVoucherCode({
+        voucher_code: value
+      }).unwrap();
+
+      syncBasketCache(nextBasket);
+      setGiftCardNumber('');
+      setGiftCardCvv('');
+    } catch {
+      setGiftCardFailure(giftCardError);
+    }
+  };
+
+  const panelToggleStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    width: '100%',
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'left',
+    cursor: 'pointer',
+    padding: 0
+  };
+
+  const fieldStyle: React.CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    border: '1px solid var(--basket-summary-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    padding: '8px 12px',
+    outline: 'none'
+  };
+
+  // The voucher form, plain or behind a header row. `coupon-toggle` carries
+  // `open` so a brand can style the expanded header (a border, a turned arrow).
+  const couponBody = (
+    <>
+      {totals.voucher ? (
+        <div
+          {...partAttrs('coupon-applied', { selected: true })}
+          style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
+        >
+          <span {...partAttrs('coupon-code')}>{totals.voucher}</span>
+          <button
+            type="button"
+            disabled={isRemoving || isDesigner}
+            onClick={dropVoucher}
+            {...partAttrs('coupon-remove', {
+              disabled: isRemoving || isDesigner,
+              loading: isRemoving
+            })}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'inherit',
+              textDecoration: 'underline',
+              padding: 0
+            }}
+          >
+            {couponRemoveLabel}
+          </button>
+        </div>
+      ) : (
+        <form
+          onSubmit={submitVoucher}
+          {...partAttrs('coupon-form')}
+          style={{ display: 'flex', gap: '8px' }}
+        >
+          <input
+            type="text"
+            value={code}
+            onChange={(event) => setCode(event.target.value)}
+            placeholder={couponPlaceholder}
+            aria-label={couponPlaceholder}
+            aria-invalid={error ? true : undefined}
+            {...partAttrs('coupon-input', { invalid: Boolean(error) })}
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: '1px solid var(--basket-summary-border, #d1d5db)',
+              background: 'transparent',
+              color: 'inherit',
+              padding: '8px 12px',
+              outline: 'none'
+            }}
+          />
+          <button
+            type="submit"
+            disabled={isApplying}
+            {...partAttrs('coupon-button', {
+              disabled: isApplying,
+              loading: isApplying
+            })}
+            style={{
+              border: '1px solid currentColor',
+              background: 'transparent',
+              color: 'inherit',
+              cursor: 'pointer',
+              padding: '8px 16px'
+            }}
+          >
+            {couponLabel}
+          </button>
+        </form>
+      )}
+      {error && (
+        <div
+          data-basket-summary-error=""
+          role="alert"
+          {...partAttrs('coupon-error', { invalid: true })}
+          style={{ marginTop: '6px' }}
+        >
+          {error}
+        </div>
+      )}
+    </>
+  );
+
+  const couponPanel = showCoupon ? (
+    <div
+      data-basket-summary-coupon=""
+      data-basket-summary-coupon-state={
+        couponPresentation === 'collapsible'
+          ? couponOpen
+            ? 'open'
+            : 'closed'
+          : 'inline'
+      }
+      {...partAttrs('coupon', {
+        open: couponPresentation === 'collapsible' && couponOpen
+      })}
+    >
+      {couponPresentation === 'collapsible' && (
+        <button
+          type="button"
+          aria-expanded={couponOpen}
+          onClick={() => setCouponOpen((value) => !value)}
+          {...partAttrs('coupon-toggle', { open: couponOpen })}
+          style={panelToggleStyle}
+        >
+          <span
+            {...partAttrs('coupon-toggle-icon', { open: couponOpen })}
+            style={{ display: 'inline-flex' }}
+          >
+            <ToggleArrow open={couponOpen} />
+          </span>
+          <span>{couponToggleLabel}</span>
+        </button>
+      )}
+      {(couponPresentation !== 'collapsible' || couponOpen) && couponBody}
+    </div>
+  ) : null;
+
+  const walletOffers = readOffers(offersData);
+  const listedOffers =
+    offersLimit > 0 ? walletOffers.slice(0, offersLimit) : walletOffers;
+  // The designer gets one sample card to style when the wallet is empty or
+  // the author is not signed in inside the canvas.
+  const offers: BasketOfferLike[] =
+    isDesigner && listedOffers.length === 0
+      ? [
+          {
+            pk: 0,
+            label: 'Sample coupon',
+            amount: '100',
+            voucher_code: 'SAMPLE',
+            end_datetime: new Date().toISOString()
+          }
+        ]
+      : listedOffers;
+
+  const describeOffer = (offer: BasketOfferLike) => {
+    const percentage =
+      offer.percentage !== undefined &&
+      offer.percentage !== null &&
+      String(offer.percentage).trim()
+        ? `${offerPercentagePrefix}${offer.percentage}`
+        : '';
+    const amount =
+      (parseAmount(offer.amount) ?? 0) > 0 ? formatAmount(offer.amount) : '';
+
+    return {
+      date: formatDate(offer.end_datetime, locale),
+      label: offer.label || '',
+      value: percentage || amount
+    };
+  };
+
+  const offersPanel =
+    showOffers && offers.length > 0 ? (
+      <div
+        data-basket-summary-offers=""
+        {...partAttrs('offers')}
+        style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+      >
+        {offers.map((offer, index) => {
+          const voucher = String(offer.voucher_code ?? '').trim();
+          const applied = Boolean(voucher) && totals.voucher === voucher;
+          const busy =
+            (pendingOffer !== '' && pendingOffer === voucher) ||
+            ((isApplying || isRemoving) && pendingOffer === voucher);
+          const { date, label, value } = describeOffer(offer);
+
+          return (
+            <div
+              key={String(offer.pk ?? voucher ?? index)}
+              data-basket-summary-offer=""
+              data-basket-summary-offer-state={applied ? 'applied' : 'available'}
+              {...partAttrs('offer', { selected: applied })}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                padding: '12px',
+                background: 'var(--basket-summary-offer-bg, #f3efe6)'
+              }}
+            >
+              {date && <span {...partAttrs('offer-date')}>{date}</span>}
+              {(label || value) && (
+                <span
+                  {...partAttrs('offer-body')}
+                  style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}
+                >
+                  {label && <span {...partAttrs('offer-label')}>{label}</span>}
+                  {value && <span {...partAttrs('offer-value')}>{value}</span>}
+                </span>
+              )}
+              {voucher && (
+                <button
+                  type="button"
+                  disabled={busy || isDesigner}
+                  onClick={() => applyOffer(offer)}
+                  {...partAttrs('offer-apply', {
+                    selected: applied,
+                    disabled: busy || isDesigner,
+                    loading: busy
+                  })}
+                  style={{
+                    ...panelToggleStyle,
+                    width: 'auto',
+                    alignSelf: 'flex-start'
+                  }}
+                >
+                  <span
+                    {...partAttrs('offer-apply-icon', { selected: applied })}
+                    style={{ display: 'inline-flex' }}
+                  >
+                    <ToggleArrow open={false} />
+                  </span>
+                  <span>{applied ? offerRemoveLabel : offerApplyLabel}</span>
+                </button>
+              )}
+            </div>
+          );
+        })}
+        {offersError && (
+          <div role="alert" {...partAttrs('offers-error', { invalid: true })}>
+            {offersError}
+          </div>
+        )}
+      </div>
+    ) : null;
+
+  const giftCardPanel = showGiftCard ? (
+    <div
+      data-basket-summary-gift-card=""
+      data-basket-summary-gift-card-state={giftCardOpen ? 'open' : 'closed'}
+      {...partAttrs('gift-card', { open: giftCardOpen })}
+    >
+      <button
+        type="button"
+        aria-expanded={giftCardOpen}
+        onClick={() => setGiftCardOpen((value) => !value)}
+        {...partAttrs('gift-card-toggle', { open: giftCardOpen })}
+        style={panelToggleStyle}
+      >
+        <span
+          {...partAttrs('gift-card-toggle-icon', { open: giftCardOpen })}
+          style={{ display: 'inline-flex' }}
+        >
+          <ToggleArrow open={giftCardOpen} />
+        </span>
+        <span>{giftCardToggleLabel}</span>
+      </button>
+      {giftCardOpen && (
+        <form
+          onSubmit={submitGiftCard}
+          {...partAttrs('gift-card-form')}
+          style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+        >
+          <div
+            {...partAttrs('gift-card-fields')}
+            style={{ display: 'flex', gap: '8px' }}
+          >
+            <input
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              value={giftCardNumber}
+              onChange={(event) => setGiftCardNumber(event.target.value)}
+              placeholder={giftCardNumberPlaceholder}
+              aria-label={giftCardNumberPlaceholder}
+              aria-invalid={giftCardFailure ? true : undefined}
+              {...partAttrs('gift-card-input', {
+                invalid: Boolean(giftCardFailure)
+              })}
+              style={fieldStyle}
+            />
+            <input
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              value={giftCardCvv}
+              onChange={(event) => setGiftCardCvv(event.target.value)}
+              placeholder={giftCardCvvPlaceholder}
+              aria-label={giftCardCvvPlaceholder}
+              {...partAttrs('gift-card-cvv')}
+              style={{ ...fieldStyle, flex: '0 0 30%' }}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={isApplying}
+            {...partAttrs('gift-card-button', {
+              disabled: isApplying,
+              loading: isApplying
+            })}
+            style={{
+              alignSelf: 'flex-start',
+              border: '1px solid currentColor',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              cursor: 'pointer',
+              padding: '8px 16px'
+            }}
+          >
+            {giftCardApplyLabel}
+          </button>
+          {giftCardFailure && (
+            <div
+              role="alert"
+              {...partAttrs('gift-card-error', { invalid: true })}
+            >
+              {giftCardFailure}
+            </div>
+          )}
+        </form>
+      )}
+    </div>
+  ) : null;
+
   const rowStyle: React.CSSProperties = {
     display: 'flex',
     justifyContent: 'space-between',
@@ -295,85 +905,9 @@ const BasketSummaryBlock = ({
           )}
       </div>
 
-      {showCoupon && (
-        <div data-basket-summary-coupon="" {...partAttrs('coupon')}>
-          {totals.voucher ? (
-            <div
-              {...partAttrs('coupon-applied', { selected: true })}
-              style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
-            >
-              <span {...partAttrs('coupon-code')}>{totals.voucher}</span>
-              <button
-                type="button"
-                disabled={isRemoving || isDesigner}
-                onClick={dropVoucher}
-                {...partAttrs('coupon-remove', {
-                  disabled: isRemoving || isDesigner,
-                  loading: isRemoving
-                })}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  color: 'inherit',
-                  textDecoration: 'underline',
-                  padding: 0
-                }}
-              >
-                {couponRemoveLabel}
-              </button>
-            </div>
-          ) : (
-            <form onSubmit={submitVoucher} style={{ display: 'flex', gap: '8px' }}>
-              <input
-                type="text"
-                value={code}
-                onChange={(event) => setCode(event.target.value)}
-                placeholder={couponPlaceholder}
-                aria-label={couponPlaceholder}
-                aria-invalid={error ? true : undefined}
-                {...partAttrs('coupon-input', { invalid: Boolean(error) })}
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  border: '1px solid var(--basket-summary-border, #d1d5db)',
-                  background: 'transparent',
-                  color: 'inherit',
-                  padding: '8px 12px',
-                  outline: 'none'
-                }}
-              />
-              <button
-                type="submit"
-                disabled={isApplying}
-                {...partAttrs('coupon-button', {
-                  disabled: isApplying,
-                  loading: isApplying
-                })}
-                style={{
-                  border: '1px solid currentColor',
-                  background: 'transparent',
-                  color: 'inherit',
-                  cursor: 'pointer',
-                  padding: '8px 16px'
-                }}
-              >
-                {couponLabel}
-              </button>
-            </form>
-          )}
-          {error && (
-            <div
-              data-basket-summary-error=""
-              role="alert"
-              {...partAttrs('coupon-error', { invalid: true })}
-              style={{ marginTop: '6px' }}
-            >
-              {error}
-            </div>
-          )}
-        </div>
-      )}
+      {couponPlacement === 'before-cta' && offersPanel}
+      {couponPlacement === 'before-cta' && couponPanel}
+      {couponPlacement === 'before-cta' && giftCardPanel}
 
       {showCheckout && (
         <NextLink
@@ -397,6 +931,16 @@ const BasketSummaryBlock = ({
           {checkoutLabel}
         </NextLink>
       )}
+
+      {showCheckout && ctaNote && (
+        <div data-basket-summary-cta-note="" {...partAttrs('cta-note')}>
+          {ctaNote}
+        </div>
+      )}
+
+      {couponPlacement === 'after-cta' && offersPanel}
+      {couponPlacement === 'after-cta' && couponPanel}
+      {couponPlacement === 'after-cta' && giftCardPanel}
     </div>
   );
 };