@tribe-nest/forge 3.14.0 → 3.19.0

package/src/ui/headless/event/useEventCheckout.ts

@@ -5,6 +5,7 @@ import { useEvent, useCreateEventOrder } from "../../../data/queries/useEvents";
 import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
 import { useCouponField } from "../coupon/useCouponField";
 import { computeBookingFeeAmount } from "../../format/bookingFee";
+import { isPayWhatYouWant, pwywDefaultAmount, resolveUnitPrice, ticketSubtotals } from "../../format/pwyw";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
 
@@ -42,6 +43,12 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
 
   const [step, setStep] = useState<EventCheckoutStep>("tickets");
   const [selectedTickets, setSelectedTickets] = useState<Record<string, number>>({});
+  /**
+   * ticketId → the amount the buyer chose, per unit, on a pay-what-you-want
+   * tier. Absent means "hasn't touched the box", which resolves to the tier's
+   * suggested amount (or its floor) rather than to zero.
+   */
+  const [pwywAmounts, setPwywAmounts] = useState<Record<string, number>>({});
   const [firstName, setFirstName] = useState(user?.firstName ?? "");
   const [lastName, setLastName] = useState(user?.lastName ?? "");
   const [email, setEmail] = useState(user?.email ?? "");
@@ -70,10 +77,39 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
    */
   const coupon = useCouponField();
 
-  const totalAmount = useMemo(() => {
-    if (!event) return 0;
-    return event.tickets.reduce((sum, t) => sum + t.price * (selectedTickets[t.id] ?? 0), 0);
-  }, [event, selectedTickets]);
+  /**
+   * The buyer's effective per-unit choice for every selected PWYW tier —
+   * their typed figure where they have one, the tier's suggested amount where
+   * they have not. This is what gets SENT, so an untouched box is not the same
+   * as choosing the minimum: the suggestion is the default offer.
+   */
+  const effectiveAmounts = useMemo(() => {
+    if (!event) return {} as Record<string, number>;
+    const out: Record<string, number> = {};
+    for (const ticket of event.tickets) {
+      if (!isPayWhatYouWant(ticket) || (selectedTickets[ticket.id] ?? 0) <= 0) continue;
+      out[ticket.id] =
+        pwywAmounts[ticket.id] != null
+          ? resolveUnitPrice(ticket, pwywAmounts[ticket.id])
+          : pwywDefaultAmount(ticket);
+    }
+    return out;
+  }, [event, selectedTickets, pwywAmounts]);
+
+  /**
+   * `paid` is what the buyer owes for tickets; `floor` is the same cart valued
+   * at every tier's minimum. Identical on any cart without a PWYW tier.
+   */
+  const subtotals = useMemo(() => {
+    if (!event) return { paid: 0, floor: 0 };
+    return ticketSubtotals({
+      tickets: event.tickets,
+      quantities: selectedTickets,
+      amounts: effectiveAmounts,
+    });
+  }, [event, selectedTickets, effectiveAmounts]);
+
+  const totalAmount = subtotals.paid;
 
   const ticketCount = useMemo(
     () => Object.values(selectedTickets).reduce((a, b) => a + b, 0),
@@ -100,8 +136,13 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
    * honest while the buyer is still choosing quantities, which is precisely when
    * the disclosure has to happen.
    */
+  //
+  // Estimated off the FLOOR subtotal, never the paid one — the server computes
+  // it that way, so a fan choosing to pay ten times the minimum must not see
+  // (or be quoted) ten times the fee. On a cart with no PWYW tier the two
+  // subtotals are the same number and this is byte-for-byte the old behaviour.
   const bookingFeeAmount =
-    serverFeeAmount ?? computeBookingFeeAmount({ subtotal: totalAmount, fee: bookingFee });
+    serverFeeAmount ?? computeBookingFeeAmount({ subtotal: subtotals.floor, fee: bookingFee });
 
   // Keep only positive quantities in state — a ticket dropped to 0 is removed
   // entirely, so `items` never carries a 0-quantity entry (the orders endpoint
@@ -114,6 +155,26 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       return next;
     });
 
+  /**
+   * The buyer's chosen amount for one PWYW tier, PER UNIT.
+   *
+   * `null` forgets the choice and falls back to the tier's suggested amount —
+   * which is what an emptied input has to mean, since the alternative is
+   * treating a cleared box as a decision to pay zero.
+   *
+   * Deliberately NOT clamped as the buyer types: clamping on every keystroke
+   * makes "1" become the floor the moment it is typed and the buyer can never
+   * reach "15". The clamp is applied when the figure is read
+   * (`effectiveAmounts`), and again by the server, which is the one that counts.
+   */
+  const setTicketAmount = (ticketId: string, amount: number | null) =>
+    setPwywAmounts((prev) => {
+      const next = { ...prev };
+      if (amount != null && Number.isFinite(amount)) next[ticketId] = amount;
+      else delete next[ticketId];
+      return next;
+    });
+
   /**
    * Put this selection in the cart instead of paying for it now — the exit
    * that makes add-ons possible, because the buyer has to be able to leave for
@@ -139,7 +200,20 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       ticketMeta: Object.fromEntries(
         event.tickets
           .filter((t) => (selectedTickets[t.id] ?? 0) > 0)
-          .map((t) => [t.id, { title: t.title, price: t.price }]),
+          // `price` is the per-unit figure the cart displays and the checkout
+          // line carries — so on a PWYW tier it has to be the CHOSEN amount,
+          // not the floor, or the buyer's cart silently forgets what they
+          // picked on the way to an add-on and back. `pwywAmount` travels
+          // beside it because the bundle path sends the two separately: one is
+          // display, one is charged.
+          .map((t) => [
+            t.id,
+            {
+              title: t.title,
+              price: resolveUnitPrice(t, effectiveAmounts[t.id]),
+              ...(isPayWhatYouWant(t) ? { pwywAmount: effectiveAmounts[t.id] } : {}),
+            },
+          ]),
       ),
     });
     return true;
@@ -166,6 +240,9 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     try {
       const data = await createOrder.mutateAsync({
         items: selectedTickets,
+        // Omitted entirely when nothing in the cart is PWYW, so an ordinary
+        // purchase posts the same body it always did.
+        ...(Object.keys(effectiveAmounts).length > 0 ? { amounts: effectiveAmounts } : {}),
         email,
         firstName,
         lastName,
@@ -236,6 +313,14 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     setStep,
     selectedTickets,
     setTicketQty,
+    /**
+     * Raw buyer input per PWYW tier — only the tiers whose box has been touched.
+     * Bind an input to this; read `effectiveAmounts` to know what will be sent.
+     */
+    pwywAmounts,
+    setTicketAmount,
+    /** What each selected PWYW tier will actually be charged, per unit. */
+    effectiveAmounts,
     ticketCount,
     // The server's figure wins the moment there is one: start-payment first,
     // then the order response (which is already net of any discount), and only
@@ -249,6 +334,11 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       flow.result?.totalAmount ?? coupon.quote?.totalAmount ?? totalAmount + bookingFeeAmount,
     /** GROSS ticket total, before any discount OR booking fee. */
     subTotal: coupon.quote?.subTotal ?? totalAmount,
+    /**
+     * The same cart at every tier's MINIMUM. Equal to `subTotal` unless a PWYW
+     * tier is selected; the difference is what the buyer chose to add on top.
+     */
+    floorSubTotal: subtotals.floor,
     /**
      * The resolved fee RULE, for surfaces that quote a price with no cart behind
      * it (an event page's "From $25"). `null` when the artist charges none.

package/src/ui/headless/index.ts

@@ -31,11 +31,22 @@ export {
   type CouponQuoteFn,
 } from "./coupon/useCouponField";
 export { useCourseCheckout, type UseCourseCheckoutOptions, type CourseCheckoutStep } from "./course/useCourseCheckout";
+export {
+  useCourseClassroom,
+  buildCourseAccessGate,
+  buildCourseAccessSecurePrompt,
+  courseSignInHref,
+  type UseCourseClassroomOptions,
+  type CourseAccessGate,
+  type CourseAccessGateKind,
+  type CourseAccessSecurePrompt,
+} from "./course/useCourseClassroom";
 export {
   useCoachingBooking,
   type UseCoachingBookingOptions,
   type CoachingBookingStep,
 } from "./coaching/useCoachingBooking";
+export { useBookingSecret, type BookingSecretLookup } from "./booking/useBookingSecret";
 export {
   useMembershipCheckout,
   type UseMembershipCheckoutOptions,

package/src/ui/index.ts

@@ -54,6 +54,10 @@ export {
 export { MembershipCheckout, type MembershipCheckoutProps } from "./styled/MembershipCheckout";
 export { ForgeStripePayment } from "./payment/ForgeStripePayment";
 export { Cart, type CartProps } from "./styled/Cart";
+// The resolver is exported alongside the component because the Craft themes
+// are a separate rendering stack (Tailwind, not inline styles) and cannot use
+// the component — but the legacy `color`/`size` fallback must not diverge.
+export { CartLineOptions, resolveCartLineOptions } from "./styled/CartLineOptions";
 export { CurrencySwitcher, type CurrencySwitcherProps } from "./styled/CurrencySwitcher";
 export { UserMenu, type UserMenuProps } from "./styled/UserMenu";
 export { EmailListForm, type EmailListFormProps } from "./styled/EmailListForm";
@@ -112,6 +116,7 @@ export {
   CheckSeal,
   WarnSeal,
   Perforation,
+  ConfirmationLostCheckout,
   alpha,
 } from "./styled/Confirmation";
 export { PlayButton, type PlayButtonProps } from "./styled/PlayButton";
@@ -153,6 +158,18 @@ export { PriceDisplay, priceTaxCaption, summarizeTaxQuote, type PriceDisplayProp
 // the styled blocks. Resolution stays on the server (`IEvent.bookingFee`); these
 // only do the arithmetic and the wording.
 export { computeBookingFeeAmount, hasBookingFee, describeBookingFee } from "./format/bookingFee";
+// Pay-what-you-want, for a site rendering its own ticket UI. `price` is the
+// FLOOR on a PWYW tier, so an existing "from $X" is already correct; these only
+// resolve what a buyer's chosen amount costs. The clamp here is UX — the server
+// clamps again and is the one that decides what is charged.
+export {
+  isPayWhatYouWant,
+  pwywMaximum,
+  pwywDefaultAmount,
+  clampChosenAmount,
+  resolveUnitPrice,
+  ticketSubtotals,
+} from "./format/pwyw";
 export { usePricesIncludeTax } from "../data/queries/useWebsite";
 
 // PWA (installable code sites) — SW registration + install/push UX (Tier 2).

package/src/ui/styled/AccountDashboard.tsx

@@ -36,6 +36,7 @@ import { Loading } from "./Loading";
 import { formatCountdown } from "./EventWaitlist";
 import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
+import { CartLineOptions } from "./CartLineOptions";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -924,6 +925,12 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
                     <div key={`${item.productVariantId}-${i}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
                       <span>
                         {item.title} × {item.quantity}
+                        {/* Which version. Two versions of one release carry the
+                            same title, so without this a buyer's own order
+                            history shows what looks like the same thing bought
+                            twice at two prices. Read from the snapshot taken at
+                            the sale, not re-resolved. */}
+                        <CartLineOptions item={item} accent={t.primary} size="small" style={{ marginTop: 2 }} />
                       </span>
                       <span>{formatAmount(item.price * item.quantity, order.currency || currency)}</span>
                     </div>

package/src/ui/styled/Cart.tsx

@@ -6,6 +6,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CartProps {
   /** Custom cart icon (defaults to a shopping bag). */
@@ -220,6 +221,11 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
               {cartItems.map((item) => (
                   <div
                     key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
+                    // Named so a test can assert on the LINE rather than the
+                    // page: the picker behind the drawer renders the same option
+                    // words, so an unscoped match passes whether or not the cart
+                    // shows anything.
+                    data-testid="cart-line"
                     style={{
                       display: "flex",
                       gap: 12,
@@ -257,14 +263,11 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                         {item.title}
                       </a>
                       <div style={{ fontSize: 14, opacity: 0.8 }}>{fmt(item.price)}</div>
-                      {item.color && item.size && (
-                        <div
-                          style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 8, color: t.primary }}
-                        >
-                          <span style={{ width: 14, height: 14, borderRadius: "50%", background: item.color, display: "inline-block" }} />
-                          {item.size}
-                        </div>
-                      )}
+                      {/* Which version — "Format: FLAC". The old block required
+                          BOTH a colour and a size, so a line that was neither
+                          showed nothing at all and two versions of one release
+                          read as duplicates at two prices. */}
+                      <CartLineOptions item={item} accent={t.primary} />
                       {item.isGift && (
                         <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>
                           Gift for {item.recipientName} ({item.recipientEmail})

package/src/ui/styled/CartLineOptions.tsx

@@ -0,0 +1,107 @@
+import type { CSSProperties } from "react";
+
+import type { CartItem } from "../../contexts/CartContext";
+
+/**
+ * Which version a cart line is.
+ *
+ * Every surface that lists what someone is buying renders this, so the answer
+ * to "which one did I pick" is the same in the drawer, on the checkout page and
+ * on the receipt. They drifted before: the drawer and the confirmation each had
+ * their own copy of a colour-swatch-and-size block, and neither could name a
+ * "Format: FLAC" — so a buyer choosing between two versions of one release saw
+ * two identical lines at two prices.
+ *
+ * Renders nothing when there is nothing to say. A product sold one way has no
+ * versions to tell apart, and an empty row of chrome reads as a loading state.
+ */
+export function CartLineOptions({
+  item,
+  accent,
+  size = "normal",
+  style,
+}: {
+  item: Parameters<typeof resolveCartLineOptions>[0];
+  /** The theme's accent, so this sits with the surface rather than on it. */
+  accent: string;
+  size?: "normal" | "small";
+  style?: CSSProperties;
+}) {
+  const options = resolveCartLineOptions(item);
+  if (!options.length) return null;
+
+  const fontSize = size === "small" ? 11 : 12;
+  const dot = size === "small" ? 10 : 12;
+
+  return (
+    <div
+      style={{
+        fontSize,
+        marginTop: 4,
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 8,
+        color: accent,
+        ...style,
+      }}
+    >
+      {options.map((option) => (
+        <span key={`${option.axis}:${option.value}`} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+          {option.swatchHex && (
+            <span
+              aria-hidden
+              style={{
+                width: dot,
+                height: dot,
+                borderRadius: "50%",
+                background: option.swatchHex,
+                display: "inline-block",
+              }}
+            />
+          )}
+          {/* The axis is named, not implied. "L" alone is ambiguous the moment a
+              product has more than one axis, and the creator chose the word. */}
+          <span style={{ opacity: 0.7 }}>{option.axis}{option.value ? ":" : ""}</span>
+          {/* A legacy colour is a bare hex with no name — the swatch says it
+              better than the string "#1a1a1a" does to someone about to pay. */}
+          {option.value && <span>{option.value}</span>}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * A line's options, whether it is a CART line or an ORDER line.
+ *
+ * Both answer the same question — which version is this — under two names. A
+ * cart line carries `options`, chosen a moment ago; an order line carries
+ * `variantOptions`, the snapshot taken when it was sold. Accepting both is what
+ * lets one component serve the drawer, the checkout, the receipt, the buyer's
+ * order history and the admin order page.
+ *
+ * ⚠️ Reading only `options` here TYPE-CHECKS against an order item, because
+ * both fields are optional — and silently renders the legacy fallback for every
+ * order ever placed.
+ *
+ * `color`/`size` last because carts persist in the browser and orders persist
+ * forever: a line saved before either field existed carries nothing else, and
+ * dropping it would blank the very detail this exists to show.
+ */
+export function resolveCartLineOptions(
+  item: Pick<CartItem, "options" | "color" | "size"> & {
+    variantOptions?: { axis: string; value: string; swatchHex?: string | null }[] | null;
+  },
+): { axis: string; value: string; swatchHex?: string | null }[] {
+  if (item.options?.length) return item.options;
+  if (item.variantOptions?.length) return item.variantOptions;
+
+  const legacy: { axis: string; value: string; swatchHex?: string | null }[] = [];
+  // A hex in `color` is a swatch with no name — which is exactly why the column
+  // was replaced. Shown as a swatch alone rather than printing "#1a1a1a" at
+  // someone about to pay.
+  if (item.color) legacy.push({ axis: "Colour", value: "", swatchHex: item.color });
+  if (item.size) legacy.push({ axis: "Size", value: item.size });
+  return legacy;
+}

package/src/ui/styled/Checkout.tsx

@@ -11,6 +11,7 @@ import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { Loading } from "./Loading";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CheckoutProps {
   /** Path used to build the post-payment return URL. Defaults to `/checkout/finalise`. */
@@ -628,6 +629,10 @@ export function Checkout({
                       <p className="font-medium" style={{ color: theme.colors.text }}>
                         {item.title}
                       </p>
+                      {/* Which version. This page never showed it at all, so a
+                          cart holding the MP3 and the FLAC of one release
+                          reached payment as two identical rows. */}
+                      <CartLineOptions item={item} accent={theme.colors.primary} size="small" />
                       {item.isGift && (
                         <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
                           Gift for {item.recipientName}

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -20,6 +20,7 @@ import { BundleConfirmation } from "./BundleConfirmation";
 import { useCart } from "../../contexts/CartContext";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CheckoutConfirmationProps {
   orderId?: string;
@@ -419,12 +420,9 @@ function GroupBlock({
               <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2 }}>
                 {fmt(item.price)} · Qty {item.quantity}
               </div>
-              {item.color && item.size && (
-                <div style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 6, color: alpha(text, 0.7) }}>
-                  <span style={{ width: 12, height: 12, borderRadius: "50%", background: item.color, display: "inline-block", border: `1px solid ${alpha(text, 0.2)}` }} />
-                  {item.size}
-                </div>
-              )}
+              {/* Which version — the receipt has to say, or a buyer cannot check
+                  they were charged for the one they picked. */}
+              <CartLineOptions item={item} accent={primary} size="small" />
               {item.isGift && (
                 <div style={{ fontSize: 12, marginTop: 4, color: primary }}>
                   🎁 Gift for {item.recipientName} ({item.recipientEmail})

package/src/ui/styled/CoachingBooking.tsx

@@ -29,7 +29,15 @@ export interface CoachingBookingProps {
   formatAmount?: (amount: number) => string;
   /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
-  /** Stripe return URL for a PAID booking. Default `/i/coaching/:slug/finalise`. */
+  /**
+   * Stripe return URL for a PAID booking. Default `/i/coaching/:slug/finalise`.
+   *
+   * Put ONLY the bookingId in this URL. The booking's secret is handled for you
+   * by the hook (stashed in `sessionStorage`, read back by
+   * `CoachingConfirmation`) — putting it in the URL would hand it to history,
+   * referrers and shared links, which is the exact leak it exists to close. See
+   * `utils/bookingSecret`.
+   */
   finalisePath?: (slug: string, bookingId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; bookingId: string }) => void;

package/src/ui/styled/CoachingConfirmation.tsx

@@ -3,8 +3,18 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
-import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import {
+  ConfirmationStage,
+  ConfirmationCard,
+  CheckSeal,
+  WarnSeal,
+  Perforation,
+  ConfirmationRow,
+  ConfirmationLostCheckout,
+  alpha,
+} from "./Confirmation";
 import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
+import { useBookingSecret } from "../headless/booking/useBookingSecret";
 import { AddToCalendar } from "./AddToCalendar";
 
 export interface CoachingConfirmationProps {
@@ -14,6 +24,11 @@ export interface CoachingConfirmationProps {
   formatAmount?: (n: number) => string;
   /** Where the "explore more" action links. */
   explorePath?: string;
+  /**
+   * Where "start over" goes when this browser has no credential for the booking
+   * — i.e. back to the session, to book again. Defaults to `/i/coaching/:slug`.
+   */
+  restartPath?: string;
 }
 
 // e.g. "Fri, Jul 4 · 2:30 PM EDT" in the visitor's own timezone — matching how
@@ -30,15 +45,25 @@ export function CoachingConfirmation({
   orderId,
   formatAmount,
   explorePath = "/i/coaching",
+  restartPath,
 }: CoachingConfirmationProps) {
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
-  const { data, isLoading, error } = useCoachingBookingFinalize(slug, orderId);
+  // The credential the booking flow stashed before the payment redirect.
+  // `resolved` gates the finalise: storage can only be read on the client, so
+  // firing before then would send the call without a secret it actually has and
+  // get a 404.
+  const { secret, resolved, isMissing } = useBookingSecret(orderId);
+  const { data, isLoading, error } = useCoachingBookingFinalize(
+    slug,
+    resolved ? orderId : undefined,
+    secret ?? undefined,
+  );
 
   const primary = theme.colors.primary;
   const text = theme.colors.text;
 
-  if (isLoading) {
+  if (!resolved || isLoading) {
     return (
       <ConfirmationStage>
         <Loading label="Confirming your booking…" />
@@ -46,6 +71,22 @@ export function CoachingConfirmation({
     );
   }
 
+  // A booking with no credential in THIS browser is indistinguishable
+  // server-side from a stranger holding a leaked id, so it 404s on purpose.
+  // Explain that rather than implying the booking never existed.
+  if ((error || !data) && isMissing) {
+    return (
+      <ConfirmationStage>
+        <ConfirmationLostCheckout
+          title="We can’t confirm your booking in this browser"
+          body="Confirming a booking needs the checkout details saved in the tab you started in — and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your confirmation email, so check your inbox before booking again. Otherwise, pick a new time and start over."
+          restartPath={restartPath ?? `/i/coaching/${slug}`}
+          restartLabel="Pick a new time"
+        />
+      </ConfirmationStage>
+    );
+  }
+
   const confirmed = !error && data?.status === "confirmed";
 
   return (

package/src/ui/styled/Confirmation.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+import { AlertTriangle, ArrowRight } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
 
 // Shared building blocks for post-purchase "ticket" confirmation pages
 // (coaching / event / course / checkout / invoice / payment-link). All colors
@@ -149,6 +151,98 @@ export function ConfirmationRow({
   );
 }
 
+/**
+ * The "this browser can't confirm that purchase" screen.
+ *
+ * A checkout is now credentialed by a per-booking secret that is issued once
+ * and kept in `sessionStorage` (see `utils/bookingSecret`). If the buyer lands
+ * on a confirmation URL WITHOUT it — the original tab was closed, the link was
+ * forwarded or reopened on another device, storage is blocked — the server has
+ * no way to tell them apart from a stranger holding a leaked id, and answers
+ * 404 by design.
+ *
+ * That is a legitimate state, not a bug, so it gets its own screen rather than
+ * a bare "not found": say plainly what happened, reassure about the money (a
+ * completed payment is still completed — the receipt email is the proof, and
+ * this page failing does not undo it), and offer the one action that actually
+ * works, which is to start again.
+ */
+export function ConfirmationLostCheckout({
+  title,
+  body,
+  restartPath,
+  restartLabel,
+}: {
+  title: string;
+  body: string;
+  restartPath: string;
+  restartLabel: string;
+}) {
+  const t = useForgeTheme();
+  const primary = t.colors.primary;
+  const text = t.colors.text;
+  return (
+    <ConfirmationCard width={460}>
+      <div style={{ padding: "40px 32px 12px", textAlign: "center" }}>
+        <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+        <p
+          className="cf-rise"
+          style={{
+            margin: "22px 0 6px",
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: "0.22em",
+            textTransform: "uppercase",
+            color: "#f59e0b",
+            animationDelay: "0.15s",
+          }}
+        >
+          Can’t confirm here
+        </p>
+        <h1
+          className="cf-rise"
+          style={{ fontSize: 27, fontWeight: 800, lineHeight: 1.14, margin: "0 0 10px", animationDelay: "0.22s" }}
+        >
+          {title}
+        </h1>
+        <p
+          className="cf-rise"
+          style={{
+            fontSize: 15,
+            lineHeight: 1.55,
+            color: alpha(text, 0.7),
+            margin: "0 auto",
+            maxWidth: 360,
+            animationDelay: "0.3s",
+          }}
+        >
+          {body}
+        </p>
+      </div>
+      <div className="cf-rise" style={{ padding: "22px 32px 32px", animationDelay: "0.38s" }}>
+        <a
+          href={restartPath}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            width: "100%",
+            padding: "13px 18px",
+            borderRadius: t.cornerRadius,
+            background: primary,
+            color: readableTextOn(primary),
+            fontWeight: 700,
+            textDecoration: "none",
+          }}
+        >
+          {restartLabel} <ArrowRight size={16} />
+        </a>
+      </div>
+    </ConfirmationCard>
+  );
+}
+
 const KEYFRAMES = `
 @keyframes cf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
 @keyframes cf-pop { 0% { transform: scale(.5); opacity: 0; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }