@tribe-nest/forge 3.21.0 → 3.23.0

package/src/ui/headless/membership/useMembershipGateNotice.ts

@@ -0,0 +1,83 @@
+import { useMemo } from "react";
+import type { PublicMembershipGate } from "../../../types/models";
+import { useGetMembershipTiers } from "../../../data/queries/useMembership";
+import {
+  buildMembershipGateNotice,
+  isMembershipGateLocked,
+  type MembershipGateNotice,
+  type MembershipGateRefusal,
+} from "../../format/membershipGate";
+
+export interface UseMembershipGateNoticeInput {
+  /** The gate announced by the read (`ticket.membershipGate`, `product.membershipGate`, …). */
+  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 — "This ticket", "This course". */
+  itemLabel?: string;
+  /** Where a signed-out visitor signs in. Code sites mount theirs under `/i`. */
+  loginPath?: string;
+  /** Where a signed-in non-member goes to join — the tier listing. */
+  membershipPath?: string;
+}
+
+/**
+ * The members-only notice for one gated thing, tier names and all.
+ *
+ * ## Why the names are fetched here and not sent by the API
+ *
+ * A gate comes down as `requiredTierIds`, and "you need tier 8f3c-…" is not a
+ * sentence anyone can act on. The public tier list is already loaded by every
+ * storefront that sells memberships, is cached by React Query under one key per
+ * profile, and — unlike an id embedded in a ticket payload — stays correct when
+ * the artist renames a tier. So the ids are resolved against it here, once, for
+ * every surface.
+ *
+ * The names are best-effort by design: the query can be in flight, and a gating
+ * tier can be one the public list does not carry (an archived or unlisted tier
+ * still gates). `buildMembershipGateNotice` therefore degrades to "is for
+ * members" rather than showing an id or rendering nothing — a badge with slightly
+ * vaguer wording is a working funnel; a blank space is the bug this closes.
+ *
+ * Returns `null` when nothing is gated, which is also what every surface sees
+ * while the gates feature switch is off.
+ */
+export function useMembershipGateNotice(input: UseMembershipGateNoticeInput): MembershipGateNotice | null {
+  const locked = isMembershipGateLocked(input.gate) || !!input.refusal;
+  // Only pulled once something is actually locked — an ungated storefront must
+  // not acquire a request it never needed.
+  const { data: tiers } = useGetMembershipTiers({ enabled: locked });
+
+  const requiredTierIds = input.refusal?.requiredTierIds ?? input.gate?.requiredTierIds ?? [];
+
+  return useMemo(() => {
+    if (!locked) return null;
+    const byId = new Map((tiers ?? []).map((tier) => [tier.id, tier.name]));
+    return buildMembershipGateNotice({
+      gate: input.gate,
+      refusal: input.refusal,
+      tierNames: requiredTierIds.map((id) => byId.get(id) ?? "").filter(Boolean),
+      itemLabel: input.itemLabel,
+      loginPath: input.loginPath,
+      membershipPath: input.membershipPath,
+      currentPath: currentPath(),
+    });
+    // `requiredTierIds` is a fresh array each render; its CONTENTS are the input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    locked,
+    tiers,
+    requiredTierIds.join(","),
+    input.gate?.reason,
+    input.refusal?.reason,
+    input.itemLabel,
+    input.loginPath,
+    input.membershipPath,
+  ]);
+}
+
+/** Where the buyer is standing, so signing in returns them to it. Empty during SSR. */
+function currentPath(): string {
+  if (typeof window === "undefined") return "";
+  return `${window.location.pathname}${window.location.search}`;
+}

package/src/ui/headless/offer/Offer.tsx

@@ -9,12 +9,19 @@ import {
   DialogTitle,
 } from "../dialog";
 import { OfferProvider, useOfferContext, type OfferProviderProps } from "./OfferContext";
+import type { PaystackCheckoutOutcome } from "../../../utils/paystackCheckout";
 
 /** Render-prop payload for `<Offer.PaymentStep>` (redirect-mode payment). */
 export interface OfferPaymentRenderProps {
+  /** STRIPE: the PaymentIntent client secret. Undefined on Paystack. */
   clientSecret?: string;
   returnUrl: string;
   amount: number;
+  /** PAYSTACK: render a pay button instead of a card form. */
+  isPaystack: boolean;
+  canOpenPaystack: boolean;
+  /** Opens (or re-opens, after a dismissal) the Paystack modal. */
+  openPaystackCheckout: () => Promise<PaystackCheckoutOutcome>;
 }
 
 type OfferComponent = ((props: OfferProviderProps) => React.ReactElement) & {
@@ -82,7 +89,18 @@ Offer.PaymentStep = function OfferPaymentStep({ children }) {
   const ctx = useOfferContext();
   if (ctx.step !== "payment") return null;
   if (typeof children === "function") {
-    return <>{children({ clientSecret: ctx.clientSecret, returnUrl: ctx.returnUrl, amount: ctx.totalPrice })}</>;
+    return (
+      <>
+        {children({
+          clientSecret: ctx.clientSecret,
+          returnUrl: ctx.returnUrl,
+          amount: ctx.totalPrice,
+          isPaystack: ctx.isPaystack,
+          canOpenPaystack: ctx.canOpenPaystack,
+          openPaystackCheckout: ctx.openPaystackCheckout,
+        })}
+      </>
+    );
   }
   return <>{children}</>;
 };

package/src/ui/headless/offer/OfferContext.tsx

@@ -3,6 +3,9 @@ import type { IPublicProduct, IPublicProductVariant } from "../../../types/model
 import { useGetProduct } from "../../../data/queries/useProducts";
 import { useCreateOrder } from "../../../data/queries/useOrders";
 import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
+import { holdExpiredMessage, isHoldExpiredError } from "../checkout/inventoryHold";
+import { useInventoryHold, type InventoryHoldState } from "../checkout/useInventoryHold";
+import type { PaystackCheckoutOutcome } from "../../../utils/paystackCheckout";
 
 export type OfferStep = "details" | "payment";
 
@@ -34,10 +37,26 @@ export interface OfferContextValue {
 
   isProcessing: boolean;
   error: string | null;
-  /** Payment intent once the order is created (Stripe). */
+  /** Payment intent once the order is created (STRIPE only). */
   clientSecret?: string;
+  /** True once the charge started on Paystack rather than Stripe. */
+  isPaystack: boolean;
+  /** True once there is a Paystack session a pay button can (re-)open. */
+  canOpenPaystack: boolean;
+  /**
+   * Re-open the Paystack modal on the SAME charge. A buyer who closed it has
+   * not failed, and the order is still sitting there waiting to be paid.
+   */
+  openPaystackCheckout: () => Promise<PaystackCheckoutOutcome>;
   returnUrl: string;
   continueToPayment: () => Promise<void>;
+  /** The stock reservation held while the buyer pays. All-null when none was taken. */
+  hold: InventoryHoldState;
+  /** The server's 409 `INVENTORY_HOLD_EXPIRED` message — never sold-out. */
+  holdExpiredError: string | null;
+  /** Re-take the reservation on the same order. */
+  retryHold: () => Promise<void>;
+  isRetryingHold: boolean;
 }
 
 const OfferContext = createContext<OfferContextValue | null>(null);
@@ -72,6 +91,10 @@ export function OfferProvider({ productId, children, finalisePath }: OfferProvid
   const [confirmEmail, setConfirmEmail] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [returnUrl, setReturnUrl] = useState("");
+  const [orderId, setOrderId] = useState<string | null>(null);
+  /** The window the ORDER reported, until start-payment restarts it. */
+  const [orderHoldExpiresAt, setOrderHoldExpiresAt] = useState<string | null>(null);
+  const [holdExpiredError, setHoldExpiredError] = useState<string | null>(null);
 
   const selectedVariant = useMemo(
     () => variants.find((v) => v.id === selectedVariantId) ?? variants[0],
@@ -82,6 +105,7 @@ export function OfferProvider({ productId, children, finalisePath }: OfferProvid
 
   const continueToPayment = async () => {
     setError(null);
+    setHoldExpiredError(null);
     if (!product || !selectedVariant) return;
     if (!firstName.trim() || !lastName.trim()) {
       setError("Please enter your name.");
@@ -114,6 +138,10 @@ export function OfferProvider({ productId, children, finalisePath }: OfferProvid
       });
       const ru = `${typeof window !== "undefined" ? window.location.origin : ""}${finalisePath ?? "/checkout/finalise"}?orderId=${created.orderId}`;
       setReturnUrl(ru);
+      setOrderId(created.orderId);
+      // Absent/null for a digital item, a free order, or a profile with holds
+      // switched off — every one of which must render no countdown at all.
+      setOrderHoldExpiresAt(created.holdExpiresAt ?? null);
       // Free checkout — skip payment.
       if (created.subTotal === 0 && typeof window !== "undefined") {
         window.location.href = ru;
@@ -124,11 +152,44 @@ export function OfferProvider({ productId, children, finalisePath }: OfferProvid
       if (result.provider && result.provider !== "stripe") return;
       setStep("payment");
     } catch (e) {
+      // A lapsed reservation gets its own state so the buyer is offered the
+      // retry that re-acquires the same unit, rather than a bare error that
+      // reads like the item is gone.
+      if (isHoldExpiredError(e)) {
+        setHoldExpiredError(
+          holdExpiredMessage(e, "Your reservation expired before payment finished. Please try again."),
+        );
+        return;
+      }
       const message = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
       setError(message || "Something went wrong.");
     }
   };
 
+  /** Take the same unit again on the same order. */
+  const retryHold = async () => {
+    if (!orderId || !returnUrl) return;
+    setHoldExpiredError(null);
+    try {
+      const result = await flow.start({ orderId, returnUrl });
+      if (result.provider && result.provider !== "stripe") return; // Paystack redirected
+      setStep("payment");
+    } catch (e) {
+      if (isHoldExpiredError(e)) {
+        setHoldExpiredError(
+          holdExpiredMessage(e, "Your reservation expired before payment finished. Please try again."),
+        );
+        return;
+      }
+      const message = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setError(message || "Something went wrong.");
+    }
+  };
+
+  // start-payment restarts the clock and reports the newer instant, so it wins
+  // over the create-time one.
+  const hold = useInventoryHold(flow.result?.holdExpiresAt ?? orderHoldExpiresAt);
+
   const value: OfferContextValue = {
     product,
     isLoading,
@@ -154,8 +215,15 @@ export function OfferProvider({ productId, children, finalisePath }: OfferProvid
     isProcessing: createOrder.isPending || flow.isStarting,
     error,
     clientSecret: flow.result?.paymentSecret,
+    isPaystack: flow.isPaystack,
+    canOpenPaystack: flow.canOpenPaystack,
+    openPaystackCheckout: flow.openPaystackCheckout,
     returnUrl,
     continueToPayment,
+    hold,
+    holdExpiredError,
+    retryHold,
+    isRetryingHold: flow.isStarting,
   };
 
   return <OfferContext.Provider value={value}>{children}</OfferContext.Provider>;

package/src/ui/headless/paymentLink/usePaymentLinkPayment.ts

@@ -11,7 +11,9 @@ export interface UsePaymentLinkPaymentOptions {
 /**
  * Headless payment-link checkout: loads the link and starts its payment.
  * Composes `usePaymentLink` + `usePaymentFlow`. Stripe UI renders from
- * `clientSecret`; finalize on the return page with `usePaymentLinkFinalize`.
+ * `clientSecret`; Paystack opens its inline modal (and `openPaystackCheckout`
+ * re-opens it after a dismissal). Finalize on the return page with
+ * `usePaymentLinkFinalize`.
  */
 export function usePaymentLinkPayment(paymentLinkId?: string, opts: UsePaymentLinkPaymentOptions = {}) {
   const link = usePaymentLink(paymentLinkId);
@@ -34,6 +36,10 @@ export function usePaymentLinkPayment(paymentLinkId?: string, opts: UsePaymentLi
     clientSecret: flow.clientSecret,
     paymentId: flow.paymentId,
     provider: flow.provider,
+    /** Paystack: the started inline-checkout session and the way back into it. */
+    isPaystack: flow.isPaystack,
+    canOpenPaystack: flow.canOpenPaystack,
+    openPaystackCheckout: flow.openPaystackCheckout,
     /** Authoritative sales-tax quote from start-payment (display only). */
     taxQuote: flow.result?.taxQuote ?? null,
     isStarting: flow.isStarting,

package/src/ui/headless/work/useWorkPortal.ts

@@ -343,10 +343,10 @@ export function formatWorkMoney(amount: number, currency = "USD"): string {
   return `${symbol}${n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 }
 
-/** ISO date → short human date, or "—" when absent. */
+/** ISO date → short human date, or "Not set" when absent. */
 export function formatWorkDate(value: string | null | undefined): string {
-  if (!value) return "—";
+  if (!value) return "Not set";
   const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return "—";
+  if (Number.isNaN(d.getTime())) return "Not set";
   return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }

package/src/ui/index.ts

@@ -51,6 +51,7 @@ export {
   DiscountSummaryLines,
   type DiscountSummaryLinesProps,
 } from "./styled/DiscountCode";
+export { PresaleCodeField, type PresaleCodeFieldProps } from "./styled/PresaleCode";
 export { MembershipCheckout, type MembershipCheckoutProps } from "./styled/MembershipCheckout";
 export { ForgeStripePayment } from "./payment/ForgeStripePayment";
 export { Cart, type CartProps } from "./styled/Cart";
@@ -109,6 +110,9 @@ export { ForgeAnalytics, type ForgeAnalyticsProps } from "./analytics/ForgeAnaly
 export { PageMetaPixel, usePageMetaPixel, type PageMetaPixelProps } from "./analytics/PageMetaPixel";
 export { CookieConsent, type CookieConsentProps } from "./styled/CookieConsent";
 export { Loading, type LoadingProps } from "./styled/Loading";
+/** The inventory-hold countdown + its lapsed/409 state. See `useInventoryHold`. */
+export { HoldNotice, type HoldNoticeProps } from "./styled/HoldNotice";
+export { PaystackPayButton, type PaystackPayButtonProps } from "./styled/PaystackPayButton";
 export {
   ConfirmationStage,
   ConfirmationCard,
@@ -170,6 +174,66 @@ export {
   resolveUnitPrice,
   ticketSubtotals,
 } from "./format/pwyw";
+// When a tier may be BOUGHT, for a site rendering its own ticket UI. Both halves
+// close a "discoverable only by failing" journey: `ticketSeatsAvailable`
+// subtracts `held` the way the server does, so a fan is never shown seats that
+// are already in someone else's checkout; `ticketSaleWindow` surfaces a
+// scheduled on-sale, which shipped enforced and drawn nowhere. Presentation
+// only — `createOrder` re-checks both.
+export {
+  ticketSeatsAvailable,
+  ticketSeatsUnsold,
+  ticketSeatState,
+  ticketSeatLabel,
+  ticketSeatNotice,
+  ticketSaleWindow,
+  isTicketScheduled,
+  formatOnSaleAt,
+  onSaleBadge,
+  onSaleNotice,
+  maxAddableTickets,
+  type TicketSeatState,
+  type TicketSaleWindow,
+} from "./format/ticketAvailability";
+// Per-attendee names at checkout. Exported for a site rendering its own ticket
+// UI — and used by `apps/client`, which has its own event checkout: the request
+// shape is positional per tier and a length mismatch is refused server-side, so
+// neither stack derives it for itself.
+export {
+  MAX_ATTENDEE_NAME_LENGTH,
+  normalizeAttendeeName,
+  collectsAttendees,
+  buyerFullName,
+  buildAttendeeSlots,
+  setAttendeeName,
+  validateAttendeeNames,
+  attendeesPayload,
+  type AttendeeNames,
+  type AttendeeSlot,
+  type AttendeeCheck,
+  type AttendeeProblem,
+} from "./format/attendees";
+// Members-only gates (S.4). The wording and the resolving ACTION are decided
+// purely, in one place, because BOTH rendering stacks draw this — `apps/client`
+// imports these directly, exactly as it does the PWYW arithmetic. A members-only
+// badge that says one thing on an artist's PWA and another on their website is
+// the same bug twice.
+export {
+  MEMBERSHIP_GATE_CODE,
+  MEMBERSHIP_GATE_LOGIN_PATH,
+  MEMBERSHIP_GATE_MEMBERSHIP_PATH,
+  parseMembershipGateError,
+  isMembershipGateLocked,
+  buildMembershipGateNotice,
+  joinTierNames,
+  membershipSignInHref,
+  type MembershipGateNotice as MembershipGateNoticeModel,
+  type MembershipGateRefusal,
+  type MembershipGateReason,
+  type PublicMembershipGate,
+  type BuildMembershipGateNoticeInput,
+} from "./format/membershipGate";
+export { MembershipGateNotice, type MembershipGateNoticeProps } from "./styled/MembershipGateNotice";
 export { usePricesIncludeTax } from "../data/queries/useWebsite";
 
 // PWA (installable code sites) — SW registration + install/push UX (Tier 2).

package/src/ui/shell/diagnosticsGating.ts

@@ -65,13 +65,13 @@ const WHAT_LABEL: Record<string, string> = {
 
 /** Human copy for the banner. Pure — no React, no formatting concerns. */
 export function previewDiagnosticsMessage(d: ForgeSsrDiagnostics): PreviewDiagnosticsMessage {
-  const details = d.failures.map((f) => `Couldn't load the ${WHAT_LABEL[f.what] ?? f.what} — ${f.error}.`);
+  const details = d.failures.map((f) => `Couldn't load the ${WHAT_LABEL[f.what] ?? f.what}: ${f.error}.`);
 
   if (d.probe) {
     details.push(
       d.probe.ok
         ? `The API answered ${d.probe.url} in ${d.probe.ms}ms, so this looks like a per-route failure rather than a network one.`
-        : `Couldn't reach ${d.probe.url} either — ${d.probe.error ?? `HTTP ${d.probe.status}`} after ${d.probe.ms}ms. This preview has no route to the API.`,
+        : `Couldn't reach ${d.probe.url} either: ${d.probe.error ?? `HTTP ${d.probe.status}`} after ${d.probe.ms}ms. This preview has no route to the API.`,
     );
   }
   if (d.apiUrl) details.push(`API: ${d.apiUrl}`);
@@ -84,7 +84,7 @@ export function previewDiagnosticsMessage(d: ForgeSsrDiagnostics): PreviewDiagno
     // The sentence that would have saved the debugging session this was built
     // after: the defaults on screen are a symptom, not the setting.
     consequence:
-      "You're seeing Forge's default theme (white background, purple accent) and empty content because the data never arrived — not because of how your site is configured. Your published site is unaffected.",
+      "You're seeing Forge's default theme (white background, purple accent) and empty content because the data never arrived, not because of how your site is configured. Your published site is unaffected.",
     details,
   };
 }

package/src/ui/styled/AccountDashboard.tsx

@@ -4,7 +4,8 @@ import {
   useUserOrders,
   useMyTickets,
   useCancelMyTicket,
-  myTicketPassIds,
+  myTicketHeldPassIds,
+  myTicketPasses,
   type MyTicket,
   useMyWaitlistPlaces,
   useLeaveEventWaitlist,
@@ -34,6 +35,7 @@ import { useSiteConfig } from "../../data/queries/useWebsite";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
 import { formatCountdown } from "./EventWaitlist";
+import { AddToCalendar } from "./AddToCalendar";
 import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
@@ -225,6 +227,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const { formatAmount, formatDate, currency, onNavigateMembership } = ctx;
   const cancelMembership = useCancelMembership();
   const [isCancelling, setIsCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState<string | null>(null);
 
   const membership = user?.membership;
   // Two separate questions, deliberately answered separately:
@@ -236,12 +239,20 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const openBillingPortal = useOpenBillingPortal();
   const [billingError, setBillingError] = useState<string | null>(null);
 
+  // A failure here used to be swallowed whole: the button said "Cancelling…",
+  // then said "Cancel" again, and the member was never told anything. That is
+  // how a free-tier member — whose cancel the server rejected outright — could
+  // press this forever with no effect and no explanation.
   const onCancel = async () => {
     if (!membership?.id) return;
+    setCancelError(null);
     setIsCancelling(true);
     try {
       await cancelMembership.mutateAsync({ membershipId: membership.id });
       window.location.reload();
+    } catch (error) {
+      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setCancelError(detail || "We couldn't cancel your membership. Please try again or contact us.");
     } finally {
       setIsCancelling(false);
     }
@@ -300,6 +311,11 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             </p>
           )}
           {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
+          {cancelError && (
+            <p role="alert" style={{ fontSize: 13, opacity: 0.9, color: t.primary }}>
+              {cancelError}
+            </p>
+          )}
         </div>
       ) : (
         <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
@@ -313,8 +329,9 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         )}
         {/* Cancelling stays available for anyone who still HAS access — a
             past_due member must not be trapped in a subscription they can see
-            but not leave. */}
-        {access.hasAccess && (
+            but not leave. Hidden once it is already scheduled ("Ending"), where
+            the only honest label would be "Cancel again". */}
+        {access.hasAccess && !access.cancelAtPeriodEnd && (
           <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
             {isCancelling ? "Cancelling…" : "Cancel"}
           </button>
@@ -340,6 +357,14 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
  * come from the server, which reads the snapshot on the order; mirroring the
  * date arithmetic in the UI would give two answers to the same question and the
  * wrong one would be the one the buyer sees.
+ *
+ * ## Two kinds of row
+ *
+ * `role` says whether the caller PAID for this order or merely HOLDS a pass out
+ * of it — a ticket somebody transferred to them, which until now reached them
+ * nowhere at all. A holder's row is scrubbed server-side (no totals, no line
+ * prices, no other seats, no cancel), and this renders that difference rather
+ * than printing "$0.00" over somebody else's purchase.
  */
 function TicketsTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
@@ -381,6 +406,8 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
         <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
           {tickets.map((ticket) => {
             const cancelled = !!ticket.selfCancelledAt;
+            // Absent on an older API build, where every row WAS a purchase.
+            const gifted = ticket.role === "holder";
             return (
               <div
                 key={ticket.id}
@@ -392,6 +419,12 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                     <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
                   </div>
                   {cancelled && <span style={{ fontSize: 13, color: t.primary }}>Cancelled</span>}
+                  {/* Says WHY this is in the list at all. Without it a
+                      transferred ticket looks like a purchase the buyer cannot
+                      remember making, with no prices on it. */}
+                  {!cancelled && gifted && (
+                    <span style={{ fontSize: 13, color: t.primary }}>Sent to you</span>
+                  )}
                 </div>
 
                 {ticket.items.map((item) => (
@@ -399,14 +432,34 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                     <span>
                       {item.ticketTitle ?? "Ticket"} × {item.quantity}
                     </span>
-                    <span>{formatAmount(Number(item.price) * item.quantity, ticket.currency || currency)}</span>
+                    {/* A holder is not shown a price, because the server did
+                        not send one — `Number(null)` is 0, and a confident
+                        "$0.00" on somebody else's purchase is a lie. */}
+                    {!gifted && (
+                      <span>{formatAmount(Number(item.price) * item.quantity, ticket.currency || currency)}</span>
+                    )}
                   </div>
                 ))}
 
-                <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                  <span>Total</span>
-                  <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
-                </div>
+                {!gifted && (
+                  <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
+                    <span>Total</span>
+                    <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
+                  </div>
+                )}
+
+                {/* Diarise it — including the Apple option, which needs the
+                    platform's own `.ics` and so could not exist before. Null
+                    for a called-off show, and the component draws nothing. */}
+                <AddToCalendar
+                  variant="compact"
+                  title={ticket.eventTitle}
+                  start={ticket.eventDateTime}
+                  end={ticket.eventEndDateTime}
+                  icsUrl={ticket.calendarUrl}
+                  webcalUrl={ticket.calendarWebcalUrl}
+                  style={{ marginTop: 12 }}
+                />
 
                 {/*
                   Wallet passes (2.3). Renders NOTHING unless the API offers a
@@ -419,7 +472,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   Eligibility (cancelled order, rotating QR) is the server's
                   call, exactly as it is for cancellation above.
                 */}
-                <WalletPassButtons passIds={myTicketPassIds(ticket)} variant="compact" style={{ marginTop: 12 }} />
+                <WalletPassButtons passIds={myTicketHeldPassIds(ticket)} variant="compact" style={{ marginTop: 12 }} />
 
                 {/*
                   Transfer (2.2). The email a transfer sends points at
@@ -432,8 +485,19 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   404. Whether THIS pass may be handed on is the server's call,
                   answered on submit in its own words — not hidden behind a
                   guess here.
+
+                  HELD passes only: the endpoints resolve the current holder, so
+                  a control on a named guest's seat or on a ticket already
+                  claimed by somebody else could answer nothing but 404. The
+                  pass objects go through too, because each carries the caller's
+                  own `pendingTransfer` — which is what lets a sender withdraw
+                  from a device that is not the one they sent from.
                 */}
-                <TicketTransferPanel passIds={myTicketPassIds(ticket)} style={{ marginTop: 12 }} />
+                <TicketTransferPanel
+                  passIds={myTicketHeldPassIds(ticket)}
+                  passes={myTicketPasses(ticket)}
+                  style={{ marginTop: 12 }}
+                />
 
                 {/* The terms they agreed to, in the artist's own words where given. */}
                 {ticket.cancellation.description && (
@@ -576,7 +640,7 @@ function WaitlistPlaceRow({
             fontSize: 14,
           }}
         >
-          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}</strong> — your offer closes{" "}
+          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}.</strong> Your offer closes{" "}
           {deadline.toLocaleString(undefined, {
             weekday: "short",
             day: "numeric",
@@ -672,7 +736,60 @@ function formatSessionWindow(booking: MyBooking): string {
   });
   const from = start.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
   const to = end.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
-  return `${day}, ${from} – ${to}${zone ? ` (${zone})` : ""}`;
+  return `${day}, ${from} to ${to}${zone ? ` (${zone})` : ""}`;
+}
+
+/**
+ * WHERE the session is — the line this portal existed without.
+ *
+ * A client who bought a coaching call could see the time, the price and an
+ * add-to-calendar button, and nothing at all about how to attend; the answer
+ * arrived, if it arrived, in a separate email from the coach.
+ *
+ * The two kinds are not interchangeable, so they do not render the same. An
+ * online session's link is an anchor — at 9:59 for a 10:00 call it is the only
+ * thing on this row anyone wants — shown in full rather than as the word "Join",
+ * because the client may be reading this on a phone and about to type it into
+ * a laptop. An in-person address is plain text: it is the coach's own words,
+ * often "Studio B, ring the buzzer" rather than anything a maps provider could
+ * resolve, and linking it would guess at something they did not say.
+ *
+ * `location` is already resolved server-side (booking override over product
+ * default) and is null unless the session is confirmed, so there is no rule to
+ * apply here — which is the same discipline `canReschedule` follows two blocks
+ * down.
+ */
+function BookingLocationLine({
+  location,
+  primary,
+}: {
+  location: MyBooking["location"];
+  primary: string;
+}) {
+  if (!location) return null;
+
+  if (location.type === "online") {
+    return (
+      <div style={{ fontSize: 13, marginTop: 4 }}>
+        <span style={{ opacity: 0.7 }}>Join: </span>
+        <a
+          href={location.url}
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: primary, textDecoration: "underline", wordBreak: "break-all" }}
+        >
+          {location.url}
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+      <span style={{ fontWeight: 600 }}>Where: </span>
+      {location.address}
+    </div>
+  );
 }
 
 function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
@@ -724,6 +841,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
           {booking.coachingProductDurationMinutes != null && (
             <div style={{ fontSize: 13, opacity: 0.7 }}>{booking.coachingProductDurationMinutes} minutes</div>
           )}
+          <BookingLocationLine location={booking.location} primary={t.primary} />
         </div>
         <div style={{ textAlign: "right" }}>
           {cancelled && <div style={{ fontSize: 13, color: t.primary }}>Cancelled</div>}
@@ -735,6 +853,19 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
         </div>
       </div>
 
+      {/* Diarise it — including Apple, which needs the platform's own `.ics`.
+          Null unless the session is confirmed, and the component draws nothing. */}
+      <AddToCalendar
+        variant="compact"
+        title={booking.coachingProductTitle}
+        start={booking.sessionStartTime}
+        end={booking.sessionEndTime}
+        defaultDurationMinutes={booking.coachingProductDurationMinutes ?? undefined}
+        icsUrl={booking.calendarUrl}
+        webcalUrl={booking.calendarWebcalUrl}
+        style={{ marginTop: 12 }}
+      />
+
       {/* The terms they booked under, in the artist's own words where given. */}
       {booking.cancellation.description && (
         <div style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>{booking.cancellation.description}</div>