@tribe-nest/forge 3.20.0 → 3.22.0

package/src/ui/styled/EventTickets.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, Clock, X } from "lucide-react";
+import { AlertCircle, Clock, KeyRound, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
@@ -10,7 +10,10 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
+import { MembershipGateNotice } from "./MembershipGateNotice";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
+import { PresaleCodeField } from "./PresaleCode";
+import { HoldNotice } from "./HoldNotice";
 import {
   DialogRoot,
   DialogTrigger,
@@ -34,6 +37,13 @@ export interface EventTicketsProps {
   finalisePath?: (slug: string, orderId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; orderId: string }) => void;
+  /**
+   * Where a members-only tier sends a signed-OUT visitor. Default `/login`;
+   * code sites mount theirs under `/i`. The sign-in returns them here.
+   */
+  loginPath?: string;
+  /** Where a members-only tier sends a signed-in NON-member — the tier listing. */
+  membershipPath?: string;
 }
 
 /** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
@@ -51,6 +61,8 @@ export function EventTickets({
   renderPayment,
   finalisePath,
   onComplete,
+  loginPath,
+  membershipPath,
 }: EventTicketsProps) {
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
@@ -109,6 +121,8 @@ export function EventTickets({
               event={c.event}
               fmt={fmt}
               renderPayment={renderPay}
+              loginPath={loginPath}
+              membershipPath={membershipPath}
               // Selection is safe in the cart now — close so the buyer can go
               // browse the add-ons.
               onAddedToCart={() => setOpen(false)}
@@ -128,19 +142,34 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const stepIndex = c.step === "tickets" ? 0 : c.step === "details" ? 1 : 2;
   return (
     <div style={{ width: "100%" }}>
       <Progress current={stepIndex} />
-      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} onAddedToCart={onAddedToCart} />}
-      {c.step === "details" && <DetailsStep c={c} event={event} fmt={fmt} />}
+      {c.step === "tickets" && (
+        <TicketStep
+          c={c}
+          event={event}
+          fmt={fmt}
+          onAddedToCart={onAddedToCart}
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+        />
+      )}
+      {c.step === "details" && (
+        <DetailsStep c={c} event={event} fmt={fmt} loginPath={loginPath} membershipPath={membershipPath} />
+      )}
       {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
     </div>
   );
@@ -193,11 +222,15 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const theme = useForgeTheme();
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
@@ -233,6 +266,11 @@ function TicketStep({
   return (
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Select Tickets</h2>
+      {/* Renders nothing on an event with no coded tier (1.2). Here as well as
+          on the page because this modal is reachable on its own — from an offer,
+          and from the broadcast-pass prompt — where there is no page-level box.
+          Both read the SAME stored code, so unlocking in one unlocks the other. */}
+      <PresaleCodeField presale={c.presale} style={{ marginBottom: 16 }} />
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>No tickets available.</p>}
         {event.tickets.map((ticket) => {
@@ -242,6 +280,17 @@ function TicketStep({
           const isSoldOut = remaining <= 0;
           const u = urgency(ticket.expiresAt);
           const isExpired = !!u?.expired;
+          /**
+           * A members-only tier the buyer cannot have (S.4).
+           *
+           * The event-level gate applies to EVERY tier — "no ticket to this show
+           * sells to a non-member" — so it is folded in here rather than drawn
+           * once at the top: a buyer reading one tier row must be able to tell
+           * from that row whether they can buy it.
+           */
+          const gate =
+            event.membershipGate && !event.membershipGate.allowed ? event.membershipGate : ticket.membershipGate;
+          const isGated = !!gate && !gate.allowed;
           const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
           return (
             <div
@@ -257,6 +306,32 @@ function TicketStep({
               <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
                 <div style={{ flex: 1 }}>
                   <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{ticket.title}</h3>
+                  {/* A hidden tier is only ever on screen because a code
+                      revealed it — so say so. Without the badge, a code that
+                      unlocked a tier the buyer had not seen listed looks like it
+                      did nothing. */}
+                  {ticket.isHidden && (
+                    <div
+                      data-testid="presale-tier-badge"
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "2px 8px",
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        marginBottom: 6,
+                        marginRight: 6,
+                        background: a(theme.colors.primary, 0.1),
+                        color: theme.colors.primary,
+                        border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+                      }}
+                    >
+                      <KeyRound size={12} />
+                      Presale
+                    </div>
+                  )}
                   {u && !u.expired && (
                     <div
                       style={{
@@ -305,7 +380,12 @@ function TicketStep({
                   </span>
                   <button
                     onClick={() => setQty(ticket, selectedQty + 1)}
-                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired}
+                    // A gated tier cannot be added. Not because the client is
+                    // the authority — `createOrder` refuses it regardless — but
+                    // because letting a buyer build a cart the server will not
+                    // sell is precisely the "discoverable only by failing"
+                    // journey this change exists to end.
+                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired || isGated}
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -329,6 +409,17 @@ function TicketStep({
               {ticket.description && (
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
+              {/* Named on the TIER, before the buyer has typed anything. The
+                  tier stays in the list on purpose — hiding it kills the upsell
+                  — so this is what turns "visible but mysteriously unbuyable"
+                  into an offer with a way in. */}
+              <MembershipGateNotice
+                gate={gate}
+                variant="badge"
+                itemLabel={event.membershipGate && !event.membershipGate.allowed ? "This event" : "This ticket"}
+                loginPath={loginPath}
+                membershipPath={membershipPath}
+              />
               {isExpired && (
                 <div
                   style={{
@@ -375,7 +466,19 @@ function TicketStep({
 }
 
 // ── Step 2: buyer details + questionnaire ─────────────────────────────────────
-function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+function DetailsStep({
+  c,
+  event,
+  fmt,
+  loginPath,
+  membershipPath,
+}: {
+  c: Checkout;
+  event: IEvent;
+  fmt: (n: number) => string;
+  loginPath?: string;
+  membershipPath?: string;
+}) {
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -451,6 +554,50 @@ function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: n
           </div>
         )}
 
+        {/* The refusal path. It should be unreachable now that the tier itself
+            is badged, but a membership can lapse mid-checkout and a page can be
+            served from cache — and when it happens the buyer gets the tier's
+            name and a way in, not a red line reading "Something went wrong."
+            `c.error` is deliberately not set for this case, so the two cannot
+            both draw. */}
+        <MembershipGateNotice
+          refusal={c.gateRefusal}
+          variant="card"
+          itemLabel="This ticket"
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+          style={{ marginTop: 4 }}
+        />
+
+        {c.attendeeSlots.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
+            <div>
+              <h3 style={{ fontSize: 16, fontWeight: 700 }}>Who is coming?</h3>
+              <p style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
+                This event prints each attendee&rsquo;s name on their own pass, so the door list matches who
+                actually turns up.
+              </p>
+            </div>
+            {c.attendeeSlots.map((slot) => (
+              <label
+                key={`${slot.ticketId}-${slot.index}`}
+                style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}
+              >
+                <span>
+                  {slot.label}
+                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> — that&rsquo;s you</span>}
+                </span>
+                <input
+                  placeholder="Full name"
+                  value={slot.value}
+                  onChange={(e) => c.setAttendee(slot.ticketId, slot.index, e.target.value)}
+                  style={inputStyle(theme)}
+                />
+              </label>
+            ))}
+          </div>
+        )}
+
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
       </div>
       <ActionBar
@@ -484,6 +631,10 @@ function PaymentStep({
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
       <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your tickets.</p>
+      {/* The reservation clock. Event ticket holds are taken unconditionally —
+          no feature switch — so this is the one checkout where the countdown
+          fires for every profile, and it was the one that did not render it. */}
+      <HoldNotice hold={c.hold} expiredMessage={c.error ?? undefined} style={{ marginBottom: 16 }} />
       <div
         style={{
           padding: 20,

package/src/ui/styled/HoldNotice.tsx

@@ -0,0 +1,192 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Clock, TimerOff } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import type { InventoryHoldState } from "../headless/checkout/useInventoryHold";
+
+/** Append an alpha to a 6-digit hex colour (mirrors the other styled blocks). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+export interface HoldNoticeProps {
+  /** The countdown state from `useInventoryHold`. */
+  hold: InventoryHoldState;
+  /**
+   * The server's own words for a 409 `INVENTORY_HOLD_EXPIRED`. Empty/undefined
+   * while nothing has been refused. When set it OUTRANKS the countdown: the
+   * server has spoken and the clock on this device is no longer the story.
+   */
+  expiredMessage?: string;
+  /** Re-take the reservation on the same order. Renders the primary action. */
+  onRetry?: () => void;
+  /** True while a retry is in flight. */
+  isRetrying?: boolean;
+  /** Optional escape hatch ("Change selection", "Back to cart"). */
+  secondaryAction?: { label: string; onClick: () => void };
+  /** What is being held, for the copy. Defaults to "items". */
+  noun?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The reservation, told to the buyer.
+ *
+ * Three states, and they are three different facts:
+ *
+ *  1. **Running** — "Reserved for you · 8:14 left". Quiet by default, insistent
+ *     under two minutes. Only drawn when a hold actually exists; a profile with
+ *     inventory holds switched off, a digital-only cart and an already-settled
+ *     free order all report no hold and get nothing, which is today's page.
+ *  2. **Lapsed on this device** — the clock reached zero. It does not sit on
+ *     "0:00": it changes what it says, because a timer that finishes and then
+ *     says nothing has raised an alarm and refused to explain it. It also does
+ *     not claim the items are gone — this device's clock does not know that.
+ *  3. **Refused by the server** (409) — the reservation is definitively over.
+ *     The message is the API's own, already localised, and it is distinct from
+ *     sold-out on purpose: the units are very often still there, and the retry
+ *     below re-acquires exactly the same ones.
+ *
+ * Every colour comes from the theme. The urgent/expired states use the theme's
+ * `secondary` (falling back to `primary`) rather than a hardcoded red, because
+ * an artist's site is their brand and a stock crimson is wrong on most of them.
+ */
+export function HoldNotice({
+  hold,
+  expiredMessage,
+  onRetry,
+  isRetrying,
+  secondaryAction,
+  noun = "items",
+  style,
+}: HoldNoticeProps): ReactNode {
+  const theme = useForgeTheme();
+  const accent = theme.colors.secondary ?? theme.colors.primary;
+
+  const isExpired = !!expiredMessage || hold.hasLapsed;
+  if (!isExpired && !hold.isHeld) return null;
+
+  const shellStyle: CSSProperties = {
+    position: "relative",
+    display: "flex",
+    gap: 12,
+    alignItems: "flex-start",
+    padding: "12px 14px",
+    marginBottom: 16,
+    border: `1px solid ${a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.5 : 0.28)}`,
+    backgroundColor: a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.1 : 0.06),
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+    fontFamily: theme.fontFamily,
+    ...style,
+  };
+
+  if (isExpired) {
+    return (
+      <div data-testid="hold-expired" role="alert" style={shellStyle}>
+        <TimerOff size={18} style={{ marginTop: 2, flexShrink: 0, color: accent }} aria-hidden />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+            {expiredMessage ? "Your reservation expired" : "Your reservation has ended"}
+          </p>
+          <p style={{ fontSize: 13, opacity: 0.8, margin: "4px 0 0" }}>
+            {/* The server's message names the right noun and the right verb
+                tense; ours only stands in before it has spoken. */}
+            {expiredMessage ??
+              `These ${noun} are no longer held for you. Try again to reserve them — they may well still be available.`}
+          </p>
+          {(onRetry || secondaryAction) && (
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
+              {onRetry && (
+                <button
+                  type="button"
+                  data-testid="hold-retry"
+                  onClick={onRetry}
+                  disabled={isRetrying}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: isRetrying ? "default" : "pointer",
+                    opacity: isRetrying ? 0.6 : 1,
+                    border: "none",
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.textPrimary ?? readableTextOn(theme.colors.primary),
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {isRetrying ? "Reserving…" : "Try again"}
+                </button>
+              )}
+              {secondaryAction && (
+                <button
+                  type="button"
+                  data-testid="hold-secondary"
+                  onClick={secondaryAction.onClick}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    background: "transparent",
+                    border: `1px solid ${theme.colors.primary}`,
+                    color: theme.colors.primary,
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {secondaryAction.label}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="hold-countdown"
+      // Polite, not assertive: this updates every second and an assertive live
+      // region would have a screen reader interrupt itself all the way down.
+      // The number is re-read only when it is worth hearing (see below).
+      style={shellStyle}
+    >
+      <Clock size={18} style={{ marginTop: 2, flexShrink: 0, color: hold.isUrgent ? accent : theme.colors.primary }} aria-hidden />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+          {`Reserved for you · `}
+          <span data-testid="hold-countdown-value" style={{ fontVariantNumeric: "tabular-nums" }}>
+            {hold.label}
+          </span>
+          {` left`}
+        </p>
+        <p style={{ fontSize: 13, opacity: 0.75, margin: "4px 0 0" }}>
+          {hold.isUrgent
+            ? `Complete payment soon — after this your ${noun} go back on sale.`
+            : `We're holding your ${noun} while you pay.`}
+        </p>
+      </div>
+      {/* A screen reader gets a stable sentence rather than a per-second
+          barrage: the visible digits tick, this announces the minute. */}
+      <span
+        aria-live="polite"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0 0 0 0)",
+          whiteSpace: "nowrap",
+          border: 0,
+        }}
+      >
+        {hold.secondsRemaining != null && hold.secondsRemaining % 60 === 0
+          ? `${Math.round(hold.secondsRemaining / 60)} minutes left to complete payment`
+          : ""}
+      </span>
+    </div>
+  );
+}

package/src/ui/styled/MembershipGateNotice.tsx

@@ -0,0 +1,159 @@
+import type { CSSProperties } from "react";
+import { Lock } from "lucide-react";
+import type { PublicMembershipGate } from "../../types/models";
+import type { MembershipGateRefusal } from "../format/membershipGate";
+import { useMembershipGateNotice } from "../headless/membership/useMembershipGateNotice";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface MembershipGateNoticeProps {
+  /** The announced gate from the read. */
+  gate?: PublicMembershipGate | null;
+  /** A `MEMBERSHIP_GATE` refusal from a failed purchase. Wins over `gate`. */
+  refusal?: MembershipGateRefusal | null;
+  /** What the thing is, in the buyer's words. Default "This". */
+  itemLabel?: string;
+  /**
+   * `badge` is the one-line form for a row in a list of things (a ticket tier);
+   * `card` is the block form for a page about ONE thing (a course, a product).
+   */
+  variant?: "badge" | "card";
+  loginPath?: string;
+  membershipPath?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Members only" — said BEFORE the buyer pays, with the action that resolves it.
+ *
+ * ## What was wrong
+ *
+ * Members-only tickets were enforced at checkout and announced on no surface.
+ * A logged-out buyer picked a seat, filled in a two-step form and was refused on
+ * the last screen with a 400 — the restriction was discoverable only by failing
+ * it, and the "members save X, sign in" funnel the feature was sold on existed
+ * nowhere. Products and courses published the same gate and drew it just as
+ * little.
+ *
+ * ## Why the button is the point, not the badge
+ *
+ * A badge alone converts a silent failure into a visible dead end. The two
+ * reasons need genuinely different exits — `sign_in_required` gets a sign-in
+ * that RETURNS here, `membership_required` gets the tier — and offering the
+ * wrong one is worse than offering none: a signed-in member sent to sign in
+ * again learns only that the site is broken. `buildMembershipGateNotice` owns
+ * that choice so both rendering stacks make it identically.
+ *
+ * Renders nothing when nothing is gated, which is also every storefront with the
+ * gates switch off.
+ */
+export function MembershipGateNotice({
+  gate,
+  refusal,
+  itemLabel,
+  variant = "card",
+  loginPath,
+  membershipPath,
+  style,
+}: MembershipGateNoticeProps) {
+  const theme = useForgeTheme();
+  const notice = useMembershipGateNotice({ gate, refusal, itemLabel, loginPath, membershipPath });
+  if (!notice) return null;
+
+  if (variant === "badge") {
+    return (
+      <div
+        data-testid="membership-gate-badge"
+        data-gate-reason={notice.reason}
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 8,
+          marginTop: 8,
+          fontFamily: theme.fontFamily,
+          ...style,
+        }}
+      >
+        <span style={pillStyle(theme)}>
+          <Lock size={12} aria-hidden />
+          {notice.badge}
+        </span>
+        <span style={{ fontSize: 13, opacity: 0.8, color: theme.colors.text }}>{notice.body}</span>
+        {notice.actionHref && (
+          <a data-testid="membership-gate-action" href={notice.actionHref} style={linkStyle(theme)}>
+            {notice.actionLabel}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="membership-gate-card"
+      data-gate-reason={notice.reason}
+      style={{
+        border: `1px solid ${alpha(theme.colors.primary, 0.3)}`,
+        borderRadius: theme.cornerRadius,
+        padding: 20,
+        color: theme.colors.text,
+        background: theme.colors.background,
+        fontFamily: theme.fontFamily,
+        ...style,
+      }}
+    >
+      <span style={pillStyle(theme)}>
+        <Lock size={12} aria-hidden />
+        {notice.badge}
+      </span>
+      <h3 style={{ fontWeight: 600, fontSize: 17, margin: "12px 0 6px" }}>{notice.title}</h3>
+      <p style={{ opacity: 0.8, fontSize: 14, marginBottom: notice.actionHref ? 16 : 0 }}>{notice.body}</p>
+      {notice.actionHref && (
+        <a
+          data-testid="membership-gate-action"
+          href={notice.actionHref}
+          style={{
+            display: "inline-block",
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            fontSize: 14,
+            textDecoration: "none",
+          }}
+        >
+          {notice.actionLabel}
+        </a>
+      )}
+    </div>
+  );
+}
+
+/** Append an alpha to a 6-digit hex colour (mirrors frontend-shared addAlphaToHexCode). */
+const alpha = (hex: string, value: number) => hex + Math.round(value * 255).toString(16).padStart(2, "0");
+
+// Everything is drawn from the artist's own palette. A members-only badge in a
+// hardcoded gold or indigo is a brand bug on every site that is not that colour.
+const pillStyle = (t: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "2px 8px",
+  borderRadius: 6,
+  fontSize: 12,
+  fontWeight: 700,
+  background: alpha(t.colors.primary, 0.1),
+  color: t.colors.primary,
+  border: `1px solid ${alpha(t.colors.primary, 0.3)}`,
+  whiteSpace: "nowrap",
+});
+
+const linkStyle = (t: ForgeTheme): CSSProperties => ({
+  fontSize: 13,
+  fontWeight: 600,
+  color: t.colors.primary,
+  textDecoration: "underline",
+  whiteSpace: "nowrap",
+});

package/src/ui/styled/OfferButton.tsx

@@ -5,6 +5,7 @@ import { Loading } from "./Loading";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
+import { HoldNotice } from "./HoldNotice";
 
 export interface OfferButtonProps {
   productId: string;
@@ -97,6 +98,15 @@ function OfferBody({
           <span>Total</span>
           <strong style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</strong>
         </div>
+        {/* The reservation, counted down while the buyer pays. Nothing is drawn
+            for a digital item or a profile with holds off. */}
+        <HoldNotice
+          hold={c.hold}
+          expiredMessage={c.holdExpiredError ?? undefined}
+          onRetry={c.retryHold}
+          isRetrying={c.isRetryingHold}
+          noun="item"
+        />
         {renderPayment ? (
           <Offer.PaymentStep>{(p) => renderPayment(p)}</Offer.PaymentStep>
         ) : (
@@ -157,6 +167,19 @@ function OfferBody({
           <span style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</span>
         </div>
 
+        {/* A reservation that lapsed on the way to the card form never reached
+            the payment step, so it is answered here — distinctly from the error
+            line, because "your hold ran out" is not "this is gone". */}
+        {c.holdExpiredError && (
+          <HoldNotice
+            hold={c.hold}
+            expiredMessage={c.holdExpiredError}
+            onRetry={c.retryHold}
+            isRetrying={c.isRetryingHold}
+            noun="item"
+          />
+        )}
+
         {c.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.error}</p>}
 
         <button