@tribe-nest/forge 3.21.0 → 3.22.0

package/src/ui/styled/TicketTransfer.tsx

@@ -4,8 +4,10 @@ import {
   useCancelPassTransfer,
   useClaimPassTransfer,
   usePendingPassTransfers,
+  mergePendingTransfer,
   type PassTransfer,
 } from "../../data/queries/usePassTransfers";
+import type { MyTicketPass, MyTicketPendingTransfer } from "../../data/queries/useMyTickets";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
 
 /**
@@ -89,8 +91,24 @@ const formatWhen = (value: string | null | undefined): string | null => {
 // ── The holder's side ───────────────────────────────────────────────────────
 
 export interface TicketTransferPanelProps {
-  /** The `TN-…` pass ids on this order — `myTicketPassIds(ticket)`. */
+  /**
+   * The `TN-…` passes to draw a control for.
+   *
+   * Pass `myTicketHeldPassIds(ticket)`, not `myTicketPassIds(ticket)`: every
+   * pass-scoped endpoint resolves the current HOLDER, so a row drawn on a
+   * named guest's seat or on a ticket already claimed by somebody else could
+   * only ever answer 404.
+   */
   passIds: string[];
+  /**
+   * The pass OBJECTS, when the caller has them — `myTicketPasses(ticket)`.
+   *
+   * Only used to read each pass's `pendingTransfer`, which is how a sender sees
+   * and withdraws a transfer they started on ANOTHER DEVICE. Optional so a host
+   * on an older API build still gets the panel, falling back to this browser's
+   * own local record.
+   */
+  passes?: MyTicketPass[];
   /** Extra class(es) on the root element. */
   className?: string;
   /** Inline style merged LAST into the root element. */
@@ -105,19 +123,21 @@ export interface TicketTransferPanelProps {
  * does not emit them cannot address any pass-scoped endpoint, so an affordance
  * would only ever 404.
  *
- * The pending list comes from this browser's local record of its own sends,
- * because the transfer HISTORY endpoint is operator-only by design (it names
- * every previous holder) and nothing on `my-tickets` carries transfer state.
- * That limit is stated to the buyer rather than hidden: the recipient's email is
- * the durable copy.
+ * The pending transfer comes from the SERVER — `pendingTransfer` on each pass,
+ * narrowed by the API to a row this reader sent and still `pending`. That is
+ * what makes "withdraw" work for a sender who has since signed in somewhere
+ * else; the transfer HISTORY endpoint stays operator-only by design, because it
+ * names every previous holder. This browser's local record is kept only as a
+ * bridge across the refetch that follows a send.
  */
-export function TicketTransferPanel({ passIds, className, style }: TicketTransferPanelProps) {
+export function TicketTransferPanel({ passIds, passes, className, style }: TicketTransferPanelProps) {
   const t = useThemeTokens();
   const [openFor, setOpenFor] = useState<string | null>(null);
 
   if (passIds.length === 0) return null;
 
   const single = passIds.length === 1;
+  const byId = new Map((passes ?? []).map((pass) => [pass.id, pass]));
 
   return (
     <div
@@ -129,6 +149,7 @@ export function TicketTransferPanel({ passIds, className, style }: TicketTransfe
         <TicketTransferRow
           key={passId}
           passId={passId}
+          serverTransfer={byId.get(passId)?.pendingTransfer ?? null}
           t={t}
           showPassId={!single}
           isOpen={openFor === passId}
@@ -141,12 +162,14 @@ export function TicketTransferPanel({ passIds, className, style }: TicketTransfe
 
 function TicketTransferRow({
   passId,
+  serverTransfer,
   t,
   showPassId,
   isOpen,
   onToggle,
 }: {
   passId: string;
+  serverTransfer: MyTicketPendingTransfer | null;
   t: ResolvedThemeTokens;
   showPassId: boolean;
   isOpen: boolean;
@@ -154,7 +177,10 @@ function TicketTransferRow({
 }) {
   const send = useSendPassTransfer();
   const cancel = useCancelPassTransfer();
-  const pending = usePendingPassTransfers(passId);
+  const remembered = usePendingPassTransfers(passId);
+  // One live transfer per pass is a DATABASE guarantee, so exactly one row may
+  // ever be drawn. The server's copy wins whenever it has one.
+  const pending = mergePendingTransfer(serverTransfer, remembered);
 
   const [toEmail, setToEmail] = useState("");
   const [toName, setToName] = useState("");
@@ -207,39 +233,42 @@ function TicketTransferRow({
         </button>
       </div>
 
-      {/* A live transfer this browser sent. One per pass is a database
-          guarantee, so this is a list only because the store is one. */}
-      {pending.map((item) => {
-        const expires = formatWhen(item.expiresAt);
-        return (
-          <div
-            key={item.transferId}
-            style={{
-              marginTop: 12,
-              padding: 12,
-              borderRadius: t.cornerRadius,
-              border: `1px solid ${t.primary}4d`,
-              fontSize: 14,
-            }}
-          >
-            <div>
-              Sent to <strong>{item.toEmail}</strong>
-              {expires ? ` — the link works until ${expires}.` : "."}
-            </div>
-            <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
-              Your QR code keeps working until they claim it.
-            </div>
-            <button
-              type="button"
-              onClick={() => void onCancel(item.transferId)}
-              disabled={cancel.isPending}
-              style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
-            >
-              {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
-            </button>
+      {/* The live transfer out on this pass, from whichever device sent it. */}
+      {pending && (
+        <div
+          data-testid="pending-pass-transfer"
+          style={{
+            marginTop: 12,
+            padding: 12,
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.primary}4d`,
+            fontSize: 14,
+          }}
+        >
+          <div>
+            Sent to <strong>{pending.toEmail}</strong>
+            {formatWhen(pending.expiresAt) && pending.open
+              ? ` — the link works until ${formatWhen(pending.expiresAt)}.`
+              : "."}
+          </div>
+          <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
+            {pending.open
+              ? "Your QR code keeps working until they claim it."
+              : /* Lapsed but not yet swept. Still `pending`, still withdrawable —
+                   hiding it would leave the sender with a live row and no way to
+                   address it. */
+                "That link has expired. Withdraw it to send this ticket to someone else."}
           </div>
-        );
-      })}
+          <button
+            type="button"
+            onClick={() => void onCancel(pending.transferId)}
+            disabled={cancel.isPending}
+            style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
+          >
+            {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
+          </button>
+        </div>
+      )}
 
       {sent && (
         <p style={{ fontSize: 13, marginTop: 10 }}>

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

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { AddToCalendar } from "../AddToCalendar";
+
+/**
+ * Rendered through `react-dom/server`, which needs no DOM — same approach as
+ * `EventConfirmation.spec.tsx`.
+ *
+ * What this guards is the anchor ATTRIBUTES, because they are what actually
+ * decides whether an iPhone opens Calendar. A `webcal:` link with
+ * `target="_blank"` leaves a blank tab behind and, on several browsers, never
+ * reaches the OS handler at all; one with `download` asks to save a file from a
+ * scheme that has no file. Both are easy to add back by reflex, and neither
+ * failure is visible from a desktop.
+ */
+
+const THEME = {
+  colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" },
+  cornerRadius: 8,
+};
+
+const render = (node: React.ReactNode) =>
+  renderToStaticMarkup(<ForgeThemeProvider theme={THEME}>{node}</ForgeThemeProvider>);
+
+const ICS = "https://api.tribenest.co/public/calendar/events/abc/tok.ics";
+const WEBCAL = "webcal://api.tribenest.co/public/calendar/events/abc/tok.ics";
+
+const base = { title: "Night Show", start: "2026-03-15T20:00:00.000Z" };
+
+describe("<AddToCalendar>", () => {
+  it("draws only the three template providers when no .ics is supplied", () => {
+    const html = render(<AddToCalendar {...base} />);
+
+    expect(html).toContain("add-to-calendar-google");
+    expect(html).toContain("add-to-calendar-outlook");
+    expect(html).toContain("add-to-calendar-office365");
+    // The pre-existing behaviour, preserved for a site on an older API build:
+    // no Apple chip rather than a dead one.
+    expect(html).not.toContain("add-to-calendar-apple");
+    expect(html).not.toContain("add-to-calendar-ics");
+  });
+
+  it("adds Apple Calendar and a download once the host has the address", () => {
+    const html = render(<AddToCalendar {...base} icsUrl={ICS} webcalUrl={WEBCAL} />);
+
+    expect(html).toContain("add-to-calendar-apple");
+    expect(html).toContain(`href="${WEBCAL}"`);
+    expect(html).toContain("Apple Calendar");
+
+    expect(html).toContain("add-to-calendar-ics");
+    expect(html).toContain("Download .ics");
+  });
+
+  it("the Apple anchor is a plain same-window navigation", () => {
+    const html = render(<AddToCalendar {...base} icsUrl={ICS} webcalUrl={WEBCAL} />);
+
+    // Isolate the Apple anchor so the assertions cannot be satisfied by the
+    // Google one sitting next to it.
+    const apple = html.slice(html.indexOf('data-testid="add-to-calendar-apple"'));
+    const anchor = apple.slice(0, apple.indexOf(">"));
+
+    expect(anchor).not.toContain('target="_blank"');
+    expect(anchor).not.toContain("download");
+  });
+
+  it("the .ics anchor DOES ask to download", () => {
+    const html = render(<AddToCalendar {...base} icsUrl={ICS} webcalUrl={WEBCAL} />);
+    const ics = html.slice(html.indexOf('data-testid="add-to-calendar-ics"'));
+    expect(ics.slice(0, ics.indexOf(">"))).toContain("download");
+  });
+
+  it("still offers Apple when only the https form is passed", () => {
+    // The webcal address is derived; a host that only forwards `calendarUrl`
+    // must not lose the one option iOS can use.
+    const html = render(<AddToCalendar {...base} icsUrl={ICS} />);
+    expect(html).toContain(`href="${WEBCAL}"`);
+  });
+
+  it("renders nothing at all for an unusable start time", () => {
+    // The theme provider still emits its `:root` variables, so the assertion is
+    // that no ANCHOR was drawn — a chip pointing at a garbage prefill is worse
+    // than no chip.
+    const html = render(<AddToCalendar title="X" start="not-a-date" icsUrl={ICS} webcalUrl={WEBCAL} />);
+    expect(html).not.toContain("<a ");
+    expect(html).not.toContain("add-to-calendar");
+  });
+});

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

@@ -38,7 +38,11 @@ const baseOrder: ITicketOrder = {
 function render(order: ITicketOrder) {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   queryClient.setQueryData(["eventTicketOrderStatus", PROFILE_ID, ORDER_ID], order);
-  queryClient.setQueryData(["event", EVENT_ID, PROFILE_ID], {
+  // Four-element key: `useEvent` gained a presale `accessCode` segment, which
+  // is `null` for an ordinary read. Seeding the old three-element key left
+  // `event` undefined, which silently dropped the add-to-calendar block — the
+  // assertion below is what caught it.
+  queryClient.setQueryData(["event", EVENT_ID, PROFILE_ID, null], {
     id: EVENT_ID,
     title: "Midnight Set",
     description: "A set",

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

@@ -0,0 +1,106 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { PresaleCodeField } from "../PresaleCode";
+import type { PresaleCodeField as PresaleCodeState } from "../../headless/event/usePresaleCode";
+
+/**
+ * Events 1.2 — the box a buyer types a presale code into.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM, so these run in the
+ * package's existing node vitest environment. Effects never fire under
+ * `renderToStaticMarkup`, so the state fixture is the only data source and
+ * nothing reaches the network.
+ *
+ * This is the REAL component the Forge storefront renders, and the client app's
+ * own copy is a presentational twin driven by the same `usePresaleCode` state —
+ * so what is asserted here about WHAT IS SAID holds on both rendering stacks.
+ */
+
+function state(overrides: Partial<PresaleCodeState> = {}): PresaleCodeState {
+  return {
+    event: undefined,
+    isLoading: false,
+    visible: true,
+    input: "",
+    setInput: () => {},
+    code: null,
+    status: "idle",
+    message: null,
+    submit: () => {},
+    clear: () => {},
+    isUnlocked: false,
+    ...overrides,
+  };
+}
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+const render = (presale: PresaleCodeState) =>
+  renderToStaticMarkup(
+    <ForgeThemeProvider theme={theme}>
+      <PresaleCodeField presale={presale} />
+    </ForgeThemeProvider>,
+  );
+
+describe("PresaleCodeField", () => {
+  it("REGRESSION: renders NOTHING on an event with no coded tier", () => {
+    // The whole reason `hasCodedTiers` is a server fact. A code box on an
+    // ordinary event tells a buyer there is a secret they are missing and gives
+    // them no way to discover there isn't one.
+    const html = render(state({ visible: false }));
+    // The provider still emits its :root variables; nothing of the FIELD is there.
+    expect(html).not.toContain("presale-code");
+    expect(html).not.toContain("presale code");
+  });
+
+  it("offers the prompt and an input when a presale exists", () => {
+    const html = render(state());
+    expect(html).toContain("Have a presale code?");
+    expect(html).toContain('data-testid="presale-code-input"');
+    expect(html).toContain("Unlock");
+  });
+
+  it("disables Unlock until something is typed", () => {
+    expect(render(state())).toContain("disabled");
+    expect(render(state({ input: "PRESALE24" }))).not.toContain("disabled");
+  });
+
+  it("says the code is not valid for the EVENT, naming no tier", () => {
+    const html = render(
+      state({ code: "GUESS", status: "rejected", message: "That code isn't valid for this event." }),
+    );
+    expect(html).toContain("That code isn&#x27;t valid for this event.");
+    // A refusal that named a tier — "that isn't the VIP code" — would turn the
+    // box into a way to enumerate them.
+    expect(html.toLowerCase()).not.toContain("tier");
+    expect(html).toContain('role="alert"');
+    expect(html).toContain('aria-invalid="true"');
+  });
+
+  it("confirms an accepted code, with a way to remove it", () => {
+    // Without this, a code for a tier that was already VISIBLE (code-gated but
+    // listed) appears to do nothing at all: the tier list is unchanged.
+    const html = render(state({ code: "PRESALE24", status: "accepted", isUnlocked: true, message: "Code applied." }));
+    expect(html).toContain("Presale unlocked — PRESALE24");
+    expect(html).toContain('data-testid="presale-code-remove"');
+    // The input is gone — there is nothing left to type.
+    expect(html).not.toContain('data-testid="presale-code-input"');
+  });
+
+  it("shows a pending state while the server decides", () => {
+    const html = render(state({ code: "PRESALE24", input: "PRESALE24", status: "checking" }));
+    expect(html).toContain("Checking…");
+    // No verdict yet, so no message either way.
+    expect(html).not.toContain('data-testid="presale-code-message"');
+  });
+
+  it("takes its colours from the theme, not a hardcoded palette", () => {
+    const html = renderToStaticMarkup(
+      <ForgeThemeProvider theme={{ ...theme, colors: { ...theme.colors, primary: "#0f766e" } }}>
+        <PresaleCodeField presale={state({ code: "X", status: "accepted", isUnlocked: true })} />
+      </ForgeThemeProvider>,
+    );
+    expect(html).toContain("#0f766e");
+  });
+});

package/src/utils/_tests/presaleCode.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import {
+  readPresaleCode,
+  readPresaleCodeFromUrl,
+  subscribePresaleCode,
+  writePresaleCode,
+} from "../presaleCode";
+
+/**
+ * Events 1.2 — where a buyer's presale code lives between typing it and paying
+ * with it.
+ *
+ * This is the part that stops the feature being a toy. The sell guard
+ * re-evaluates the code on the ORDER, not just on the read that revealed the
+ * tier, so a code that does not survive from the event page to the payment step
+ * produces the worst possible outcome: the buyer unlocks a presale, fills in
+ * their details, and is refused at the card.
+ *
+ * The package's vitest environment is `node`, so `window` is stubbed here
+ * rather than assumed. That is also the point of the SSR case below — every
+ * function has to be callable with no `window` at all, because Forge renders on
+ * a Cloudflare Worker first.
+ */
+
+type Store = Record<string, string>;
+
+function stubWindow(initial: Store = {}) {
+  const store: Store = { ...initial };
+  vi.stubGlobal("window", {
+    sessionStorage: {
+      getItem: (k: string) => store[k] ?? null,
+      setItem: (k: string, v: string) => {
+        store[k] = v;
+      },
+      removeItem: (k: string) => {
+        delete store[k];
+      },
+    },
+    location: { href: "https://artist.test/events/the-show" },
+  });
+  return store;
+}
+
+// The module memoises per key, so every test uses a fresh event id.
+let n = 0;
+const key = () => `event-${++n}`;
+
+beforeEach(() => stubWindow());
+afterEach(() => vi.unstubAllGlobals());
+
+describe("presale code storage", () => {
+  it("round-trips a code for one event", () => {
+    const k = key();
+    writePresaleCode(k, "PRESALE24");
+    expect(readPresaleCode(k)).toBe("PRESALE24");
+  });
+
+  it("keeps two events' codes apart", () => {
+    // Two presales are two different codes; a shared slot would silently apply
+    // one show's code to another.
+    const a = key();
+    const b = key();
+    writePresaleCode(a, "AAA");
+    writePresaleCode(b, "BBB");
+    expect(readPresaleCode(a)).toBe("AAA");
+    expect(readPresaleCode(b)).toBe("BBB");
+  });
+
+  it("survives a reload — the whole reason it is not component state", () => {
+    const k = key();
+    const store = stubWindow();
+    writePresaleCode(k, "PRESALE24");
+    expect(store[`tn:presale:${k}`]).toBe("PRESALE24");
+
+    // A fresh page: same sessionStorage, module memory not yet primed for a key
+    // it has never seen.
+    const fresh = key();
+    stubWindow({ [`tn:presale:${fresh}`]: "FROMSTORAGE" });
+    expect(readPresaleCode(fresh)).toBe("FROMSTORAGE");
+  });
+
+  it("trims what the buyer typed", () => {
+    const k = key();
+    writePresaleCode(k, "  presale24 ");
+    expect(readPresaleCode(k)).toBe("presale24");
+  });
+
+  it("clearing removes it from storage too, not just from memory", () => {
+    const k = key();
+    const store = stubWindow();
+    writePresaleCode(k, "PRESALE24");
+    writePresaleCode(k, null);
+    expect(readPresaleCode(k)).toBeNull();
+    expect(store[`tn:presale:${k}`]).toBeUndefined();
+  });
+
+  it("an empty or whitespace code clears rather than storing blank", () => {
+    const k = key();
+    writePresaleCode(k, "PRESALE24");
+    writePresaleCode(k, "   ");
+    expect(readPresaleCode(k)).toBeNull();
+  });
+
+  it("notifies every subscriber — the page and the ticket modal are separate components", () => {
+    const k = key();
+    const seen: (string | null)[] = [];
+    const unsubscribe = subscribePresaleCode(() => seen.push(readPresaleCode(k)));
+
+    writePresaleCode(k, "PRESALE24");
+    writePresaleCode(k, null);
+    unsubscribe();
+    writePresaleCode(k, "IGNORED");
+
+    expect(seen).toEqual(["PRESALE24", null]);
+  });
+
+  it("survives storage being unavailable (private mode) without throwing", () => {
+    const k = key();
+    vi.stubGlobal("window", {
+      sessionStorage: {
+        getItem: () => {
+          throw new Error("denied");
+        },
+        setItem: () => {
+          throw new Error("denied");
+        },
+        removeItem: () => {
+          throw new Error("denied");
+        },
+      },
+      location: { href: "https://artist.test/" },
+    });
+
+    expect(() => writePresaleCode(k, "PRESALE24")).not.toThrow();
+    // Still applied for this page view — it just will not survive a reload.
+    expect(readPresaleCode(k)).toBe("PRESALE24");
+  });
+
+  it("is inert on the server, where Forge renders first", () => {
+    vi.stubGlobal("window", undefined);
+    const k = key();
+    expect(readPresaleCode(k)).toBeNull();
+    expect(readPresaleCodeFromUrl()).toBeNull();
+    expect(() => writePresaleCode(k, "PRESALE24")).not.toThrow();
+  });
+});
+
+describe("presale code on the URL", () => {
+  it("reads ?accessCode — what makes a mailed presale link work on arrival", () => {
+    vi.stubGlobal("window", {
+      sessionStorage: { getItem: () => null, setItem: () => {}, removeItem: () => {} },
+      location: { href: "https://artist.test/events/the-show?accessCode=PRESALE24" },
+    });
+    expect(readPresaleCodeFromUrl()).toBe("PRESALE24");
+  });
+
+  it("is null when the link carries no code", () => {
+    expect(readPresaleCodeFromUrl()).toBeNull();
+  });
+
+  it("ignores a blank parameter rather than applying an empty code", () => {
+    vi.stubGlobal("window", {
+      sessionStorage: { getItem: () => null, setItem: () => {}, removeItem: () => {} },
+      location: { href: "https://artist.test/events/the-show?accessCode=%20%20" },
+    });
+    expect(readPresaleCodeFromUrl()).toBeNull();
+  });
+});