@tribe-nest/forge 3.2.0 → 3.9.0

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

@@ -0,0 +1,272 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { DiscountCodeField, DiscountSummaryLines } from "../DiscountCode";
+import type { CouponField } from "../../headless/coupon/useCouponField";
+import type { PillarDiscountQuote } from "../../../types/models";
+
+/**
+ * Rendered through `react-dom/server`, which needs no DOM — so these run in the
+ * package's existing node vitest environment with no new dependency and no
+ * jsdom project. Effects never fire under `renderToStaticMarkup`, so the
+ * `CouponField` fixture is the only data source and nothing reaches the network.
+ *
+ * `DiscountCodeField` and `DiscountSummaryLines` are the REAL components every
+ * ticket, booking, course and (client-app) checkout renders, so these assertions
+ * are about shipped behaviour, not a harness.
+ */
+
+const fmt = (n: number) => `$${n.toFixed(2)}`;
+
+/** A `CouponField` in a given state. The setters are inert — nothing clicks here. */
+function field(overrides: Partial<CouponField> = {}): CouponField {
+  const quote = overrides.quote ?? null;
+  return {
+    code: "",
+    setCode: () => {},
+    submittedCode: undefined,
+    showInput: false,
+    setShowInput: () => {},
+    error: null,
+    setError: () => {},
+    isApplying: false,
+    quote,
+    appliedCoupons: quote?.appliedCoupons ?? [],
+    discountAmount: quote?.discountAmount ?? 0,
+    hasDiscount: (quote?.discountAmount ?? 0) > 0,
+    apply: async () => {},
+    remove: async () => {},
+    record: () => {},
+    fail: () => {},
+    reset: () => {},
+    canQuote: true,
+    ...overrides,
+  };
+}
+
+/** What the server returns once SUMMER10 has been applied to a $50 course. */
+const appliedQuote: PillarDiscountQuote = {
+  subTotal: 50,
+  totalAmount: 42.5,
+  discountAmount: 7.5,
+  couponId: "coupon-1",
+  appliedCoupons: [{ code: "SUMMER10", discountKind: "simple", discountAmount: 7.5 }],
+};
+
+/** The undiscounted answer — what `remove()` puts back. */
+const clearedQuote: PillarDiscountQuote = {
+  subTotal: 50,
+  totalAmount: 50,
+  discountAmount: 0,
+  couponId: null,
+  appliedCoupons: [],
+};
+
+/** The summary as every checkout composes it: the lines, then the total. */
+function summary(coupon: CouponField, total: number) {
+  return renderToStaticMarkup(
+    <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <div>
+        <DiscountSummaryLines
+          subTotal={coupon.quote?.subTotal ?? total}
+          discountAmount={coupon.discountAmount}
+          appliedCoupons={coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        <div>
+          <span>Total</span>
+          <span>{fmt(total)}</span>
+        </div>
+      </div>
+    </ForgeThemeProvider>,
+  );
+}
+
+function input(coupon: CouponField, props: Partial<{ mode: "quote" | "deferred"; disabled: boolean }> = {}) {
+  return renderToStaticMarkup(
+    <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <DiscountCodeField coupon={coupon} fmt={fmt} {...props} />
+    </ForgeThemeProvider>,
+  );
+}
+
+/** The markup carries HTML entities for the minus sign — normalise. */
+const plain = (html: string) => html.replace(/&#x2212;|&minus;/g, "−");
+
+describe("discount code — applying a valid code", () => {
+  const applied = field({ quote: appliedQuote, code: "SUMMER10", showInput: true });
+
+  it("shows a Discount LINE and the reduced total, not just a smaller number", () => {
+    const html = plain(summary(applied, appliedQuote.totalAmount));
+
+    // The line the whole feature exists for.
+    expect(html).toContain('data-testid="discount-line"');
+    expect(html).toContain("−$7.50");
+    // …with the subtotal beside it, so the buyer can see what it came off.
+    expect(html).toContain("Subtotal");
+    expect(html).toContain("$50.00");
+    // …and the reduced total.
+    expect(html).toContain("$42.50");
+    // The arithmetic on screen is the SERVER's and is self-consistent.
+    expect(appliedQuote.subTotal - appliedQuote.discountAmount).toBe(appliedQuote.totalAmount);
+  });
+
+  it("names the code that produced the discount", () => {
+    expect(plain(summary(applied, appliedQuote.totalAmount))).toContain("Discount (SUMMER10)");
+  });
+
+  it("shows the applied code with what it saved, and a way to remove it", () => {
+    const html = input(applied);
+    expect(html).toContain('data-testid="discount-code-applied"');
+    expect(html).toContain("SUMMER10");
+    expect(html).toContain("$7.50 off");
+    expect(html).toContain('data-testid="discount-code-remove"');
+    // The prompt is gone once something is applied.
+    expect(html).not.toContain('data-testid="discount-code-open"');
+  });
+});
+
+describe("discount code — an AUTOMATIC (no-code) discount", () => {
+  // The buyer typed nothing. Without this, the only evidence is a total that
+  // silently shrank.
+  const auto = field({
+    quote: {
+      subTotal: 50,
+      totalAmount: 45,
+      discountAmount: 5,
+      couponId: "coupon-auto",
+      appliedCoupons: [{ code: "AUTUMN", discountKind: "simple", discountAmount: 5 }],
+    },
+  });
+
+  it("is shown as applied even though the input was never opened", () => {
+    const html = input(auto);
+    expect(html).toContain('data-testid="discount-code-applied"');
+    expect(html).toContain("AUTUMN");
+    expect(html).toContain("$5.00 off");
+    expect(html).not.toContain('data-testid="discount-code-input"');
+  });
+
+  it("gets its own discount line", () => {
+    const html = plain(summary(auto, 45));
+    expect(html).toContain('data-testid="discount-line"');
+    expect(html).toContain("Discount (AUTUMN)");
+    expect(html).toContain("−$5.00");
+  });
+});
+
+describe("discount code — a rejected code", () => {
+  it("shows the API's own reason, not a generic 'invalid code'", () => {
+    // Exactly what `errors.coupon.min_order_value_not_met` renders to in `en`.
+    const html = input(
+      field({ code: "SUMMER10", showInput: true, error: "Your order does not reach this coupon's minimum spend" }),
+    );
+
+    expect(html).toContain('data-testid="discount-code-error"');
+    expect(html).toContain("Your order does not reach this coupon");
+    expect(html).toContain("minimum spend");
+    // The generic copy that would have thrown that reason away.
+    expect(html.toLowerCase()).not.toContain("invalid coupon code");
+    expect(html.toLowerCase()).not.toContain("invalid code");
+  });
+
+  it("carries each distinct reason through verbatim", () => {
+    for (const reason of [
+      "This coupon has expired",
+      "You have already used this coupon the maximum number of times",
+      "This coupon is only available to members of a specific tier",
+      "This coupon does not apply to anything in this order",
+    ]) {
+      expect(input(field({ code: "X", showInput: true, error: reason }))).toContain(reason);
+    }
+  });
+
+  it("does not record a discount for a code that was refused", () => {
+    // The total must keep matching the server: a refused code leaves the
+    // previous (here: absent) quote standing.
+    const html = plain(summary(field({ code: "X", showInput: true, error: "This coupon has expired" }), 50));
+    expect(html).not.toContain('data-testid="discount-line"');
+    expect(html).toContain("$50.00");
+  });
+});
+
+describe("discount code — removing a code", () => {
+  it("restores the original total and drops the discount line", () => {
+    // The state after `remove()` re-quoted with no code.
+    const html = plain(summary(field({ quote: clearedQuote }), clearedQuote.totalAmount));
+
+    expect(html).not.toContain('data-testid="discount-line"');
+    expect(html).not.toContain('data-testid="discount-summary"');
+    expect(html).toContain("$50.00");
+    expect(html).not.toContain("$42.50");
+    expect(clearedQuote.totalAmount).toBe(appliedQuote.subTotal);
+  });
+
+  it("puts the 'have a code?' prompt back", () => {
+    const html = input(field({ quote: clearedQuote }));
+    expect(html).toContain('data-testid="discount-code-open"');
+    expect(html).toContain("Have a discount code?");
+    expect(html).not.toContain('data-testid="discount-code-applied"');
+  });
+});
+
+describe("discount code — a checkout with no code (regression)", () => {
+  it("adds NOTHING to the summary", () => {
+    // The only thing inserted into every existing order summary is
+    // <DiscountSummaryLines>, and with no discount it must render nothing at
+    // all — so an undiscounted checkout looks exactly as it did before.
+    const html = renderToStaticMarkup(
+      <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+        <DiscountSummaryLines subTotal={50} discountAmount={0} fmt={fmt} />
+      </ForgeThemeProvider>,
+    );
+    // Only the provider's own theme <style> — the component itself emits nothing.
+    expect(html.replace(/<style>[\s\S]*?<\/style>/, "")).toBe("");
+  });
+
+  it("offers only a collapsed prompt — no input, no error, no applied block", () => {
+    const html = input(field());
+    expect(html).toContain('data-testid="discount-code-open"');
+    expect(html).not.toContain('data-testid="discount-code-input"');
+    expect(html).not.toContain('data-testid="discount-code-error"');
+    expect(html).not.toContain('data-testid="discount-code-applied"');
+  });
+
+  it("renders the untouched total", () => {
+    expect(plain(summary(field(), 50))).toContain("$50.00");
+  });
+});
+
+describe("discount code — the two apply modes", () => {
+  it("offers an Apply button where the pillar can really re-quote", () => {
+    const html = input(field({ showInput: true, code: "X" }), { mode: "quote" });
+    expect(html).toContain('data-testid="discount-code-apply"');
+    expect(html).not.toContain("applied at the next step");
+  });
+
+  it("offers no Apply button where the code can only be redeemed by the next call", () => {
+    // Tickets and bundles: `POST …/orders` and `POST /public/checkouts` CREATE
+    // the record, so there is nothing to press that would price a code without
+    // leaving a real abandoned order behind.
+    const html = input(field({ showInput: true, code: "X" }), { mode: "deferred" });
+    expect(html).not.toContain('data-testid="discount-code-apply"');
+    expect(html).toContain("Your code is applied at the next step.");
+  });
+
+  it("freezes once the code can no longer be changed", () => {
+    // A created bundle: the code was consumed by the call that made it.
+    const html = input(field({ quote: appliedQuote }), { disabled: true });
+    expect(html).toContain('data-testid="discount-code-applied"');
+    expect(html).toContain("SUMMER10");
+    expect(html).not.toContain('data-testid="discount-code-remove"');
+    expect(html).not.toContain('data-testid="discount-code-open"');
+  });
+
+  it("hides Remove for a pillar that cannot un-apply in place", () => {
+    // Event tickets expose their own "Remove discount" on the payment step,
+    // which restarts the order; the field itself must not pretend otherwise.
+    const html = input(field({ quote: appliedQuote, canQuote: false }));
+    expect(html).toContain('data-testid="discount-code-applied"');
+    expect(html).not.toContain('data-testid="discount-code-remove"');
+  });
+});

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

@@ -0,0 +1,154 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { EventConfirmation } from "../EventConfirmation";
+import { OrderStatus, type ITicketOrder } from "../../../types/models";
+
+/**
+ * Rendered through `react-dom/server`, which needs no DOM — so these run in the
+ * package's existing node vitest environment with no new dependency and no
+ * jsdom project. Effects never fire under `renderToStaticMarkup`, so the seeded
+ * query cache is the only data source and nothing reaches the network.
+ */
+
+const PROFILE_ID = "profile-1";
+const ORDER_ID = "order-1";
+const EVENT_ID = "event-1";
+
+const baseOrder: ITicketOrder = {
+  id: "0f9c8b7a-1111-2222-3333-444455556666",
+  items: [{ id: "item-1", eventTicketId: "ticket-1", quantity: 2, price: 12.5, title: "General Admission" }],
+  firstName: "Ada",
+  lastName: "Lovelace",
+  email: "ada@example.com",
+  totalAmount: 25,
+  currency: "USD",
+  status: OrderStatus.Paid,
+  customerName: "Ada Lovelace",
+  customerEmail: "ada@example.com",
+  createdAt: "2026-07-01T10:00:00.000Z",
+  updatedAt: "2026-07-01T10:00:00.000Z",
+  eventTitle: "Midnight Set",
+  questionnaire: [],
+};
+
+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], {
+    id: EVENT_ID,
+    title: "Midnight Set",
+    description: "A set",
+    type: "virtual",
+    status: "published",
+    dateTime: "2026-09-01T20:00:00.000Z",
+    endDateTime: "2026-09-01T23:00:00.000Z",
+    timezone: "UTC",
+  });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD" } as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <EventConfirmation slug={EVENT_ID} orderId={ORDER_ID} formatAmount={(n) => `$${n.toFixed(2)}`} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+/** The markup carries HTML entities for the curly apostrophes — normalise. */
+const plain = (html: string) => html.replace(/&#x27;|&#39;/g, "'").replace(/’/g, "'");
+
+describe("EventConfirmation — refunded vs abandoned", () => {
+  it("greets a refund-voided order with refunded copy, not 'order not completed'", () => {
+    const html = plain(
+      render({
+        ...baseOrder,
+        status: OrderStatus.Cancelled,
+        refundedAmountCents: "2500",
+        refundState: "full",
+      }),
+    );
+
+    expect(html).toContain("This order was refunded");
+    expect(html).toContain("bank or card issuer");
+    expect(html).toContain("will not admit entry");
+    expect(html).toContain("Refunded");
+
+    // The three things that were false for this buyer.
+    expect(html).not.toContain("Order not completed");
+    expect(html).not.toContain("contact support");
+    expect(html).not.toContain("If you were charged");
+    // ...and it must not congratulate them either.
+    expect(html).not.toContain("You're going!");
+
+    // The money line tells the truth about which direction it went.
+    expect(html).toContain("Total refunded");
+    expect(html).not.toContain("Total paid");
+
+    // Nothing that reads as a still-valid ticket: no scannable pass is rendered
+    // on this surface at all (the QR only ever lived in the emailed PDF), and
+    // the "add to calendar" prompt is paid-only.
+    expect(html.toLowerCase()).not.toContain("qr");
+    expect(html).not.toContain('data-testid="add-to-calendar"');
+    expect(html).not.toContain("E-Ticket");
+  });
+
+  it("still shows the existing 'not completed' copy for an abandoned checkout", () => {
+    // Regression guard. This path is unchanged and must stay: for a buyer who
+    // never paid, "order not completed / if you were charged, contact support"
+    // is the correct thing to say.
+    const html = plain(
+      render({
+        ...baseOrder,
+        status: OrderStatus.Cancelled,
+        refundedAmountCents: 0,
+        refundState: "none",
+      }),
+    );
+
+    expect(html).toContain("Order not completed");
+    expect(html).toContain("If you were charged, contact support.");
+    expect(html).toContain("Total"); // bare "Total", not "Total paid"
+    expect(html).not.toContain("Total paid");
+    expect(html).not.toContain("This order was refunded");
+    expect(html).not.toContain("Total refunded");
+  });
+
+  it("is unchanged for a paid order", () => {
+    const html = plain(render(baseOrder));
+
+    expect(html).toContain("You're going!");
+    expect(html).toContain("E-Ticket");
+    expect(html).toContain("We've sent your tickets to ada@example.com.");
+    expect(html).toContain("Total paid");
+    // Pins the "add to calendar" affordance as really present on the paid path,
+    // so its absence in the refunded case above is a meaningful assertion.
+    expect(html).toContain('data-testid="add-to-calendar"');
+    expect(html).not.toContain("This order was refunded");
+    expect(html).not.toContain("Order not completed");
+  });
+
+  it("keeps a partially refunded but still-valid order on the paid copy", () => {
+    // A partial refund voids nothing, so the pass still admits entry.
+    const html = plain(render({ ...baseOrder, refundedAmountCents: "500", refundState: "partial" }));
+
+    expect(html).toContain("You're going!");
+    expect(html).not.toContain("This order was refunded");
+  });
+
+  it("does not read a refund into a plain payment failure", () => {
+    const html = plain(render({ ...baseOrder, status: OrderStatus.PaymentFailed }));
+
+    expect(html).toContain("Order not completed");
+    expect(html).not.toContain("This order was refunded");
+  });
+});

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

@@ -0,0 +1,223 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { WalletPassButtons } from "../WalletPassButtons";
+import type { WalletPassStatus } from "../../../data/queries/useWalletPass";
+
+/**
+ * Events 2.3 — the one behaviour this component exists for: **when wallet
+ * passes are unavailable, the buyer sees NOTHING.**
+ *
+ * That is not a nicety. No signing credentials are configured in production, so
+ * the unavailable path is the ONLY one that runs today; if it leaked a greyed
+ * button, a "coming soon" or an error, every ticket-holder on the platform
+ * would be told about a feature they will never get.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM — so these run in the
+ * package's existing node vitest environment with no jsdom project. Effects
+ * never fire under `renderToStaticMarkup`, so the seeded query cache is the
+ * only data source and nothing reaches the network.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+const PASS_ID = "TN-1001";
+
+/** Matches `walletPassKey` in `useWalletPass`. */
+const key = (passId: string) => ["wallet-pass", passId, ACCOUNT_ID, PROFILE_ID];
+
+const status = (overrides: Partial<WalletPassStatus> = {}): WalletPassStatus => ({
+  passId: PASS_ID,
+  available: true,
+  reason: null,
+  apple: { available: true, downloadUrl: `/public/events/passes/${PASS_ID}/wallet/apple?profileId=${PROFILE_ID}` },
+  google: { available: true, saveUrl: "https://pay.google.com/gp/v/save/a.b.c" },
+  ...overrides,
+});
+
+function render(
+  seed: Record<string, WalletPassStatus> | null,
+  props: { passId?: string; passIds?: string[] } = { passId: PASS_ID },
+  auth: { user?: { id: string } } = { user: { id: ACCOUNT_ID } },
+) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  for (const [passId, value] of Object.entries(seed ?? {})) {
+    queryClient.setQueryData(key(passId), value);
+  }
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider value={auth as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <WalletPassButtons {...props} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+/**
+ * Nothing at all — not an empty wrapper, not a hidden node, not a class name.
+ *
+ * `ForgeThemeProvider` emits its own `<style>` block of CSS variables, which is
+ * the harness rather than anything this component drew, so it is stripped
+ * first. What remains must be the empty string: an exact equality, not a
+ * "does not contain Wallet", because the point is that the component
+ * contributes NO node a curious buyer could find in the DOM.
+ */
+const rendersNothing = (html: string) => {
+  expect(html.replace(/<style>.*?<\/style>/gs, "")).toBe("");
+  expect(html).not.toContain("wallet");
+  expect(html).not.toContain("Wallet");
+};
+
+describe("WalletPassButtons — invisible when unavailable", () => {
+  it("renders NOTHING in the state production is in today (no signing credentials)", () => {
+    // The literal response the API gives right now, for every pass.
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "not_configured",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING for a pass on signed rotating QR", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "rotating_qr",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING for a cancelled or refunded order", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "order_not_active",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING before the API has answered — no spinner, no skeleton", () => {
+    // A placeholder where a button will never appear is the same tell as the
+    // button itself, so there is deliberately no loading state anywhere.
+    rendersNothing(render(null));
+  });
+
+  it("renders NOTHING for an anonymous visitor", () => {
+    // The query is disabled without an account id, so it never even asks.
+    rendersNothing(render({ [PASS_ID]: status() }, { passId: PASS_ID }, {}));
+  });
+
+  it("renders NOTHING when given no pass ids at all", () => {
+    // What `myTicketPassIds` yields for an order whose payload carries no
+    // passes — an older API build, or an order with nothing admitted yet.
+    rendersNothing(render({ [PASS_ID]: status() }, { passIds: [] }));
+  });
+
+  it("renders NOTHING for an id that is not a pass id, rather than requesting a certain 404", () => {
+    rendersNothing(render({ [PASS_ID]: status() }, { passId: "0f9c8b7a-1111-2222-3333-444455556666" }));
+  });
+
+  it("renders NOTHING when the API says available but both providers came back empty", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("hides an unavailable pass while still drawing an available sibling", () => {
+    // The per-pass gate, not an all-or-nothing one: a rotating-QR ticket in the
+    // same order must vanish without taking its neighbour with it.
+    const html = render(
+      {
+        "TN-1": status({ passId: "TN-1" }),
+        "TN-2": status({
+          passId: "TN-2",
+          available: false,
+          reason: "rotating_qr",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      },
+      { passIds: ["TN-1", "TN-2"] },
+    );
+
+    expect(html).toContain("TN-1");
+    expect(html).not.toContain("TN-2");
+  });
+});
+
+describe("WalletPassButtons — what appears once a provider is configured", () => {
+  it("draws both badges when both providers answer", () => {
+    const html = render({ [PASS_ID]: status() });
+
+    expect(html).toContain('data-testid="wallet-pass-buttons"');
+    expect(html).toContain("Add to Apple Wallet");
+    expect(html).toContain("Save to Google Wallet");
+    // The Google save link is the vendor's own URL, used verbatim.
+    expect(html).toContain("https://pay.google.com/gp/v/save/a.b.c");
+    expect(html).toContain('rel="noopener noreferrer"');
+  });
+
+  it("degrades to Apple alone when Google is not configured", () => {
+    // The two providers are approved independently, so this is a state that
+    // will really happen — not a theoretical one.
+    const html = render({ [PASS_ID]: status({ google: { available: false, saveUrl: null } }) });
+
+    expect(html).toContain("Add to Apple Wallet");
+    expect(html).not.toContain("Save to Google Wallet");
+  });
+
+  it("degrades to Google alone when Apple is not configured", () => {
+    const html = render({ [PASS_ID]: status({ apple: { available: false, downloadUrl: null } }) });
+
+    expect(html).toContain("Save to Google Wallet");
+    expect(html).not.toContain("Add to Apple Wallet");
+  });
+
+  it("fetches the .pkpass through the client rather than linking at the API", () => {
+    // A bearer-authenticated binary: an `<a href>` straight at the endpoint
+    // would carry no Authorization header and 401.
+    const html = render({ [PASS_ID]: status({ google: { available: false, saveUrl: null } }) });
+
+    expect(html).toContain("<button");
+    expect(html).not.toContain("wallet/apple");
+  });
+
+  it("draws every colour from the theme", () => {
+    const html = render({ [PASS_ID]: status() });
+
+    // The badge inverts the theme rather than hardcoding the vendors' black.
+    expect(html).toContain("background:#111111");
+    expect(html).toContain("color:#ffffff");
+    // The only fixed colours are inside the Google mark itself, which is a
+    // brandmark and not a styling choice.
+    expect(html).toContain("#4285F4");
+  });
+});