@tribe-nest/forge 3.65.0 → 3.69.0

package/src/ui/styled/CheckoutLinkPayment.tsx

@@ -0,0 +1,303 @@
+import type { CSSProperties } 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 { CheckoutLinkView } from "../../data/queries/useCheckoutLink";
+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 total = fmt(view.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} />
+
+      <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}
+            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();
+  return (
+    <div
+      data-testid="checkout-link-summary"
+      style={{
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        padding: 20,
+        background: t.surface,
+      }}
+    >
+      <div style={{ fontSize: 18, fontWeight: 700 }} data-testid="checkout-link-item">
+        {view.item?.title}
+      </div>
+      {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>
+      )}
+      <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 / 100, view.currency)}
+        </span>
+      </div>
+    </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/CookieConsent.tsx

@@ -4,6 +4,7 @@ import { useForgeT } from "../../i18n";
 import { useCookieConsent } from "../headless/consent/useCookieConsent";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
+import { useBrandLegalUrls } from "../../data/queries/useWebsite";
 
 export interface CookieConsentProps {
   /** Heading text. Defaults to Forge's own translated heading. */
@@ -17,19 +18,20 @@ export interface CookieConsentProps {
   /** Link to the site's own privacy policy (rendered after the description). */
   privacyPolicyHref?: string;
   /**
-   * Fall back to TribeNest's hosted privacy policy
-   * (https://www.tribenest.co/privacy) when the site doesn't have its own.
+   * Fall back to the brand's hosted privacy policy when the site doesn't have
+   * its own: TribeNest's, or Mandatera's for a law firm, from `site-config`
+   * (https://www.tribenest.co/privacy when the backend sends none).
    * Ignored if `privacyPolicyHref` is set. Opens in a new tab.
    */
   useTribeNestPrivacy?: boolean;
   /**
    * Controlled visibility. Leave undefined for the default behaviour (show once
    * until the visitor decides). Set `true` to force it open again so a visitor
-   * can change their choice — wire a "Cookie settings" link to a boolean state
+   * can change their choice: wire a "Cookie settings" link to a boolean state
    * and pass it here (see the site-starter footer for the pattern).
    */
   open?: boolean;
-  /** Called after the visitor makes a choice or dismisses — use it to reset your
+  /** Called after the visitor makes a choice or dismisses. Use it to reset your
    * controlled `open` state back to false. */
   onClose?: () => void;
   /** Extra class on the outer wrapper. */
@@ -42,8 +44,8 @@ const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
 
 /**
  * Drop-in cookie-consent banner. Shows once until the visitor decides, writes to
- * the shared consent store, and — because `<ForgeAnalytics />` reads the same
- * store — actually gates first-party analytics (performance) and the Meta Pixel
+ * the shared consent store, and (because `<ForgeAnalytics />` reads the same
+ * store) actually gates first-party analytics (performance) and the Meta Pixel
  * (marketing). Themed via Forge tokens. Drop it into the site root:
  * `<CookieConsent privacyPolicyHref="/privacy" />`.
  */
@@ -59,8 +61,10 @@ export function CookieConsent({
 }: CookieConsentProps) {
   const t = useThemeTokens();
   const tr = useForgeT();
-  const privacyHref = privacyPolicyHref ?? (useTribeNestPrivacy ? TRIBENEST_PRIVACY_URL : undefined);
-  // External TribeNest link opens in a new tab; a same-origin custom page stays.
+  const brandLegal = useBrandLegalUrls();
+  const privacyHref =
+    privacyPolicyHref ?? (useTribeNestPrivacy ? (brandLegal?.privacy ?? TRIBENEST_PRIVACY_URL) : undefined);
+  // The brand's hosted policy opens in a new tab; a same-origin custom page stays.
   const privacyExternal = !privacyPolicyHref && useTribeNestPrivacy;
   const { ready, decided, consent, acceptAll, rejectAll, save } = useCookieConsent();
   const [draft, setDraft] = useState<Draft>({
@@ -121,7 +125,7 @@ export function CookieConsent({
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, fontFamily: t.headingFontFamily }}>
             {title ?? tr("forge.cookie_consent.title")}
           </h2>
-          {/* Close is only meaningful once a choice exists (reopened panel) —
+          {/* Close is only meaningful once a choice exists (reopened panel);
               on first run the visitor must pick an option. */}
           {decided && (
             <button

package/src/ui/styled/MusicLinkPage.tsx

@@ -9,6 +9,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { PageActions } from "./PageActions";
 import { DEFAULT_MUSIC_LINK_STYLE, MusicLinkLayout, type LayoutParts, type MusicLinkStyle } from "./musicLinkStyles";
 import { useCookieConsent } from "../headless/consent/useCookieConsent";
+import { useBrandLegalUrls } from "../../data/queries/useWebsite";
 
 /**
  * How each streaming service is presented.
@@ -57,7 +58,7 @@ const SERVICES: Record<string, { label: string; color: string; action?: string }
  */
 const OVERLAY_Z_INDEX = 60;
 
-/** TribeNest's hosted policy, matching what `CookieConsent` falls back to. */
+/** TribeNest's hosted policy, the last fallback, matching `CookieConsent`. */
 const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
 
 const serviceMeta = (platform: string) => SERVICES[platform] ?? { label: platform, color: "#666666", action: "Open" };
@@ -69,7 +70,8 @@ export interface MusicLinkPageProps {
   initialLink?: IMusicLink | null;
   /** Heading above the service list. */
   listHeading?: string;
-  /** The site's own privacy policy. Falls back to TribeNest's hosted one. */
+  /** The site's own privacy policy. Falls back to the brand's hosted one
+   * (TribeNest's, or Mandatera's for a law firm) from `site-config`. */
   privacyHref?: string;
   /** The "Powered by TribeNest" credit. */
   showPoweredBy?: boolean;
@@ -375,7 +377,8 @@ function SmartLinkFooter({
   showPoweredBy: boolean;
 }) {
   const { reopen } = useCookieConsent();
-  const href = privacyHref ?? TRIBENEST_PRIVACY_URL;
+  const brandLegal = useBrandLegalUrls();
+  const href = privacyHref ?? brandLegal?.privacy ?? TRIBENEST_PRIVACY_URL;
   const external = !privacyHref;
 
   const linkStyle: CSSProperties = {

package/src/ui/styled/_tests/CheckoutLinkPayment.spec.tsx

@@ -0,0 +1,231 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { CheckoutLinkView } from "../../../data/queries/useCheckoutLink";
+
+/**
+ * The hosted pay page for a checkout link (`/i/checkout/pay/<token>`).
+ *
+ * `useCheckoutLinkPayment` is stubbed at the module boundary: the server
+ * decides everything (open, closed, paid too late); what can only go wrong
+ * here is the page drawing the wrong state. Each state is a different fact
+ * the buyer acts on: pay now, it is already paid, the hold ended, it was
+ * withdrawn, or a refund is coming.
+ *
+ * Rendered through `react-dom/server`, so no DOM and no effects.
+ */
+
+type Page = ReturnType<typeof import("../../headless/checkoutLink/useCheckoutLinkPayment").useCheckoutLinkPayment>;
+const state = vi.hoisted(() => ({ current: null as unknown }));
+
+vi.mock("../../headless/checkoutLink/useCheckoutLinkPayment", () => ({
+  useCheckoutLinkPayment: () => state.current,
+}));
+
+const { CheckoutLinkPayment } = await import("../CheckoutLinkPayment");
+
+const view = (overrides: Partial<CheckoutLinkView> = {}): CheckoutLinkView => ({
+  status: "open",
+  needsRefund: false,
+  item: { type: "event_ticket", title: "Spring Show: General" },
+  quantity: 2,
+  unitPriceCents: 2500,
+  totalCents: 5000,
+  currency: "USD",
+  expiresAt: new Date(Date.now() + 20 * 60_000).toISOString(),
+  ...overrides,
+});
+
+const page = (overrides: Record<string, unknown> = {}) =>
+  ({
+    link: { isLoading: false, error: null, data: view() },
+    finalize: { isLoading: false, error: null, data: undefined },
+    returnUrl: "https://shop.test/i/checkout/pay/tok?finalise=1",
+    pay: async () => {},
+    isStarting: false,
+    clientSecret: undefined,
+    isPaystack: false,
+    canOpenPaystack: false,
+    openPaystackCheckout: async () => "unavailable",
+    refusal: null,
+    holdExpiresAt: view().expiresAt,
+    ...overrides,
+  }) as unknown as Page;
+
+function render(current: Page, props: { returning?: boolean } = {}): string {
+  state.current = current;
+  return renderToStaticMarkup(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD" } as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <CheckoutLinkPayment token="tok" formatAmount={(n) => `$${n.toFixed(2)}`} {...props} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("CheckoutLinkPayment", () => {
+  it("an open link shows the item, the quantity, the price and a Pay button for the total", () => {
+    const html = render(page());
+    expect(html).toContain('data-state="open"');
+    expect(html).toContain("Held for you");
+    expect(html).toContain("Spring Show: General");
+    expect(html).toContain("Quantity: 2");
+    expect(html).toContain("$25.00 each");
+    expect(html).toContain("$50.00");
+    expect(html).toContain('data-testid="checkout-link-pay"');
+    expect(html).toContain("Pay $50.00");
+  });
+
+  it("a refused Pay shows the server's own words", () => {
+    const html = render(
+      page({ refusal: { message: "These tickets are no longer held for you.", code: "INVENTORY_HOLD_EXPIRED", status: null } }),
+    );
+    expect(html).toContain('data-testid="checkout-link-refusal"');
+    expect(html).toContain("These tickets are no longer held for you.");
+  });
+
+  it.each([
+    [{ status: "paid" as const }, "Payment received", false],
+    [{ status: "expired" as const }, "This reservation has ended", true],
+    [{ status: "cancelled" as const }, "This link is no longer available", true],
+    [{ status: "expired" as const, needsRefund: true }, "Your payment will be refunded", true],
+  ])("a closed link (%o) says so, and offers the store unless it was paid", (overrides, title, offersStore) => {
+    const html = render(page({ link: { isLoading: false, error: null, data: view(overrides) } }));
+    expect(html).toContain(title);
+    expect(html).not.toContain('data-testid="checkout-link-pay"');
+    expect(html.includes('data-testid="checkout-link-store"')).toBe(offersStore);
+  });
+
+  describe("a booking", () => {
+    const START = "2026-11-03T15:00:00.000Z";
+    const booking = (overrides: Partial<CheckoutLinkView> = {}) =>
+      view({
+        item: { type: "booking", title: "Initial consultation" },
+        quantity: 1,
+        unitPriceCents: 15000,
+        totalCents: 15000,
+        expiresAt: "2026-11-01T12:30:00.000Z",
+        booking: {
+          sessions: [{ startsAt: START, endsAt: "2026-11-03T16:00:00.000Z" }],
+          timezone: "America/New_York",
+          servicePath: "/i/coaching/initial-consultation",
+        },
+        ...overrides,
+      });
+    // What the page must print: the buyer's own clock, the zone named.
+    const local = (iso: string) =>
+      new Intl.DateTimeFormat(undefined, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZoneName: "short",
+      }).format(new Date(iso));
+
+    it("shows the service, the session in the reader's own zone, until when it is held, and the price, with no quantity", () => {
+      const html = render(page({ link: { isLoading: false, error: null, data: booking() } }));
+      expect(html).toContain('data-state="open"');
+      expect(html).toContain("Initial consultation");
+      expect(html).toContain('data-testid="checkout-link-session"');
+      expect(html).toContain(local(START));
+      expect(html).toContain(`Held for you until ${local("2026-11-01T12:30:00.000Z")}`);
+      expect(html).toContain("Pay $150.00");
+      expect(html).not.toContain('data-testid="checkout-link-quantity"');
+    });
+
+    it("lists every session of a package", () => {
+      const second = "2026-11-10T15:00:00.000Z";
+      const html = render(
+        page({
+          link: {
+            isLoading: false,
+            error: null,
+            data: booking({
+              booking: {
+                sessions: [
+                  { startsAt: START, endsAt: "2026-11-03T16:00:00.000Z" },
+                  { startsAt: second, endsAt: "2026-11-10T16:00:00.000Z" },
+                ],
+                timezone: "UTC",
+                servicePath: null,
+              },
+            }),
+          },
+        }),
+      );
+      expect(html.split('data-testid="checkout-link-session"')).toHaveLength(3);
+      expect(html).toContain(local(second));
+    });
+
+    it("a time that was taken while unpaid: the refusal, no Pay button, and a way to pick another time", () => {
+      const html = render(
+        page({
+          link: { isLoading: false, error: null, data: booking() },
+          refusal: {
+            message: "Your hold on this time expired and it is no longer available. Please pick another time",
+            code: "INVENTORY_HOLD_EXPIRED",
+            status: null,
+          },
+        }),
+      );
+      expect(html).toContain('data-testid="checkout-link-refusal"');
+      expect(html).toContain('data-testid="checkout-link-other-times"');
+      expect(html).toContain("Pick another time");
+      expect(html).not.toContain('data-testid="checkout-link-pay"');
+    });
+
+    it("an ended booking link offers another time instead of the store", () => {
+      const html = render(page({ link: { isLoading: false, error: null, data: booking({ status: "expired" }) } }));
+      expect(html).toContain("This reservation has ended");
+      expect(html).toContain('data-testid="checkout-link-other-times"');
+      expect(html).not.toContain('data-testid="checkout-link-store"');
+      expect(html).not.toContain('data-testid="checkout-link-held-until"');
+    });
+  });
+
+  it("an unknown link says it is not valid", () => {
+    const html = render(page({ link: { isLoading: false, error: new Error("404"), data: undefined } }));
+    expect(html).toContain('data-state="not-found"');
+    expect(html).toContain("Link not found");
+  });
+
+  it("the return leg: paid shows the confirmation, unpaid offers another try, too late says a refund is coming", () => {
+    const paid = render(
+      page({ finalize: { isLoading: false, error: null, data: { outcome: "fulfilled", link: view({ status: "paid" }) } } }),
+      { returning: true },
+    );
+    expect(paid).toContain('data-state="paid"');
+    expect(paid).toContain("Payment received");
+    expect(paid).toContain("Spring Show: General");
+
+    const unpaid = render(
+      page({ finalize: { isLoading: false, error: null, data: { outcome: "unpaid", link: view() } } }),
+      { returning: true },
+    );
+    expect(unpaid).toContain('data-state="unpaid"');
+    expect(unpaid).toContain("Try again");
+
+    const late = render(
+      page({
+        finalize: {
+          isLoading: false,
+          error: null,
+          data: { outcome: "needs_refund", link: view({ status: "expired", needsRefund: true }) },
+        },
+      }),
+      { returning: true },
+    );
+    expect(late).toContain('data-state="needs-refund"');
+    expect(late).toContain("Your payment will be refunded");
+  });
+});