@tribe-nest/forge 3.21.0 → 3.23.0

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/ui/styled/community/CommunityFeed.tsx

@@ -329,7 +329,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
           </div>
           <div style={{ fontSize: 13, color: t.muted, maxWidth: 300 }}>
             {isForum
-              ? "Kick things off — start the first discussion in this space."
+              ? "Kick things off: start the first discussion in this space."
               : "Be the first to share something with the community."}
           </div>
           <button

package/src/ui/styled/community/CommunityPostDetail.tsx

@@ -237,7 +237,7 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
       {locked ? (
         <div style={{ border, borderRadius: t.cornerRadius, padding: 14, textAlign: "center", color: t.muted, fontSize: 14 }}>
           <Lock size={13} style={{ verticalAlign: -2, marginRight: 6 }} />
-          This post is locked — replies are closed.
+          This post is locked: replies are closed.
         </div>
       ) : (
         !replyingTo && <CommunityComposer compact placeholder="Write a reply…" submitLabel="Reply" onSubmit={submitReply} />

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

@@ -0,0 +1,266 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+/**
+ * The Paystack inline checkout helper: the ONE place Forge knows the popup
+ * exists, so it is the one place these rules are enforced.
+ *
+ * What is asserted here is what a fan actually experiences:
+ *
+ * - the modal opening at all, and paying continuing down the SAME return leg
+ *   the hosted redirect used (reference and trxref on the URL, so no finalise
+ *   page has to change);
+ * - closing the popup being a retryable non-event rather than a failed order;
+ * - and the three ways the modal can fail to appear (a blocked script, a
+ *   throwing `resumeTransaction`, and a silent no-show), each ending on the
+ *   hosted page rather than on a dead button.
+ *
+ * The last of those is the one worth a test: a fan looking at a button that did
+ * nothing is a lost sale that reports no error anywhere.
+ */
+
+type ResumeOptions = {
+  onSuccess?: (t: { reference?: string; trxref?: string }) => void;
+  onCancel?: () => void;
+  onLoad?: (r: unknown) => void;
+  onError?: (e: unknown) => void;
+};
+
+/** Set per test to drive the fake popup. */
+let resumeBehaviour: (accessCode: string, options: ResumeOptions) => void = () => {};
+const resumeCalls: { accessCode: string }[] = [];
+
+// The blocked-script case gets its own file (`paystackCheckoutBlocked.spec.ts`)
+// because a `vi.mock` factory is evaluated once per module registry, so the
+// import cannot be made to fail and succeed within one file.
+vi.mock("@paystack/inline-js", () => {
+  return {
+    default: class FakePaystackPop {
+      resumeTransaction(accessCode: string, options: ResumeOptions = {}) {
+        resumeCalls.push({ accessCode });
+        resumeBehaviour(accessCode, options);
+        return {};
+      }
+      cancelTransaction() {}
+    },
+  };
+});
+
+// Imported after the mock is registered (vitest hoists `vi.mock`, so a plain
+// top-level import would be fine; this is only for readability).
+import { openPaystackCheckout, paystackReturnUrl, hasPaystackSession } from "../paystackCheckout";
+
+const HOSTED = "https://checkout.paystack.com/abc123";
+const RETURN = "https://artist.test/checkout/finalise?orderId=order-1";
+
+/** jsdom refuses real navigation, so `location` is replaced with a plain bag. */
+let location: { href: string };
+
+const addPaystackIframe = () => {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("src", "https://checkout.paystack.com/frame");
+  document.body.appendChild(iframe);
+};
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  resumeCalls.length = 0;
+  resumeBehaviour = () => {};
+  document.body.innerHTML = "";
+  location = { href: "https://artist.test/checkout" };
+  Object.defineProperty(window, "location", { value: location, writable: true, configurable: true });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("paystackReturnUrl", () => {
+  it("appends the reference the hosted redirect would have carried", () => {
+    const url = paystackReturnUrl(RETURN, { reference: "pay-uuid" });
+    expect(url).toContain("orderId=order-1");
+    expect(url).toContain("reference=pay-uuid");
+    expect(url).toContain("trxref=pay-uuid");
+  });
+
+  it("falls back to trxref when only that is reported", () => {
+    expect(paystackReturnUrl(RETURN, { trxref: "pay-uuid" })).toContain("reference=pay-uuid");
+  });
+
+  it("returns the URL untouched when no reference came back", () => {
+    expect(paystackReturnUrl(RETURN, {})).toBe(RETURN);
+  });
+});
+
+describe("hasPaystackSession", () => {
+  it("is true for an access code, true for a hosted URL alone, false for neither", () => {
+    expect(hasPaystackSession({ accessCode: "ac" })).toBe(true);
+    expect(hasPaystackSession({ checkoutUrl: HOSTED })).toBe(true);
+    expect(hasPaystackSession({})).toBe(false);
+    expect(hasPaystackSession(null)).toBe(false);
+  });
+});
+
+describe("openPaystackCheckout", () => {
+  it("opens the modal and, on success, continues down the redirect's own return leg", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onSuccess?.({ reference: "pay-uuid" });
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("succeeded");
+    expect(resumeCalls).toEqual([{ accessCode: "ac_1" }]);
+    // The fan stayed on the creator's site right up until the finalise page.
+    expect(location.href).toContain("/checkout/finalise");
+    expect(location.href).toContain("reference=pay-uuid");
+  });
+
+  it("hands success to the caller instead of navigating when it finalizes in place", async () => {
+    const onSuccess = vi.fn();
+    resumeBehaviour = (_code, options) => options.onSuccess?.({ reference: "pay-uuid" });
+
+    const outcome = await openPaystackCheckout(
+      { accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN },
+      { onSuccess },
+    );
+
+    expect(outcome).toBe("succeeded");
+    expect(onSuccess).toHaveBeenCalledWith({ reference: "pay-uuid" });
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+
+  it("treats a dismissal as retryable: no navigation, no error, and the same code opens again", async () => {
+    const onError = vi.fn();
+    const onDismiss = vi.fn();
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onCancel?.();
+    };
+
+    const first = await openPaystackCheckout(
+      { accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN },
+      { onDismiss, onError },
+    );
+
+    expect(first).toBe("dismissed");
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    // A closed popup is not a failure: nothing is reported and nothing moves.
+    expect(onError).not.toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+
+    // ... and the very same session opens again on the next click.
+    resumeBehaviour = (_code, options) => options.onSuccess?.({ reference: "pay-uuid" });
+    const second = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    expect(second).toBe("succeeded");
+    expect(resumeCalls).toEqual([{ accessCode: "ac_1" }, { accessCode: "ac_1" }]);
+  });
+
+  it("reports a genuine provider failure as failed, without redirecting", async () => {
+    const onError = vi.fn();
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onError?.({ message: "Card declined" });
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED }, { onError });
+
+    expect(outcome).toBe("failed");
+    expect(onError).toHaveBeenCalledWith("Card declined");
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+
+  it("falls back to the hosted page when resumeTransaction throws", async () => {
+    resumeBehaviour = () => {
+      throw new Error("popup blew up");
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("falls back to the hosted page when the modal never appears", async () => {
+    // No onLoad, no iframe: exactly what a silently-blocked popup looks like.
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("does NOT redirect when the modal is up but the fan is still deciding", async () => {
+    let captured: ResumeOptions = {};
+    resumeBehaviour = (_code, options) => {
+      captured = options;
+      addPaystackIframe();
+    };
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(6000);
+    // The watchdog has long since fired; the iframe is what stops it acting.
+    expect(location.href).toBe("https://artist.test/checkout");
+
+    captured.onSuccess?.({ reference: "pay-uuid" });
+    expect(await pending).toBe("succeeded");
+    expect(location.href).toContain("reference=pay-uuid");
+  });
+
+  /**
+   * The two ways the modal-present check used to say yes when the fan was
+   * looking at nothing. Both suppress the hosted-page fallback, which is the
+   * only thing standing between that fan and a dead button.
+   */
+  it("still falls back when a DISMISSED modal's iframe is hidden rather than removed", async () => {
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("src", "https://checkout.paystack.com/frame");
+    iframe.style.display = "none";
+    document.body.appendChild(iframe);
+
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("still falls back when an unrelated iframe merely mentions paystack in its src", async () => {
+    // A third-party frame echoing the current page URL back in its own src is
+    // enough to match `iframe[src*="paystack"]` on any paystack-ish host.
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("src", "https://metrics.example.com/p?ref=https://paystack.artist.test/checkout");
+    document.body.appendChild(iframe);
+
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("goes straight to the hosted page when there is no access code to resume", async () => {
+    const outcome = await openPaystackCheckout({ checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+    expect(resumeCalls).toEqual([]);
+  });
+
+  it("reports unavailable, and never navigates, when there is no session at all", async () => {
+    const onError = vi.fn();
+
+    const outcome = await openPaystackCheckout({}, { onError });
+
+    expect(outcome).toBe("unavailable");
+    expect(onError).toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+});

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

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+/**
+ * The blocked-script case, in its own file because a `vi.mock` factory is
+ * evaluated once per module registry: the import cannot both fail and succeed
+ * inside one spec file.
+ *
+ * This is the headline reason the Paystack bundle is loaded lazily rather than
+ * imported at the top of the module: a CSP, an ad blocker, an offline chunk or
+ * a corporate proxy takes the popup away, and the fan must still be able to pay
+ * on the hosted page instead of the whole page failing to render.
+ */
+
+vi.mock("@paystack/inline-js", () => {
+  throw new Error("chunk load failed");
+});
+
+import { openPaystackCheckout } from "../paystackCheckout";
+
+const HOSTED = "https://checkout.paystack.com/abc123";
+
+let location: { href: string };
+
+beforeEach(() => {
+  location = { href: "https://artist.test/checkout" };
+  Object.defineProperty(window, "location", { value: location, writable: true, configurable: true });
+});
+
+describe("openPaystackCheckout when the inline script cannot load", () => {
+  it("sends the fan to the hosted page rather than dead-ending them", async () => {
+    const outcome = await openPaystackCheckout({
+      accessCode: "ac_1",
+      checkoutUrl: HOSTED,
+      returnUrl: "https://artist.test/checkout/finalise?orderId=order-1",
+    });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("reports the failure instead of navigating when there is no hosted URL to fall back to", async () => {
+    const onError = vi.fn();
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1" }, { onError });
+
+    expect(outcome).toBe("unavailable");
+    expect(onError).toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+});