@tribe-nest/forge 3.67.0 → 3.74.0

package/src/ui/styled/CheckoutLinkPayment.tsx

@@ -0,0 +1,606 @@
+import { useState, type CSSProperties, type FormEvent } from "react";
+import { useForgeT } from "../../i18n";
+import { useCheckoutLinkPayment } from "../headless/checkoutLink/useCheckoutLinkPayment";
+import { useInventoryHold } from "../headless/checkout/useInventoryHold";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import type { CheckoutLinkAddress, CheckoutLinkView } from "../../data/queries/useCheckoutLink";
+import { useShippingCountries, useShippingRates, type ShippingGroup, type ShippingRate } from "../../data/queries/useShipping";
+import type { CreateOrderShippingRate } from "../../data/queries/useOrders";
+import { ShippingRateSelector } from "./ShippingRateSelector";
+import { Button } from "./Button";
+import { HoldNotice } from "./HoldNotice";
+import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
+
+export interface CheckoutLinkPaymentProps {
+  /** The token from the link (`/i/checkout/pay/<token>`). */
+  token?: string | null;
+  /**
+   * True when the payment provider has just sent the buyer back (`?finalise=1`
+   * or Stripe's `redirect_status`): the page settles the link instead of
+   * offering to pay.
+   */
+  returning?: boolean;
+  /** Where "browse the store" goes when the link can no longer be paid. Default `/i/store`. */
+  storePath?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number, currencyCode?: string) => string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The hosted pay page for a checkout link (`/i/checkout/pay/<token>`).
+ *
+ * A business (or its agent) held an item for this person and sent them here.
+ * The page shows exactly what is held, at what price and until when, and
+ * continues to the normal payment step. It does not build a checkout: the
+ * checkout already exists on the server, and the `<Checkout>` drop-in always
+ * makes a new one, which is why this is its own component.
+ *
+ * Pressing Pay asks the server first (the link still open, the hold still
+ * there or taken again); a refusal is shown in the server's own words, before
+ * any card form exists. A paid, expired or cancelled link says which, with a
+ * way to the store.
+ */
+export function CheckoutLinkPayment({
+  token,
+  returning = false,
+  storePath = "/i/store",
+  formatAmount,
+  className,
+  style,
+}: CheckoutLinkPaymentProps) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const renderPayment = usePaymentRenderer();
+  const page = useCheckoutLinkPayment(token, { returning });
+  const hold = useInventoryHold(page.holdExpiresAt);
+
+  const shell: CSSProperties = {
+    maxWidth: 560,
+    margin: "0 auto",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    ...style,
+  };
+  const heading: CSSProperties = { fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily, marginBottom: 8 };
+  const muted: CSSProperties = { color: t.muted, fontSize: 15, lineHeight: 1.6 };
+
+  const toStore = (
+    <div style={{ marginTop: 24 }}>
+      <Button onClick={() => go(storePath)} data-testid="checkout-link-store">
+        {tr("forge.checkout_link_payment.browse_store")}
+      </Button>
+    </div>
+  );
+  // A booking whose time is gone: the way on is another time of the same service.
+  const otherTimes = (path: string | null | undefined) =>
+    path ? (
+      <div style={{ marginTop: 24 }}>
+        <Button onClick={() => go(path)} data-testid="checkout-link-other-times">
+          {tr("forge.checkout_link_payment.other_times")}
+        </Button>
+      </div>
+    ) : (
+      toStore
+    );
+
+  // ── The return leg: settle, then say what is true ────────────────────────
+  if (returning) {
+    if (page.finalize.isLoading) return <Loading fullPage />;
+    const outcome = page.finalize.data?.outcome;
+    if (page.finalize.error || !page.finalize.data) {
+      return (
+        <div className={className} style={shell} data-testid="checkout-link-page" data-state="not-found">
+          <h1 style={heading}>{tr("forge.checkout_link_payment.not_found_title")}</h1>
+          <p style={muted}>{tr("forge.checkout_link_payment.not_found_body")}</p>
+          {toStore}
+        </div>
+      );
+    }
+    if (outcome === "needs_refund" || page.finalize.data.link.needsRefund) {
+      return (
+        <div className={className} style={shell} data-testid="checkout-link-page" data-state="needs-refund">
+          <h1 style={heading}>{tr("forge.checkout_link_payment.too_late_title")}</h1>
+          <p style={muted}>{tr("forge.checkout_link_payment.too_late_body")}</p>
+          {toStore}
+        </div>
+      );
+    }
+    if (outcome === "fulfilled" || outcome === "paid") {
+      return (
+        <div className={className} style={shell} data-testid="checkout-link-page" data-state="paid">
+          <h1 style={heading}>{tr("forge.checkout_link_payment.paid_title")}</h1>
+          <Summary view={page.finalize.data.link} fmt={fmt} />
+          <p style={{ ...muted, marginTop: 16 }}>{tr("forge.checkout_link_payment.paid_body")}</p>
+        </div>
+      );
+    }
+    // Not paid (a declined card, a closed window): the link is still open, so
+    // they can try again from the same address.
+    return (
+      <div className={className} style={shell} data-testid="checkout-link-page" data-state="unpaid">
+        <h1 style={heading}>{tr("forge.checkout_link_payment.unpaid_title")}</h1>
+        <p style={muted}>{tr("forge.checkout_link_payment.unpaid_body")}</p>
+        <div style={{ marginTop: 24 }}>
+          <Button onClick={() => go(typeof window !== "undefined" ? window.location.pathname : "")}>
+            {tr("forge.checkout_link_payment.try_again")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // ── The page as the email opens it ───────────────────────────────────────
+  if (page.link.isLoading) return <Loading fullPage />;
+  const view = page.link.data;
+  if (page.link.error || !view) {
+    return (
+      <div className={className} style={shell} data-testid="checkout-link-page" data-state="not-found">
+        <h1 style={heading}>{tr("forge.checkout_link_payment.not_found_title")}</h1>
+        <p style={muted}>{tr("forge.checkout_link_payment.not_found_body")}</p>
+        {toStore}
+      </div>
+    );
+  }
+
+  if (view.status !== "open") {
+    const closed = view.needsRefund
+      ? { title: tr("forge.checkout_link_payment.too_late_title"), body: tr("forge.checkout_link_payment.too_late_body") }
+      : view.status === "paid"
+        ? { title: tr("forge.checkout_link_payment.paid_title"), body: tr("forge.checkout_link_payment.paid_body") }
+        : view.status === "cancelled"
+          ? {
+              title: tr("forge.checkout_link_payment.cancelled_title"),
+              body: tr("forge.checkout_link_payment.cancelled_body"),
+            }
+          : { title: tr("forge.checkout_link_payment.ended_title"), body: tr("forge.checkout_link_payment.ended_body") };
+    return (
+      <div className={className} style={shell} data-testid="checkout-link-page" data-state={view.status}>
+        <h1 style={heading}>{closed.title}</h1>
+        <p style={muted}>{closed.body}</p>
+        {view.status !== "paid" && (view.booking ? otherTimes(view.booking.servicePath) : toStore)}
+      </div>
+    );
+  }
+
+  const shipping = view.shipping ?? null;
+  // Something ships and its address is not in yet: Pay waits for it.
+  const needsAddress = !!shipping?.required && !shipping.set;
+  const totalCents = view.totalCents + (shipping?.set ? (shipping.costCents ?? 0) : 0);
+  const total = fmt(totalCents / 100, view.currency);
+  const refused = page.refusal;
+  const timeTaken = !!refused && refused.code === "INVENTORY_HOLD_EXPIRED" && !!view.booking;
+
+  return (
+    <div className={className} style={shell} data-testid="checkout-link-page" data-state="open">
+      <h1 style={heading}>{tr("forge.checkout_link_payment.title")}</h1>
+      <Summary view={view} fmt={fmt} />
+
+      {shipping?.required && (
+        <ShippingStep
+          view={view}
+          fmt={fmt}
+          canChange={!page.paymentStarted}
+          saving={page.isSavingShipping}
+          error={page.shippingError}
+          onSave={page.saveShipping}
+        />
+      )}
+
+      <div style={{ marginTop: 16 }}>
+        <HoldNotice
+          hold={hold}
+          noun={tr(view.booking ? "forge.checkout_link_payment.hold_noun_booking" : "forge.checkout_link_payment.hold_noun")}
+        />
+      </div>
+
+      {refused && (
+        <p role="alert" data-testid="checkout-link-refusal" style={{ color: t.secondary, fontSize: 14, marginTop: 8 }}>
+          {refused.message || tr("forge.checkout_link_payment.payment_unavailable")}
+        </p>
+      )}
+      {timeTaken && otherTimes(view.booking?.servicePath)}
+
+      <div style={{ marginTop: 16 }}>
+        {page.isPaystack ? (
+          page.canOpenPaystack ? (
+            <PaystackPayButton
+              onPay={page.openPaystackCheckout}
+              label={tr("forge.checkout_link_payment.pay_amount", { amount: total })}
+            />
+          ) : (
+            <Loading label={tr("forge.checkout_link_payment.preparing_payment")} size={22} />
+          )
+        ) : page.clientSecret ? (
+          renderPayment?.({
+            clientSecret: page.clientSecret,
+            returnUrl: page.returnUrl,
+            amount: view.totalCents / 100,
+            currency: view.currency,
+            mode: "redirect",
+          })
+        ) : timeTaken ? null : (
+          <Button
+            fullWidth
+            loading={page.isStarting}
+            disabled={(hold.hasLapsed && !refused) || needsAddress}
+            onClick={() => void page.pay()}
+            data-testid="checkout-link-pay"
+          >
+            {tr("forge.checkout_link_payment.pay_amount", { amount: total })}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Summary({
+  view,
+  fmt,
+}: {
+  view: CheckoutLinkView;
+  fmt: (amount: number, currencyCode?: string) => string;
+}) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const lines = view.items ?? [];
+  return (
+    <div
+      data-testid="checkout-link-summary"
+      style={{
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        padding: 20,
+        background: t.surface,
+      }}
+    >
+      {lines.length > 1 ? (
+        <div data-testid="checkout-link-items">
+          {lines.map((line, index) => (
+            <div
+              key={`${line.title}-${index}`}
+              data-testid="checkout-link-line"
+              style={{ display: "flex", justifyContent: "space-between", gap: 12, marginTop: index ? 8 : 0 }}
+            >
+              <span style={{ fontWeight: 600 }}>
+                {line.quantity > 1 ? `${line.quantity} x ${line.title}` : line.title}
+              </span>
+              <span style={{ color: t.muted, whiteSpace: "nowrap" }}>
+                {fmt((line.unitPriceCents * line.quantity) / 100, view.currency)}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div style={{ fontSize: 18, fontWeight: 700 }} data-testid="checkout-link-item">
+          {view.item?.title}
+        </div>
+      )}
+      {lines.length > 1 ? null : view.booking ? (
+        <div style={{ marginTop: 12, color: t.muted }}>
+          {view.booking.sessions.map((session) => (
+            // The buyer's own clock: the time is shown in the zone of the
+            // device reading it, with the zone named.
+            <div key={session.startsAt} data-testid="checkout-link-session" suppressHydrationWarning>
+              {formatLocalTime(session.startsAt)}
+            </div>
+          ))}
+          {view.status === "open" && (
+            <div style={{ marginTop: 8, fontSize: 14 }} data-testid="checkout-link-held-until" suppressHydrationWarning>
+              {tr("forge.checkout_link_payment.held_until", { time: formatLocalTime(view.expiresAt) })}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, color: t.muted }}>
+          <span data-testid="checkout-link-quantity">
+            {tr("forge.checkout_link_payment.quantity", { quantity: view.quantity })}
+          </span>
+          {view.unitPriceCents !== null && (
+            <span>{tr("forge.checkout_link_payment.each", { price: fmt(view.unitPriceCents / 100, view.currency) })}</span>
+          )}
+        </div>
+      )}
+      {view.shipping?.set && view.shipping.costCents !== null && (
+        <div
+          style={{ display: "flex", justifyContent: "space-between", marginTop: 12, color: t.muted }}
+          data-testid="checkout-link-shipping-cost"
+        >
+          <span>{tr("forge.checkout_link_payment.shipping")}</span>
+          <span>{fmt(view.shipping.costCents / 100, view.currency)}</span>
+        </div>
+      )}
+      <div
+        style={{ display: "flex", justifyContent: "space-between", marginTop: 12, fontSize: 20, fontWeight: 800 }}
+      >
+        <span>{tr("forge.checkout_link_payment.total")}</span>
+        <span data-testid="checkout-link-total" style={{ color: t.primary }}>
+          {fmt(
+            (view.totalCents + (view.shipping?.set ? (view.shipping.costCents ?? 0) : 0)) / 100,
+            view.currency,
+          )}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Where the link's shipped items go (phase 2): the address, then the store's
+ * own shipping rates for it (`/public/orders/shipping-rates`, the same groups
+ * and rate picker the store checkout shows), then saved to the link, which
+ * prices the shipping again on the server. Once saved it reads as a line with
+ * a way to change it, until a payment has been started.
+ */
+function ShippingStep({
+  view,
+  fmt,
+  canChange,
+  saving,
+  error,
+  onSave,
+}: {
+  view: CheckoutLinkView;
+  fmt: (amount: number, currencyCode?: string) => string;
+  canChange: boolean;
+  saving: boolean;
+  error: string | null;
+  onSave: (input: {
+    shippingAddress: CheckoutLinkAddress & { phone?: string };
+    selectedShippingRates: CreateOrderShippingRate[];
+  }) => Promise<boolean>;
+}) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const countries = useShippingCountries();
+  const rates = useShippingRates();
+  const shipping = view.shipping!;
+  const [editing, setEditing] = useState(false);
+  const [address, setAddress] = useState<CheckoutLinkAddress & { phone: string }>({
+    address1: shipping.address?.address1 ?? "",
+    city: shipping.address?.city ?? "",
+    stateCode: shipping.address?.stateCode ?? "",
+    countryCode: shipping.address?.countryCode ?? "",
+    zip: shipping.address?.zip ?? "",
+    phone: "",
+  });
+  const [groups, setGroups] = useState<ShippingGroup[] | null>(null);
+  const [selections, setSelections] = useState<Record<string, CreateOrderShippingRate>>({});
+  const [ratesError, setRatesError] = useState<string | null>(null);
+
+  const box: CSSProperties = {
+    marginTop: 16,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: 20,
+    background: t.surface,
+  };
+  const input: CSSProperties = {
+    width: "100%",
+    padding: "10px 12px",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: "transparent",
+    color: t.text,
+    fontSize: 15,
+  };
+  const label: CSSProperties = { display: "block", fontSize: 14, fontWeight: 600, margin: "12px 0 6px" };
+
+  if (shipping.set && !editing) {
+    const a = shipping.address;
+    return (
+      <div style={box} data-testid="checkout-link-shipping" data-state="set">
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "flex-start" }}>
+          <div>
+            <div style={{ fontWeight: 700 }}>{tr("forge.checkout_link_payment.ship_to")}</div>
+            {a && (
+              <div style={{ color: t.muted, marginTop: 4 }} data-testid="checkout-link-ship-to">
+                {[a.address1, a.city, a.stateCode, a.zip, a.countryCode].filter(Boolean).join(", ")}
+              </div>
+            )}
+          </div>
+          {canChange && (
+            <Button variant="secondary" onClick={() => setEditing(true)} data-testid="checkout-link-change-address">
+              {tr("forge.checkout_link_payment.change_address")}
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const physical = (view.items ?? []).filter((line) => line.physical && line.productId && line.productVariantId);
+  const country = (countries.data ?? []).find((c) => c.code === address.countryCode);
+  const set = (key: keyof typeof address) => (event: { target: { value: string } }) =>
+    setAddress((prev) => ({ ...prev, [key]: event.target.value }));
+
+  const toSelected = (group: ShippingGroup, rate: ShippingRate): CreateOrderShippingRate => ({
+    groupId: group.id,
+    type: group.type,
+    productIds: group.productIds,
+    rateId: rate.rateId,
+    shipmentId: rate.shipmentId,
+    amount: rate.amount,
+    currency: rate.currency,
+    carrier: rate.carrier,
+    service: rate.service,
+  });
+
+  const save = async (picked: Record<string, CreateOrderShippingRate>) => {
+    const ok = await onSave({
+      shippingAddress: { ...address, ...(address.phone ? { phone: address.phone } : {}) },
+      selectedShippingRates: Object.values(picked),
+    });
+    if (ok) {
+      setEditing(false);
+      setGroups(null);
+    }
+  };
+
+  const findRates = async (event: FormEvent) => {
+    event.preventDefault();
+    setRatesError(null);
+    try {
+      const found = await rates.mutateAsync({
+        shippingAddress: address,
+        cartItems: physical.map((line) => ({
+          productId: line.productId!,
+          productVariantId: line.productVariantId!,
+          quantity: line.quantity,
+        })),
+      });
+      const auto: Record<string, CreateOrderShippingRate> = {};
+      for (const group of found.groups) {
+        if (!group.selectable && group.rates.length > 0) auto[group.id] = toSelected(group, group.rates[0]);
+      }
+      setSelections(auto);
+      // Nothing to choose (flat or external rates only): save straight away.
+      if (!found.groups.some((group) => group.selectable)) {
+        await save(auto);
+        return;
+      }
+      setGroups(found.groups);
+    } catch (err) {
+      setRatesError(
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+          tr("forge.checkout_link_payment.shipping_unavailable"),
+      );
+    }
+  };
+
+  const shownError = ratesError ?? (typeof error === "string" ? error || tr("forge.checkout_link_payment.shipping_unavailable") : null);
+
+  return (
+    <div style={box} data-testid="checkout-link-shipping" data-state={groups ? "rates" : "address"}>
+      <div style={{ fontWeight: 700, fontSize: 17 }}>
+        {groups ? tr("forge.checkout.shipping_options_title") : tr("forge.checkout_link_payment.shipping_title")}
+      </div>
+
+      {groups ? (
+        <div style={{ marginTop: 12 }}>
+          <ShippingRateSelector
+            groups={groups}
+            selections={selections}
+            onSelect={(group, rate) => setSelections((prev) => ({ ...prev, [group.id]: toSelected(group, rate) }))}
+            formatCurrency={fmt}
+          />
+          <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
+            <Button variant="secondary" onClick={() => setGroups(null)}>
+              {tr("forge.checkout.back")}
+            </Button>
+            <Button
+              fullWidth
+              loading={saving}
+              disabled={groups.some((group) => group.selectable && !selections[group.id])}
+              onClick={() => void save(selections)}
+              data-testid="checkout-link-use-shipping"
+            >
+              {tr("forge.checkout_link_payment.use_shipping")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={(event) => void findRates(event)}>
+          <label style={label} htmlFor="checkout-link-address1">
+            {tr("forge.checkout.address1_label")}
+          </label>
+          <input id="checkout-link-address1" required style={input} value={address.address1} onChange={set("address1")} />
+          <label style={label} htmlFor="checkout-link-city">
+            {tr("forge.checkout.city_label")}
+          </label>
+          <input id="checkout-link-city" required style={input} value={address.city} onChange={set("city")} />
+          <label style={label} htmlFor="checkout-link-zip">
+            {tr("forge.checkout.zip_label")}
+          </label>
+          <input id="checkout-link-zip" required style={input} value={address.zip} onChange={set("zip")} />
+          <label style={label} htmlFor="checkout-link-country">
+            {tr("forge.checkout.country_label")}
+          </label>
+          <select
+            id="checkout-link-country"
+            required
+            style={input}
+            value={address.countryCode}
+            onChange={(event) => setAddress((prev) => ({ ...prev, countryCode: event.target.value, stateCode: "" }))}
+          >
+            <option value="">{tr("forge.checkout.country_select")}</option>
+            {(countries.data ?? []).map((c) => (
+              <option key={c.code} value={c.code}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          {country?.states && country.states.length > 0 && (
+            <>
+              <label style={label} htmlFor="checkout-link-state">
+                {tr("forge.checkout.state_label")}
+              </label>
+              <select id="checkout-link-state" required style={input} value={address.stateCode} onChange={set("stateCode")}>
+                <option value="">{tr("forge.checkout.state_select")}</option>
+                {country.states.map((state) => (
+                  <option key={state.code} value={state.code}>
+                    {state.name}
+                  </option>
+                ))}
+              </select>
+            </>
+          )}
+          <label style={label} htmlFor="checkout-link-phone">
+            {tr("forge.checkout.phone_label")}
+          </label>
+          <input
+            id="checkout-link-phone"
+            type="tel"
+            style={input}
+            value={address.phone}
+            placeholder={tr("forge.checkout.phone_placeholder")}
+            onChange={set("phone")}
+          />
+          <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
+            {shipping.set && (
+              <Button type="button" variant="secondary" onClick={() => setEditing(false)}>
+                {tr("forge.checkout.back")}
+              </Button>
+            )}
+            <Button type="submit" fullWidth loading={rates.isPending || saving} data-testid="checkout-link-find-shipping">
+              {rates.isPending ? tr("forge.checkout.fetching_rates") : tr("forge.checkout.continue_to_shipping")}
+            </Button>
+          </div>
+        </form>
+      )}
+
+      {shownError && (
+        <p role="alert" data-testid="checkout-link-shipping-error" style={{ color: t.secondary, fontSize: 14, marginTop: 8 }}>
+          {shownError}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function go(path: string) {
+  if (typeof window !== "undefined") window.location.href = path;
+}
+
+/** A moment in the reader's own time zone, with the zone named ("Tuesday 14 October, 10:00 CEST"). */
+function formatLocalTime(iso: string, timeZone?: string): string {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZoneName: "short",
+      ...(timeZone ? { timeZone } : {}),
+    }).format(new Date(iso));
+  } catch {
+    return new Date(iso).toISOString();
+  }
+}

package/src/ui/styled/EmailListForm.tsx

@@ -1,4 +1,5 @@
 import type { CountryCode } from "libphonenumber-js";
+import type { ConsentChannel } from "../../types/models";
 import { useEmailListForm } from "../headless/forms/useEmailListForm";
 import { PhoneInput } from "./PhoneInput";
 import { useForgeT } from "../../i18n";
@@ -12,6 +13,12 @@ export interface EmailListFormProps {
   includePhoneNumber?: boolean;
   /** Seeds the phone country select. Undefined lets the visitor choose. */
   defaultCountry?: CountryCode;
+  /**
+   * Consent boxes to offer, one per channel: `ai_call` (calls, including by an
+   * AI voice agent), `sms`, `whatsapp`. Each is unticked and optional, worded
+   * with the business's name in the site's language. Adds a phone field.
+   */
+  consentChannels?: ConsentChannel[];
   title?: string;
   description?: string;
   buttonText?: string;
@@ -25,6 +32,7 @@ export function EmailListForm({
   includeName,
   includePhoneNumber,
   defaultCountry,
+  consentChannels,
   title,
   description,
   buttonText,
@@ -32,7 +40,14 @@ export function EmailListForm({
 }: EmailListFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber, defaultCountry });
+  const f = useEmailListForm({
+    emailListId,
+    leadMagnetId,
+    includeName,
+    includePhoneNumber,
+    defaultCountry,
+    consentChannels,
+  });
 
   // Defaults resolve here rather than in the signature so they can be
   // translated. `??` keeps a caller-supplied "" falsy exactly as before.
@@ -76,7 +91,18 @@ export function EmailListForm({
         onChange={(e) => f.setEmail(e.target.value)}
         style={inputStyle}
       />
-      {includePhoneNumber && <PhoneInput controller={f.phone} />}
+      {f.showPhone && <PhoneInput controller={f.phone} />}
+      {f.consentBoxes.map((box) => (
+        <label key={box.channel} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13, lineHeight: 1.5 }}>
+          <input
+            type="checkbox"
+            checked={box.checked}
+            onChange={(e) => f.setConsent(box.channel, e.target.checked)}
+            style={{ marginTop: 3, flexShrink: 0 }}
+          />
+          <span>{box.text}</span>
+        </label>
+      ))}
       {f.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{f.error}</p>}
       <button
         onClick={f.submit}