@tribe-nest/forge 3.58.0 → 3.60.0

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-// Forge UI — Tier-2 styled blocks (theme-aware, opinionated) + the theme
+// Forge UI: Tier-2 styled blocks (theme-aware, opinionated) + the theme
 // contract. Built on the Tier-1 headless primitives in `forge/ui/headless`.
 
 // Compiled Tailwind utilities for every className in Forge's source, generated
@@ -50,7 +50,7 @@ export * from "./headless";
 // Currency formatting primitive (presentational helper).
 export { useFormatCurrency, useAmountFormatter, formatCurrency, getCurrencySymbol } from "./format/useFormatCurrency";
 
-// Content layer (Component 7) — editable field wrappers.
+// Content layer (Component 7): editable field wrappers.
 export {
   EditableText,
   EditableRichText,
@@ -96,7 +96,7 @@ export { Cart, type CartProps } from "./styled/Cart";
 export { ResumeCart, type ResumeCartProps } from "./styled/ResumeCart";
 // 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.
+// 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";
@@ -128,14 +128,14 @@ export { tierColorMap, TIER_PALETTE } from "./styled/seating/paint";
 export { EventCountdown, type EventCountdownProps } from "./styled/EventCountdown";
 export { EventWaitlist, type EventWaitlistProps, formatCountdown } from "./styled/EventWaitlist";
 export { EventDetail, type EventDetailProps } from "./styled/EventDetail";
-// Phase 5 — the page for a NAMED, multi-date series. The API refuses anything
+// Phase 5: the page for a NAMED, multi-date series. The API refuses anything
 // else, so this component never has to decide whether a series is publishable.
 export { EventSeriesDetail, type EventSeriesDetailProps } from "./styled/EventSeriesDetail";
 export { AddToCalendar, type AddToCalendarProps } from "./styled/AddToCalendar";
 export { WalletPassButtons, type WalletPassButtonsProps } from "./styled/WalletPassButtons";
 export { CoachingBooking, type CoachingBookingProps } from "./styled/CoachingBooking";
 export { CoachingDetail, type CoachingDetailProps } from "./styled/CoachingDetail";
-// S.6 — the buyer-facing cancellation policy block. Exported so a code site that
+// S.6: the buyer-facing cancellation policy block. Exported so a code site that
 // lays out its own booking page still has ONE renderer for these terms.
 export { CancellationTerms, type CancellationTermsProps } from "./styled/CancellationTerms";
 export { CourseCheckout, type CourseCheckoutProps } from "./styled/CourseCheckout";
@@ -255,7 +255,7 @@ export { PriceDisplay, priceTaxCaption, summarizeTaxQuote, type PriceDisplayProp
 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
+// 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,
@@ -288,7 +288,7 @@ export {
 // 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.
+// only: `createOrder` re-checks both.
 export {
   ticketSeatsAvailable,
   ticketSeatsUnsold,
@@ -305,7 +305,7 @@ export {
   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
+// 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 {
@@ -323,7 +323,7 @@ export {
   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`
+// 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.
@@ -345,10 +345,10 @@ export {
 export { MembershipGateNotice, type MembershipGateNoticeProps } from "./styled/MembershipGateNotice";
 export { usePricesIncludeTax } from "../data/queries/useWebsite";
 
-// PWA (installable code sites) — SW registration + install/push UX (Tier 2).
+// PWA (installable code sites): SW registration + install/push UX (Tier 2).
 export { PwaRegistration, type PwaRegistrationProps } from "./styled/PwaRegistration";
 export { InstallBanner, type InstallBannerProps } from "./styled/InstallBanner";
-// The single root component — providers + audio + analytics + PWA + consent in one.
+// The single root component: providers + audio + analytics + PWA + consent in one.
 export { TribeNestApp, type TribeNestAppProps } from "./shell/TribeNestApp";
 // The SSR-bootstrap failure banner + its gating. Exported so a bespoke shell that
 // doesn't use <TribeNestApp> can still fail loudly instead of silently rendering
@@ -366,10 +366,15 @@ export { PushOptIn, type PushOptInProps } from "./styled/PushOptIn";
 // Community (forum) styled blocks.
 export * from "./styled/community";
 
+// Communities: the list, About page with the in-place join sheet, the pending
+// screen, the community home shell, the upgrade sheet, the membership menu,
+// and the account page's list of memberships.
+export * from "./styled/communities";
+
 // Work (project management) client-portal styled blocks.
 export * from "./styled/work";
 
-// Unified member home (`/i/members`) styled blocks.
+// A community's member home (`/i/communities/<slug>/home`) styled blocks.
 export * from "./styled/members";
 
 // The review page a "how did we do?" email lands on. Here rather than in a

package/src/ui/styled/AccountDashboard.tsx

@@ -23,14 +23,12 @@ import {
   useMyCourses,
   useMyFilmRentals,
   type MyCourse,
-  useCancelMembership,
-  useMembershipAccess,
   useMyMembershipApplications,
   useWithdrawMembershipApplication,
   useConfirmMembershipApplication,
   type MembershipApplication,
   type MembershipApplicationStatus,
-  useOpenBillingPortal,
+  usePublicCommunities,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -53,7 +51,8 @@ import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
 import { FilmRentalList } from "./FilmLibrary";
 import { canWithdrawMembershipApplication } from "../headless/membership/membershipApplication";
-import { isMembershipInTrial } from "../headless/membership/membershipTrial";
+import { communityAboutPath, communitiesListPath } from "../headless/communities/paths";
+import { MyMembershipsList } from "./communities/MyMembershipsList";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -63,7 +62,7 @@ export const ACCOUNT_TABS = [
   // holding for this artist's shows? (2.6)
   "waitlist",
   // Sessions bought from this artist (S.6 / bookings § 1.4). A booking is not an
-  // "order" — the Orders tab covers product orders only — so it needs its own
+  // "order" (the Orders tab covers product orders only) so it needs its own
   // tab or it is unreachable, which is what it was.
   "bookings",
   // Films and series this fan has rented. Next to the other purchase surfaces
@@ -109,21 +108,10 @@ export interface AccountDashboardProps {
   /** Called when the visitor selects a different tab. Host maps this to navigation. */
   onTabChange?: (tab: AccountTabKey) => void;
   /**
-   * Navigate to the membership page (the "Change" / "Join" action). Host wires
-   * this to its router (e.g. `/i/membership`).
+   * SPA navigation adapter for the Memberships tab (each membership opens its
+   * community's home). Defaults to a full-page visit.
    */
-  onNavigateMembership?: () => void;
-  /**
-   * Navigate to the member area, the member home (host maps this to its router,
-   * e.g. `/i/members`).
-   *
-   * Optional, and drawn for every signed-in visitor, membership or none. It used
-   * to be gated on `/public/community/spaces` returning a space they could open,
-   * which hid the member area from exactly the people who had not joined yet:
-   * the member home itself shows the locked posts and the way to buy access, so
-   * the door is never a dead end.
-   */
-  onNavigateCommunity?: () => void;
+  navigate?: (href: string) => void;
   /**
    * Navigate to a film route from the Rentals tab (watch, resume, rent again).
    *
@@ -208,8 +196,7 @@ interface TabContext {
   formatAmount: (amount: number, currencyCode?: string) => string;
   formatDate: (value: string | number | Date) => string;
   currency?: string;
-  onNavigateMembership?: () => void;
-  onNavigateCommunity?: () => void;
+  navigate?: (href: string) => void;
   onNavigateFilm?: (href: string) => void;
   /**
    * Open a course the fan owns. Host-supplied, like every other navigation
@@ -232,8 +219,7 @@ interface TabContext {
 export function AccountDashboard({
   tab,
   onTabChange,
-  onNavigateMembership,
-  onNavigateCommunity,
+  navigate,
   onNavigateFilm,
   onNavigateCourse,
   formatAmount,
@@ -271,11 +257,10 @@ export function AccountDashboard({
   const ctx: TabContext = {
     formatAmount: fmtAmount,
     formatDate: fmtDate,
-    // Fallback for records with no explicit currency — the tenant's runtime
+    // Fallback for records with no explicit currency: the tenant's runtime
     // settlement currency (single source), unless the host overrides it.
     currency: currency ?? siteConfig?.currency,
-    onNavigateMembership,
-    onNavigateCommunity,
+    navigate,
     onNavigateFilm,
     onNavigateCourse,
   };
@@ -350,222 +335,22 @@ export function AccountDashboard({
 
 // ---- Membership tab ---------------------------------------------------------
 
+/**
+ * "My memberships": one card per community the fan belongs to, each linking
+ * inside its community, where billing, cancel and downgrade live. A fan can
+ * hold a membership in several communities of one creator, so there is no
+ * single "your membership" any more. Nothing in a join or upgrade flow sends a
+ * fan here; this is for someone who wants everything in one place.
+ */
 function MembershipTab({ ctx }: { ctx: TabContext }) {
-  const { user } = usePublicAuth();
-  const { t, card, button, ghostButton } = useCardStyles();
+  const { t, card } = useCardStyles();
   const tr = useForgeT();
-  const { formatAmount, formatDate, currency, onNavigateMembership, onNavigateCommunity } = ctx;
-  const cancelMembership = useCancelMembership();
-  // The way into the member area. Being signed in is the whole gate: a fan with
-  // no membership needs this door most, because the member home is where the
-  // locked posts and the offer to join actually live. The old gate asked
-  // `/public/community/spaces` for an openable space first, so a fan who had not
-  // joined saw no way in at all.
-  const canOpenCommunity = !!onNavigateCommunity && !!user;
-  const [isCancelling, setIsCancelling] = useState(false);
-  /**
-   * Cancelling is destructive and irreversible from here, so it asks first.
-   * CLAUDE.md puts a destructive confirmation in the category that must stay
-   * VISIBLE rather than behind a `?`, and until now one click on Cancel simply
-   * ended the membership. The client app has always asked (`EditorModal` in
-   * `MembershipTab.tsx`); this surface was ported without it.
-   */
-  const [confirmingCancel, setConfirmingCancel] = useState(false);
-  const [cancelError, setCancelError] = useState<string | null>(null);
-
-  const membership = user?.membership;
-  /**
-   * Inside a free trial: nothing has been charged yet. The date the first
-   * charge falls and what it will be are state the member acts on (cancel
-   * before then, or not), so they are visible, not behind a hint.
-   */
-  const inTrial = isMembershipInTrial(membership);
-  const cycleWord = (cycle: string | undefined) =>
-    cycle === "year" ? tr("forge.account_dashboard.cycle_year") : tr("forge.account_dashboard.cycle_month");
-  // Two separate questions, deliberately answered separately:
-  //   `access.hasAccess` → are the benefits live (true through past_due/grace)
-  //   `message`          → what the member is told, including a failed payment
-  // The old `status === "active"` answered both at once and got both wrong for
-  // anyone whose card bounced.
-  const { access, message } = useMembershipAccess();
-  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 || tr("forge.account_dashboard.membership_cancel_error"));
-    } finally {
-      setIsCancelling(false);
-    }
-  };
-
-  const onUpdatePayment = async () => {
-    setBillingError(null);
-    try {
-      const { url } = await openBillingPortal.mutateAsync({});
-      window.location.href = url;
-    } catch (error) {
-      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setBillingError(detail || tr("forge.account_dashboard.billing_portal_error"));
-    }
-  };
-
   return (
     <div style={card}>
       <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
         {tr("forge.account_dashboard.membership_title")}
       </h2>
-      {membership ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <div>
-            <h3 style={{ fontWeight: 700 }}>{membership.membershipTier.name}</h3>
-            <p
-              style={{
-                fontSize: 13,
-                opacity: 0.85,
-                fontWeight: message.tone === "warning" ? 700 : 400,
-                color: message.tone === "warning" ? t.primary : undefined,
-              }}
-            >
-              {message.label}
-            </p>
-            {message.detail && (
-              <p style={{ fontSize: 13, opacity: 0.8, marginTop: 4, maxWidth: 480 }}>{message.detail}</p>
-            )}
-            {!!membership.subscriptionAmount && (
-              <p style={{ fontSize: 14, marginTop: 4 }}>
-                {tr("forge.account_dashboard.membership_price", {
-                  amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
-                  cycle: membership.billingCycle,
-                })}
-              </p>
-            )}
-          </div>
-          {!!membership.membershipTier.benefits?.length && (
-            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
-              {membership.membershipTier.benefits.map((b) => (
-                <li key={b.id} style={{ display: "flex", gap: 8 }}>
-                  <span style={{ color: t.primary }}>✓</span>
-                  {b.title}
-                </li>
-              ))}
-            </ul>
-          )}
-          {inTrial && membership.trialEndsAt && (
-            <div data-testid="membership-trial-state">
-              <p style={{ fontSize: 14, fontWeight: 600 }}>
-                {tr("forge.account_dashboard.membership_trial_until", { date: formatDate(membership.trialEndsAt) })}
-              </p>
-              <p style={{ fontSize: 14, opacity: 0.85, marginTop: 2 }}>
-                {access.cancelAtPeriodEnd
-                  ? tr("forge.account_dashboard.membership_trial_cancelled")
-                  : membership.subscriptionAmount
-                    ? tr("forge.account_dashboard.membership_trial_then", {
-                        amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
-                        cycle: cycleWord(membership.billingCycle),
-                        date: formatDate(membership.trialEndsAt),
-                      })
-                    : null}
-              </p>
-            </div>
-          )}
-          {membership.endDate && !inTrial && (
-            <p style={{ fontSize: 14, opacity: 0.8 }}>
-              {access.billingState === "active"
-                ? tr("forge.account_dashboard.membership_renews_on", { date: formatDate(membership.endDate) })
-                : tr("forge.account_dashboard.membership_ends_on", { date: formatDate(membership.endDate) })}
-            </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 }}>{tr("forge.account_dashboard.membership_empty")}</p>
-      )}
-
-      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24, flexWrap: "wrap" }}>
-        {/* Kept hard left, apart from the billing actions: this is the door to
-            what the membership is FOR, not another thing to do to the plan. */}
-        {canOpenCommunity && (
-          <button onClick={() => onNavigateCommunity?.()} style={{ ...ghostButton, marginRight: "auto" }}>
-            {tr("forge.account_dashboard.member_area")}
-          </button>
-        )}
-        {message.showUpdatePayment && (
-          <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
-            {openBillingPortal.isPending
-              ? tr("forge.account_dashboard.billing_portal_opening")
-              : tr("forge.account_dashboard.update_payment_method")}
-          </button>
-        )}
-        {/* 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. Hidden once it is already scheduled ("Ending"), where
-            the only honest label would be "Cancel again". */}
-        {access.hasAccess && !access.cancelAtPeriodEnd && (
-          <button onClick={() => setConfirmingCancel(true)} disabled={isCancelling} style={ghostButton}>
-            {isCancelling ? tr("forge.account_dashboard.cancelling") : tr("forge.account_dashboard.cancel")}
-          </button>
-        )}
-        <button onClick={() => onNavigateMembership?.()} style={button}>
-          {membership
-            ? tr("forge.account_dashboard.membership_change")
-            : tr("forge.account_dashboard.membership_join")}
-        </button>
-      </div>
-
-      {/* Says WHICH of the two cancellations this is. A paid membership runs to
-          the end of the period already paid for; a free one stops now. A flat
-          "are you sure" tells a member who paid this month that they have lost
-          the rest of it, which is not true and reads as a threat. */}
-      {confirmingCancel && (
-        <div role="alertdialog" aria-modal="true" style={{ ...card, marginTop: 16 }}>
-          <p style={{ fontWeight: 700 }}>{tr("forge.account_dashboard.cancel_confirm_title")}</p>
-          <p style={{ fontSize: 14, opacity: 0.85, marginTop: 8 }}>
-            {inTrial && membership?.trialEndsAt
-              ? tr("forge.account_dashboard.cancel_confirm_trial", { date: formatDate(membership.trialEndsAt) })
-              : membership?.subscriptionAmount
-              ? membership.endDate
-                ? tr("forge.account_dashboard.cancel_confirm_paid_until", { date: formatDate(membership.endDate) })
-                : tr("forge.account_dashboard.cancel_confirm_paid")
-              : tr("forge.account_dashboard.cancel_confirm_free")}
-          </p>
-          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 16 }}>
-            <button onClick={() => setConfirmingCancel(false)} disabled={isCancelling} style={ghostButton}>
-              {tr("forge.account_dashboard.cancel_confirm_keep")}
-            </button>
-            <button
-              onClick={() => {
-                // Closed FIRST, so the dialog cannot be double-submitted while
-                // the request is in flight. The row behind it already renders
-                // "Cancelling" from `isCancelling`.
-                setConfirmingCancel(false);
-                void onCancel();
-              }}
-              disabled={isCancelling}
-              style={button}
-            >
-              {tr("forge.account_dashboard.cancel_confirm_confirm")}
-            </button>
-          </div>
-        </div>
-      )}
-
+      <MyMembershipsList navigate={ctx.navigate} formatAmount={ctx.formatAmount} />
       <MembershipApplicationsSection ctx={ctx} />
     </div>
   );
@@ -597,6 +382,13 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
   const { t, ghostButton, button } = useCardStyles();
   const { formatAmount, formatDate, currency } = ctx;
   const { data: applications } = useMyMembershipApplications(user?.id);
+  const { data: communities } = usePublicCommunities({ enabled: !!applications?.some((a) => a.status === "payment_failed") });
+  /** An approved application whose card failed is finished on its community's About page, on that tier. */
+  const completeHref = (application: MembershipApplication) => {
+    const communityId = (application as MembershipApplication & { communityId?: string }).communityId;
+    const slug = communities?.find((community) => community.id === communityId)?.slug;
+    return slug ? communityAboutPath(slug, { tier: application.membershipTierId }) : communitiesListPath();
+  };
   const withdraw = useWithdrawMembershipApplication();
   const confirm = useConfirmMembershipApplication();
   const [error, setError] = useState<string | null>(null);
@@ -674,7 +466,7 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
             )}
             {application.status === "payment_failed" && (
               <a
-                href={`/i/membership/checkout?membershipTierId=${encodeURIComponent(application.membershipTierId)}`}
+                href={completeHref(application)}
                 style={{ ...button, textDecoration: "none" }}
               >
                 {tr("forge.account_dashboard.application_complete")}
@@ -698,7 +490,7 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
  * The buyer's event tickets, and cancelling one inside the policy they were
  * sold under (S.6).
  *
- * Before this, a ticket buyer had no purchase surface at all — the confirmation
+ * Before this, a ticket buyer had no purchase surface at all: the confirmation
  * email and a one-shot finalise page were the only artefacts of the sale.
  *
  * Eligibility is NOT recomputed here. `cancellation.canCancel` and its reason
@@ -709,7 +501,7 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
  * ## 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
+ * 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.
@@ -821,7 +613,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                       })}
                     </span>
                     {/* A holder is not shown a price, because the server did
-                        not send one — `Number(null)` is 0, and a confident
+                        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>
@@ -866,7 +658,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   </div>
                 )}
 
-                {/* Diarise it — including the Apple option, which needs the
+                {/* 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. */}
                 {/* Not offered on a request: the fan has not been admitted to
@@ -885,7 +677,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
                 {/*
                   Wallet passes (2.3). Renders NOTHING unless the API offers a
-                  real pass for a real pass id — which, with no signing
+                  real pass for a real pass id: which, with no signing
                   credentials configured, is every ticket today. Deliberately
                   not wrapped in a condition of its own: the component owns that
                   decision, and a second copy of the rule here is how one of the
@@ -899,20 +691,20 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                 {/*
                   Transfer (2.2). The email a transfer sends points at
                   `/i/tickets/claim`, so this affordance and that route ship
-                  together — a send with nowhere to land is undeliverable in
+                  together: a send with nowhere to land is undeliverable in
                   practice.
 
                   Renders nothing when the payload carries no `TN-…` pass ids
                   (an older API build), because every pass-scoped endpoint would
                   404. Whether THIS pass may be handed on is the server's call,
-                  answered on submit in its own words — not hidden behind a
+                  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
+                  own `pendingTransfer`: which is what lets a sender withdraw
                   from a device that is not the one they sent from.
                 */}
                 <TicketTransferPanel
@@ -967,8 +759,8 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
  *
  * Two states, and they are genuinely different things:
  *
- *   WAITING  — a 1-based `position` in the queue.
- *   NOTIFIED — an OFFER with a deadline, and `position: null`. An offer is not a
+ *   WAITING: a 1-based `position` in the queue.
+ *   NOTIFIED: an OFFER with a deadline, and `position: null`. An offer is not a
  *              queue place, so it is never rendered as one; the deadline is the
  *              whole point and gets the emphasis.
  *
@@ -1131,13 +923,13 @@ function WaitlistPlaceRow({
  * Session buyers had no purchase surface at all: `GET /public/coaching/bookings/mine`
  * and the reschedule action shipped with nothing that could reach them.
  *
- * A booking is deliberately NOT folded into the Orders tab — that tab reads
+ * A booking is deliberately NOT folded into the Orders tab: that tab reads
  * `/public/orders` and covers product orders only, so a session would never
  * appear there however hard one looked.
  *
  * Nothing is recomputed here. `canReschedule` and `rescheduleReason` arrive on
  * every row, and the slot grid the picker offers is the server's own
- * availability read — which already excludes taken slots and hours the coach is
+ * availability read: which already excludes taken slots and hours the coach is
  * busy on any of their services.
  *
  * `cancellation` comes from the POLICY SNAPSHOT taken on the booking at
@@ -1194,15 +986,15 @@ function formatSessionWindow(booking: MyBooking, tr: ForgeT): string {
 }
 
 /**
- * WHERE the session is — the line this portal existed without.
+ * 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",
+ * 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
@@ -1210,7 +1002,7 @@ function formatSessionWindow(booking: MyBooking, tr: ForgeT): string {
  *
  * `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
+ * apply here: which is the same discipline `canReschedule` follows two blocks
  * down.
  */
 function BookingLocationLine({
@@ -1331,7 +1123,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
         </div>
       </div>
 
-      {/* Diarise it — including Apple, which needs the platform's own `.ics`.
+      {/* 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"
@@ -1358,8 +1150,8 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       )}
 
       {/*
-        The action row. Both controls are drawn from the SERVER's flags —
-        `canReschedule` and `cancellation.canCancel` — never from eligibility
+        The action row. Both controls are drawn from the SERVER's flags:
+        `canReschedule` and `cancellation.canCancel`: never from eligibility
         re-derived in the browser, which would give two answers to one question.
       */}
       {error && (
@@ -1487,7 +1279,7 @@ function BookingCallEntry({ booking }: { booking: MyBooking }) {
  * Pick another time for a session already bought.
  *
  * The grid is `GET /public/coaching/products/:id/availability` over the next
- * fortnight — the same read the original purchase used, which already drops
+ * fortnight: the same read the original purchase used, which already drops
  * taken slots and hours the coach is busy on any of their services. It is not
  * filtered further here: a slot this list offers and the server then refuses
  * (two buyers racing for one hour, decided by a database EXCLUDE constraint)