@tribe-nest/forge 3.14.0 → 3.19.0

package/src/ui/styled/InvoicePayment.tsx

@@ -1,13 +1,14 @@
 import { useInvoicePayment } from "../headless/invoice/useInvoicePayment";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
-import { useAmountFormatter } from "../format/useFormatCurrency";
+import { getCurrencySymbol } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
 
 export interface InvoicePaymentProps {
   invoiceId: string;
-  /** Currency formatter (e.g. `(n) => formatCurrency(n, CURRENCY)`). Falls back to the invoice's own currency. */
+  /** Optional presentation override. Left unset, amounts render in the
+   *  invoice's OWN currency, unconverted — see `money` below. */
   formatAmount?: (n: number) => string;
   /** Return path after payment. Forwarded to `useInvoicePayment`. */
   returnPath?: string;
@@ -24,7 +25,6 @@ const formatDate = (value: string | number | Date): string =>
  */
 export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
   const theme = useForgeTheme();
-  const fmt = useAmountFormatter(formatAmount);
   const renderPayment = usePaymentRenderer();
   const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote } = useInvoicePayment(invoiceId, {
     returnPath,
@@ -35,7 +35,27 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
 
   const inv = invoice.data;
   const isPaid = inv.status === "paid" || !!inv.paidAt;
-  const money = (n: number) => fmt(n, inv.currency);
+  /**
+   * An invoice is a DEBT of a stated amount in a stated currency, not a price
+   * list — so it must show what the client owes, in the currency they owe it
+   * in, and never a converted approximation.
+   *
+   * This used to run every figure through the storefront formatter, whose job
+   * is to convert a tenant-currency price into whatever currency the VISITOR
+   * has selected. On an invoice that turned a £120.00 bill into "$159.91" —
+   * a different number, in a different currency, from both the document the
+   * client was emailed and the amount the pay link actually charges.
+   *
+   * `formatAmount` is still honoured for a caller that wants its own
+   * presentation; it just is not the storefront converter any more.
+   */
+  const money = (n: number) =>
+    formatAmount
+      ? formatAmount(n)
+      : `${getCurrencySymbol(inv.currency)}${Number(Number(n).toFixed(2)).toLocaleString("en-US", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`;
 
   const handleDownload = async () => {
     const blob = await downloadPdf.mutateAsync();
@@ -72,15 +92,33 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
       </div>
 
       <div style={{ fontSize: 14, opacity: 0.85, marginBottom: 16 }}>
-        <div>Billed to: {inv.clientName}{inv.clientCompany ? ` · ${inv.clientCompany}` : ""}</div>
-        <div>Issued: {formatDate(inv.issueDate)}{inv.dueDate ? ` · Due: ${formatDate(inv.dueDate)}` : ""}</div>
+        <div>
+          Billed to: {inv.clientName}
+          {inv.clientCompany ? ` · ${inv.clientCompany}` : ""}
+        </div>
+        <div>
+          Issued: {formatDate(inv.issueDate)}
+          {inv.dueDate ? ` · Due: ${formatDate(inv.dueDate)}` : ""}
+        </div>
       </div>
 
-      <div style={{ border: `1px solid ${theme.colors.primary}20`, borderRadius: theme.cornerRadius, overflow: "hidden", marginBottom: 16 }}>
+      <div
+        style={{
+          border: `1px solid ${theme.colors.primary}20`,
+          borderRadius: theme.cornerRadius,
+          overflow: "hidden",
+          marginBottom: 16,
+        }}
+      >
         {inv.lineItems.map((li) => (
           <div
             key={li.id}
-            style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `1px solid ${theme.colors.primary}10` }}
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              padding: "10px 14px",
+              borderBottom: `1px solid ${theme.colors.primary}10`,
+            }}
           >
             <span>
               {li.description}
@@ -94,7 +132,15 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
           // columns (no re-quote) — surfaced via the start-payment taxQuote.
           const taxSummary = summarizeTaxQuote(taxQuote, money);
           return taxSummary?.mode === "exclusive" ? (
-            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `1px solid ${theme.colors.primary}10`, opacity: 0.8 }}>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                padding: "10px 14px",
+                borderBottom: `1px solid ${theme.colors.primary}10`,
+                opacity: 0.8,
+              }}
+            >
               <span>Tax</span>
               <span>{taxSummary.formattedTax}</span>
             </div>
@@ -107,7 +153,9 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
             {(() => {
               const taxSummary = summarizeTaxQuote(taxQuote, money);
               return taxSummary?.mode === "inclusive" ? (
-                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+                <span
+                  style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}
+                >
                   {taxSummary.label}
                 </span>
               ) : null;
@@ -132,7 +180,13 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
               mode: "redirect",
             })
           ) : (
-            <>{isStarting ? <Loading label="Preparing payment…" size={22} /> : <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>}</>
+            <>
+              {isStarting ? (
+                <Loading label="Preparing payment…" size={22} />
+              ) : (
+                <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>
+              )}
+            </>
           )}
         </div>
       )}

package/src/ui/styled/ProductDetail.tsx

@@ -112,6 +112,14 @@ function useBuy(product: IPublicProduct, cover: string | undefined, checkoutPath
       quantity: opts?.quantity ?? 1,
       canIncreaseQuantity: opts?.canIncreaseQuantity ?? true,
       payWhatYouWant: !!variant.payWhatYouWant,
+      // Which version was chosen, carried onto the line so the cart, the
+      // checkout and the receipt can all say so. `color`/`size` stay for a
+      // moment longer: they are what a cart saved before this holds.
+      options: (variant.options ?? []).map((option) => ({
+        axis: option.axis,
+        value: option.value,
+        swatchHex: option.swatchHex,
+      })),
       color: variant.color,
       size: variant.size,
       deliveryType: variant.deliveryType,

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

@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { rememberBookingSecret, readBookingSecret, forgetBookingSecret } from "../bookingSecret";
+
+// A tiny in-memory `sessionStorage`. The real one isn't available in a node
+// environment, and half the behaviour under test is precisely what happens when
+// it is and isn't there.
+function fakeStorage(): Storage {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    key: (i: number) => Array.from(map.keys())[i] ?? null,
+    getItem: (k: string) => map.get(k) ?? null,
+    setItem: (k: string, v: string) => void map.set(k, v),
+    removeItem: (k: string) => void map.delete(k),
+    clear: () => map.clear(),
+  } as Storage;
+}
+
+const g = globalThis as unknown as { window?: unknown };
+
+function withStorage(storage: Storage | null) {
+  g.window = storage
+    ? { sessionStorage: storage }
+    : {
+        get sessionStorage(): Storage {
+          // What a browser does when storage is blocked (private mode, or a
+          // cookie policy that denies it) — a throwing getter, not undefined.
+          throw new Error("access denied");
+        },
+      };
+}
+
+const SECRET_A = "a".repeat(64);
+const SECRET_B = "b".repeat(64);
+
+describe("booking secret storage", () => {
+  afterEach(() => {
+    delete g.window;
+    vi.restoreAllMocks();
+  });
+
+  describe("with storage", () => {
+    let storage: Storage;
+    beforeEach(() => {
+      storage = fakeStorage();
+      withStorage(storage);
+    });
+
+    it("round-trips a secret for its booking", () => {
+      rememberBookingSecret("booking-1", SECRET_A);
+      expect(readBookingSecret("booking-1")).toBe(SECRET_A);
+    });
+
+    it("keys by bookingId so two checkouts in one tab don't clobber each other", () => {
+      // A buyer can have a course and a coaching checkout open at once. A single
+      // shared key would leave one of them holding the other's credential, and
+      // the secret is unrecoverable once overwritten.
+      rememberBookingSecret("booking-1", SECRET_A);
+      rememberBookingSecret("booking-2", SECRET_B);
+      expect(readBookingSecret("booking-1")).toBe(SECRET_A);
+      expect(readBookingSecret("booking-2")).toBe(SECRET_B);
+    });
+
+    it("returns null for a booking it never stored, and for no booking at all", () => {
+      expect(readBookingSecret("unknown")).toBeNull();
+      expect(readBookingSecret(undefined)).toBeNull();
+      expect(readBookingSecret(null)).toBeNull();
+    });
+
+    it("ignores a missing secret rather than storing an empty credential", () => {
+      // The backend omits the field for grandfathered bookings. Writing "" here
+      // would later read back as a present-but-wrong secret.
+      rememberBookingSecret("booking-1", undefined);
+      rememberBookingSecret("booking-2", null);
+      rememberBookingSecret("booking-3", "");
+      expect(readBookingSecret("booking-1")).toBeNull();
+      expect(readBookingSecret("booking-2")).toBeNull();
+      expect(readBookingSecret("booking-3")).toBeNull();
+      expect(storage.length).toBe(0);
+    });
+
+    it("forgets one booking without touching the others", () => {
+      rememberBookingSecret("booking-1", SECRET_A);
+      rememberBookingSecret("booking-2", SECRET_B);
+      forgetBookingSecret("booking-1");
+      expect(readBookingSecret("booking-1")).toBeNull();
+      expect(readBookingSecret("booking-2")).toBe(SECRET_B);
+    });
+
+    it("does not put the secret under a guessable bare-id key", () => {
+      // Namespacing keeps it out of the way of anything else the host site
+      // keeps in sessionStorage under the raw booking id.
+      rememberBookingSecret("booking-1", SECRET_A);
+      expect(storage.getItem("booking-1")).toBeNull();
+    });
+  });
+
+  describe("without storage", () => {
+    it("degrades quietly when storage throws — a live checkout must not break", () => {
+      withStorage(null);
+      expect(() => rememberBookingSecret("booking-1", SECRET_A)).not.toThrow();
+      expect(readBookingSecret("booking-1")).toBeNull();
+      expect(() => forgetBookingSecret("booking-1")).not.toThrow();
+    });
+
+    it("degrades quietly during SSR, where there is no window at all", () => {
+      delete g.window;
+      expect(() => rememberBookingSecret("booking-1", SECRET_A)).not.toThrow();
+      expect(readBookingSecret("booking-1")).toBeNull();
+      expect(() => forgetBookingSecret("booking-1")).not.toThrow();
+    });
+  });
+});

package/src/utils/bookingSecret.ts

@@ -0,0 +1,100 @@
+// Per-booking checkout credential, held across the payment-provider redirect.
+//
+// ## What this is
+//
+// Course and coaching bookings used to be addressable by their id alone. That
+// id is a random uuid but it is NOT a secret: it rides in the finalise URL, so
+// it reaches browser history, `Referer` headers, shared links and support
+// screenshots. Anyone who learned one could move the purchase onto their own
+// address. The backend now mints a per-booking secret when the booking is
+// created and requires it on `booking/update`, `start-payment` and `finalize`.
+//
+// ## Why sessionStorage, and NOT the URL
+//
+// The confirmation page is reached by a redirect back from Stripe/Paystack, so
+// every bit of in-memory React state is gone by the time it renders. `bookingId`
+// survives that because it is a query param on the return URL — and that is
+// exactly the leak the secret exists to close, so the secret must not travel the
+// same way. It also rules out anything the server sees: a query param is logged,
+// a cookie is sent on every request to the origin.
+//
+// `sessionStorage` is the narrowest thing that still survives a full-page
+// navigation: same tab, same origin, unreadable by another site, never
+// transmitted, and destroyed when the tab closes. A discarded checkout does not
+// outlive the session that started it, which matches the lifetime of the secret
+// itself. `localStorage` would persist a live purchase credential on a shared
+// machine indefinitely, for no benefit — the redirect never leaves the tab.
+//
+// Keyed by bookingId so two checkouts open in the same tab (a course and a
+// coaching session, or two courses in sequence) cannot overwrite each other's
+// credential.
+//
+// ## The secret is returned exactly once
+//
+// The raw value comes back only from the call that CREATES the booking and can
+// never be re-read. If it is lost, that booking is unreachable and the buyer
+// must start again — which is why every write here is best-effort but every
+// read is treated as load-bearing by the callers.
+
+const KEY_PREFIX = "tn:booking_secret:";
+
+function safeStorage(): Storage | null {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage;
+  } catch {
+    // Private mode / storage disabled by policy.
+    return null;
+  }
+}
+
+const keyFor = (bookingId: string) => `${KEY_PREFIX}${bookingId}`;
+
+/**
+ * Persist the secret for `bookingId`. Call this the moment a booking is created
+ * — the value is never returned again.
+ *
+ * Best-effort: a storage failure (quota, disabled storage) must not break the
+ * checkout that is already in flight. The in-memory copy carries the rest of
+ * THIS page's calls; only the post-redirect leg degrades, and that surfaces as
+ * the "we lost track of your checkout" path rather than a bare not-found.
+ */
+export function rememberBookingSecret(bookingId: string, secret?: string | null): void {
+  if (!bookingId || !secret) return;
+  const storage = safeStorage();
+  if (!storage) return;
+  try {
+    storage.setItem(keyFor(bookingId), secret);
+  } catch {
+    // See above — never throw into a live checkout.
+  }
+}
+
+/** The stored secret for `bookingId`, or null when it was never stored / is gone. */
+export function readBookingSecret(bookingId?: string | null): string | null {
+  if (!bookingId) return null;
+  const storage = safeStorage();
+  if (!storage) return null;
+  try {
+    return storage.getItem(keyFor(bookingId));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Drop the secret for a booking that no longer exists (e.g. a released coaching
+ * hold). Deliberately NOT called on a successful finalise: that page is
+ * idempotent and gets reloaded and polled, and clearing the credential would
+ * turn a refresh into a not-found.
+ */
+export function forgetBookingSecret(bookingId?: string | null): void {
+  if (!bookingId) return;
+  const storage = safeStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(keyFor(bookingId));
+  } catch {
+    // Nothing to clear.
+  }
+}