@fantastic.dev/better-stripe 0.7.0 → 0.8.1

package/src/component/lib/reversals.ts

@@ -64,10 +64,14 @@ export function computeReversalSlices(
         );
         break;
       case "fraction":
-        to = Math.min(leg.amount, Math.max(from, Math.round(leg.amount * fraction)));
+        to = Math.min(
+          leg.amount,
+          Math.max(from, Math.round(leg.amount * fraction)),
+        );
         break;
       case "amount": {
-        const prorata = total > 0 ? Math.round((mode.amount * leg.amount) / total) : 0;
+        const prorata =
+          total > 0 ? Math.round((mode.amount * leg.amount) / total) : 0;
         const take = Math.max(0, Math.min(prorata, budget, leg.amount - from));
         budget -= take;
         to = from + take;
@@ -111,3 +115,27 @@ export function computeReversalSlices(
 
   return slices;
 }
+
+/**
+ * Derive reversal status + transfer status from a (transfer amount, cumulative
+ * reversed amount) pair. Shared by upsert and reversal so the three reversal
+ * fields can never drift.
+ */
+export function deriveReversalState(
+  amount: number,
+  reversedAmount: number,
+  baseStatus: "pending" | "paid" | "failed" | "reversed",
+) {
+  const reversalStatus =
+    reversedAmount <= 0
+      ? undefined
+      : reversedAmount >= amount
+        ? ("fully_reversed" as const)
+        : ("partially_reversed" as const);
+  return {
+    reversedAmount: reversedAmount > 0 ? reversedAmount : undefined,
+    reversalStatus,
+    status:
+      reversalStatus === "fully_reversed" ? ("reversed" as const) : baseStatus,
+  };
+}

package/src/component/subscription-scoping.test.ts

@@ -64,7 +64,11 @@ describe("per-store subscription scoping (BTS-19)", () => {
 
     const active = await t.query(
       api.billing.queries.listSubscriptionsByUserAndStore,
-      { userId: "buyer_1", destinationAccountId: "acct_store_a", status: "active" },
+      {
+        userId: "buyer_1",
+        destinationAccountId: "acct_store_a",
+        status: "active",
+      },
     );
     expect(active.map((s) => s.stripeSubscriptionId)).toEqual(["sub_active"]);
   });

package/src/component/triggers.test.ts

@@ -236,10 +236,13 @@ describe("webhook event ledger", () => {
     it("fresh processing dedupes", async () => {
       const t = convexTest(schema, modules);
 
-      const first = await t.mutation(api.webhooks.mutations.insertWebhookEvent, {
-        stripeEventId: "evt_stale_001",
-        eventType: "invoice.paid",
-      });
+      const first = await t.mutation(
+        api.webhooks.mutations.insertWebhookEvent,
+        {
+          stripeEventId: "evt_stale_001",
+          eventType: "invoice.paid",
+        },
+      );
       expect(first).toBe("inserted");
 
       // Immediate second insert — row is fresh processing, must dedupe.

package/src/react/components/BuyerBillingView.render.test.tsx

@@ -69,7 +69,10 @@ describe("BuyerBillingView", () => {
 
   it("renders the empty label with no subscriptions and no saved card", () => {
     const html = renderToStaticMarkup(
-      createElement(BuyerBillingView, { subscriptions: [], paymentMethod: null }),
+      createElement(BuyerBillingView, {
+        subscriptions: [],
+        paymentMethod: null,
+      }),
     );
     expect(html).toContain("No billing yet");
   });
@@ -122,7 +125,9 @@ describe("BuyerBillingView", () => {
       createElement(BuyerBillingView, {
         subscriptions: [activeSub],
         paymentMethod,
-        updateCardSlot: createElement("div", { "data-testid": "embedded-card" }),
+        updateCardSlot: createElement("div", {
+          "data-testid": "embedded-card",
+        }),
       }),
     );
     expect(html).toContain('data-testid="embedded-card"');

package/src/react/components/ConnectProvider.live.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+const stripe = vi.hoisted(() => ({ initialize: vi.fn(), update: vi.fn() }));
+vi.mock("@stripe/connect-js/pure.js", () => ({
+  loadConnectAndInitialize: stripe.initialize,
+}));
+vi.mock("@stripe/connect-js", () => ({
+  loadConnectAndInitialize: stripe.initialize,
+}));
+vi.mock("@stripe/react-connect-js", () => ({
+  ConnectComponentsProvider: ({ children }: { children: ReactNode }) =>
+    children,
+}));
+import { ConnectProvider } from "./ConnectProvider.js";
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+it("updates appearance and locale while retaining the active Connect session", async () => {
+  stripe.initialize.mockReturnValue({ update: stripe.update });
+  const first = vi.fn(async () => "first_session");
+  const next = vi.fn(async () => "refreshed_session");
+  const { rerender } = render(
+    <ConnectProvider
+      publishableKey="pk_test_one"
+      fetchClientSecret={first}
+      locale="en"
+    />,
+  );
+  const fetch = stripe.initialize.mock.calls[0][0].fetchClientSecret;
+  expect(await fetch()).toBe("first_session");
+  rerender(
+    <ConnectProvider
+      publishableKey="pk_test_one"
+      fetchClientSecret={next}
+      locale="fr"
+      appearance={{ variables: { colorPrimary: "#123456" } }}
+    />,
+  );
+  expect(stripe.initialize).toHaveBeenCalledTimes(1);
+  expect(stripe.update).toHaveBeenLastCalledWith({
+    locale: "fr",
+    appearance: { variables: { colorPrimary: "#123456" } },
+  });
+  expect(await fetch()).toBe("refreshed_session");
+  expect(next).toHaveBeenCalledTimes(1);
+});
+it("creates a separate Connect instance when the publishable key changes", () => {
+  stripe.initialize.mockReturnValue({ update: stripe.update });
+  const fetch = async () => "session";
+  const { rerender } = render(
+    <ConnectProvider publishableKey="pk_test_one" fetchClientSecret={fetch} />,
+  );
+  rerender(
+    <ConnectProvider publishableKey="pk_test_two" fetchClientSecret={fetch} />,
+  );
+  expect(stripe.initialize).toHaveBeenCalledTimes(2);
+  expect(stripe.initialize.mock.calls[1][0].publishableKey).toBe("pk_test_two");
+});

package/src/react/components/ConnectProvider.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 
 import type { IStripeConnectInitParams } from "@stripe/connect-js";
-import { loadConnectAndInitialize } from "@stripe/connect-js";
+import { loadConnectAndInitialize } from "@stripe/connect-js/pure.js";
 import { ConnectComponentsProvider } from "@stripe/react-connect-js";
 
 export type ConnectProviderProps = {
@@ -32,24 +32,38 @@ export type ConnectProviderProps = {
  * ConnectJS renders client-only iframes; on the server this component renders
  * its tree but the embedded surfaces only materialize in the browser.
  */
-export function ConnectProvider({
+export function ConnectProvider(props: ConnectProviderProps) {
+  return <ConnectInstanceProvider key={props.publishableKey} {...props} />;
+}
+function ConnectInstanceProvider({
   publishableKey,
   fetchClientSecret,
   appearance,
   locale,
   children,
 }: ConnectProviderProps) {
+  const fetcher = useRef(fetchClientSecret);
+  useEffect(() => {
+    fetcher.current = fetchClientSecret;
+  }, [fetchClientSecret]);
   // Lazy useState initializer: exactly one Connect instance per mount, stable
   // across re-renders (loadConnectAndInitialize returns synchronously).
   const [connectInstance] = useState(() =>
     loadConnectAndInitialize({
       publishableKey,
-      fetchClientSecret,
+      fetchClientSecret: () => fetcher.current(),
       ...(appearance !== undefined ? { appearance } : {}),
       ...(locale !== undefined ? { locale } : {}),
     }),
   );
 
+  useEffect(() => {
+    if (appearance !== undefined || locale !== undefined)
+      connectInstance.update({
+        ...(appearance !== undefined ? { appearance } : {}),
+        ...(locale !== undefined ? { locale } : {}),
+      });
+  }, [connectInstance, appearance, locale]);
   return (
     <ConnectComponentsProvider connectInstance={connectInstance}>
       {children}

package/src/react/components/ConnectStatusBadge.tsx

@@ -3,10 +3,7 @@
 import type { ReactNode } from "react";
 
 export type ConnectStatus =
-  | "pending"
-  | "in_progress"
-  | "complete"
-  | "restricted";
+  "pending" | "in_progress" | "complete" | "restricted";
 
 export type ConnectStatusDetails = {
   detailsSubmitted: boolean;

package/src/react/components/DisputeDetail.render.test.tsx

@@ -74,7 +74,11 @@ describe("DisputeDetail", () => {
       createElement(DisputeDetail, {
         dispute: {
           ...dispute,
-          countdown: { dueBy: dispute.evidenceDueBy, daysRemaining: -2, isOverdue: true },
+          countdown: {
+            dueBy: dispute.evidenceDueBy,
+            daysRemaining: -2,
+            isOverdue: true,
+          },
         },
       }),
     );

package/src/react/components/DisputeDetail.tsx

@@ -5,6 +5,11 @@ import type { ReactNode } from "react";
 import type { DisputeWithCountdown } from "../hooks/useDisputeWithCountdown.js";
 import { formatPrice } from "../lib/price-helpers.js";
 
+/** Stripe only accepts responses while the dispute requires one. */
+export function canRespondToDispute(status: string | undefined) {
+  return status === "needs_response" || status === "warning_needs_response";
+}
+
 export type DisputeDetailRenderProps = {
   dispute: DisputeWithCountdown;
   /** Formatted dispute amount, e.g. "$120.50". */
@@ -26,6 +31,7 @@ export type DisputeDetailProps = {
   dueLabel?: string;
   overdueLabel?: string;
   noDeadlineLabel?: string;
+  responseClosedLabel?: string;
   /** Field captions in the default rendering. */
   labels?: {
     amount?: string;
@@ -53,6 +59,7 @@ export function DisputeDetail({
   dueLabel = "Evidence due in {days} days",
   overdueLabel = "Evidence overdue",
   noDeadlineLabel = "No evidence deadline",
+  responseClosedLabel = "Evidence submission closed",
   labels,
   locale,
   className,
@@ -70,11 +77,13 @@ export function DisputeDetail({
   }
 
   const { countdown } = dispute;
-  const countdownMessage = countdown.isOverdue
-    ? overdueLabel
-    : countdown.daysRemaining !== undefined
-      ? dueLabel.replace("{days}", String(countdown.daysRemaining))
-      : noDeadlineLabel;
+  const countdownMessage = !canRespondToDispute(dispute.status)
+    ? responseClosedLabel
+    : countdown.isOverdue
+      ? overdueLabel
+      : countdown.daysRemaining !== undefined
+        ? dueLabel.replace("{days}", String(countdown.daysRemaining))
+        : noDeadlineLabel;
 
   const renderProps: DisputeDetailRenderProps = {
     dispute,

package/src/react/components/DisputesList.render.test.tsx

@@ -242,3 +242,24 @@ describe("DisputesList", () => {
     expect(html).not.toContain("No disputes");
   });
 });
+it.each(["won", "lost", "under_review"] as const)(
+  "hides stale evidence deadlines for %s disputes",
+  (status) => {
+    const html = renderToStaticMarkup(
+      createElement(DisputesList, {
+        disputes: [
+          makeDispute({
+            status,
+            countdown: {
+              dueBy: "2030-01-01T00:00:00Z",
+              daysRemaining: 9,
+              isOverdue: false,
+            },
+          }),
+        ],
+      }),
+    );
+    expect(html).toContain(status);
+    expect(html).not.toContain("Evidence due in");
+  },
+);

package/src/react/components/DisputesList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { canRespondToDispute } from "./DisputeDetail.js";
 
 import type { StripeComponentDispute } from "../types.js";
 import type { DisputeEvidenceCountdown } from "../hooks/useDisputeWithCountdown.js";
@@ -78,7 +79,7 @@ export function DisputesList({
 
   const badgeTextFor = (row: DisputesListRow): string | undefined => {
     const countdown = row.countdown;
-    if (!countdown?.dueBy) return undefined;
+    if (!canRespondToDispute(row.status) || !countdown?.dueBy) return undefined;
     if (countdown.isOverdue) return overdueLabel;
     return dueLabel.replace("{days}", String(countdown.daysRemaining));
   };

package/src/react/components/EarningsSummary.render.test.tsx

@@ -73,9 +73,7 @@ describe("EarningsSummary", () => {
   });
 
   it("renders gross, reversals, net, and paid-out amounts", () => {
-    const html = renderToStaticMarkup(
-      createElement(EarningsSummary, earnings),
-    );
+    const html = renderToStaticMarkup(createElement(EarningsSummary, earnings));
     expect(html).toContain("Gross");
     expect(html).toContain("$105.00");
     // Honest label per the BTS-36 review — NOT "Fees".
@@ -89,9 +87,7 @@ describe("EarningsSummary", () => {
   });
 
   it("announces the latest payout with amount and status", () => {
-    const html = renderToStaticMarkup(
-      createElement(EarningsSummary, earnings),
-    );
+    const html = renderToStaticMarkup(createElement(EarningsSummary, earnings));
     // po_latest (newest _creationTime) wins over po_old.
     expect(html).toContain("Latest payout of $40.00 — in_transit");
   });

package/src/react/components/EmbeddedDisputes.render.test.tsx

@@ -21,12 +21,15 @@ const loadConnectAndInitialize = vi.fn(
   }),
 );
 
-vi.mock("@stripe/connect-js", () => ({
+vi.mock("@stripe/connect-js/pure.js", () => ({
   loadConnectAndInitialize: (initParams: unknown) =>
     loadConnectAndInitialize(initParams as Record<string, unknown>),
 }));
 
-vi.mock("@stripe/react-connect-js", () => ({
+vi.mock("@stripe/react-connect-js", async () => ({
+  ...(await vi.importActual<typeof import("@stripe/react-connect-js")>(
+    "@stripe/react-connect-js",
+  )),
   ConnectComponentsProvider: ({
     connectInstance,
     children,
@@ -73,9 +76,8 @@ describe("ConnectProvider", () => {
     expect(loadConnectAndInitialize).toHaveBeenCalledTimes(1);
     const initParams = loadConnectAndInitialize.mock.calls[0][0];
     expect(initParams.publishableKey).toBe("pk_test_123");
-    // The EXACT fetcher reference is handed over — the Connect runtime calls
-    // it to obtain the createDisputeSession clientSecret; render must not.
-    expect(initParams.fetchClientSecret).toBe(fetchClientSecret);
+    // The Connect runtime receives a lazy fetcher. Rendering does not request a session.
+    expect(initParams.fetchClientSecret).toEqual(expect.any(Function));
     expect(fetchClientSecret).not.toHaveBeenCalled();
     // Provider rendered with an instance, children inside.
     expect(html).toContain('data-testid="connect-provider"');

package/src/react/components/EmbeddedDisputes.tsx

@@ -25,7 +25,10 @@ export type EmbeddedDisputesProps = {
  * Must be rendered inside a {@link ConnectProvider} whose `fetchClientSecret`
  * returns that session's `clientSecret`.
  */
-export function EmbeddedDisputes({ payment, className }: EmbeddedDisputesProps) {
+export function EmbeddedDisputes({
+  payment,
+  className,
+}: EmbeddedDisputesProps) {
   return (
     <div className={className}>
       {payment ? (

package/src/react/components/EvidenceForm.render.test.tsx

@@ -19,10 +19,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 import { EvidenceForm as BarrelExport } from "../index.js";
-import {
-  EvidenceForm,
-  type EvidenceFormRenderProps,
-} from "./EvidenceForm.js";
+import { EvidenceForm, type EvidenceFormRenderProps } from "./EvidenceForm.js";
 
 const allFields = {
   productDescription: "Ceramics Masterclass, lifetime access",
@@ -33,10 +30,7 @@ const allFields = {
 
 /** Render via the children prop and hand back the captured render props. */
 function capture(
-  props: Omit<
-    Parameters<typeof EvidenceForm>[0],
-    "children"
-  >,
+  props: Omit<Parameters<typeof EvidenceForm>[0], "children">,
 ): EvidenceFormRenderProps {
   let received: EvidenceFormRenderProps | undefined;
   renderToStaticMarkup(
@@ -85,8 +79,7 @@ describe("EvidenceForm", () => {
     expect(args.evidence).toEqual({
       product_description: allFields.productDescription,
       access_activity_log: allFields.accessActivity,
-      uncategorized_text: allFields.additionalInfo,
-      customer_communication: allFields.customerCommunication,
+      uncategorized_text: `${allFields.additionalInfo}\n\nCustomer communication:\n${allFields.customerCommunication}`,
     });
     // Stripe's dispute-update `submit` DEFAULTS TO TRUE when omitted, so a
     // draft must send an explicit false — omission would submit to the bank.

package/src/react/components/SplitBreakdown.render.test.tsx

@@ -34,8 +34,18 @@ const leg = (over: Record<string, unknown>) => ({
 
 const totals = {
   legs: [
-    leg({ stripeTransferId: "tr_store", role: "store", amount: 8000, net: 8000 }),
-    leg({ stripeTransferId: "tr_aff", role: "affiliate", amount: 1000, net: 1000 }),
+    leg({
+      stripeTransferId: "tr_store",
+      role: "store",
+      amount: 8000,
+      net: 8000,
+    }),
+    leg({
+      stripeTransferId: "tr_aff",
+      role: "affiliate",
+      amount: 1000,
+      net: 1000,
+    }),
   ],
   store: 8000,
   affiliate: 1000,
@@ -79,7 +89,10 @@ describe("SplitBreakdown", () => {
       createElement(SplitBreakdown, {
         breakdown: {
           ...totals,
-          legs: [...totals.legs, leg({ stripeTransferId: "tr_misc", amount: 500, net: 500 })],
+          legs: [
+            ...totals.legs,
+            leg({ stripeTransferId: "tr_misc", amount: 500, net: 500 }),
+          ],
           other: 500,
           recipientsTotal: 9500,
           platform: 500,
@@ -136,8 +149,18 @@ describe("SplitBreakdown", () => {
     expect(received!.breakdown).toBe(totals);
     expect(received!.lines).toEqual([
       { key: "store", label: "Store", amount: 8000, amountLabel: "$80.00" },
-      { key: "affiliate", label: "Affiliate", amount: 1000, amountLabel: "$10.00" },
-      { key: "platform", label: "Platform", amount: 1000, amountLabel: "$10.00" },
+      {
+        key: "affiliate",
+        label: "Affiliate",
+        amount: 1000,
+        amountLabel: "$10.00",
+      },
+      {
+        key: "platform",
+        label: "Platform",
+        amount: 1000,
+        amountLabel: "$10.00",
+      },
     ]);
     expect(html).toBe("<p>3</p>");
   });

package/src/react/components/SplitBreakdown.tsx

@@ -75,7 +75,11 @@ export function SplitBreakdown({
   const money = (amount: number) => formatPrice(amount, currency, locale);
 
   const lines: SplitBreakdownLine[] = [
-    { key: "store" as const, label: labels?.store ?? "Store", amount: breakdown.store },
+    {
+      key: "store" as const,
+      label: labels?.store ?? "Store",
+      amount: breakdown.store,
+    },
     {
       key: "affiliate" as const,
       label: labels?.affiliate ?? "Affiliate",
@@ -83,7 +87,13 @@ export function SplitBreakdown({
     },
     // The catch-all bucket only earns a line when it carries money.
     ...(breakdown.other > 0
-      ? [{ key: "other" as const, label: labels?.other ?? "Other", amount: breakdown.other }]
+      ? [
+          {
+            key: "other" as const,
+            label: labels?.other ?? "Other",
+            amount: breakdown.other,
+          },
+        ]
       : []),
     {
       key: "platform" as const,

package/src/react/hooks/useCheckoutSession.ts

@@ -14,8 +14,7 @@ function extractErrorMessage(error: unknown, fallback: string): string {
  * Result of a checkout confirmation attempt.
  */
 export type CheckoutConfirmResult =
-  | { type: "success" }
-  | { type: "error"; message: string };
+  { type: "success" } | { type: "error"; message: string };
 
 /**
  * Checkout session state and actions.

package/src/react/hooks/useConfirmPayment.ts

@@ -8,8 +8,7 @@ import { useElements, useStripe } from "@stripe/react-stripe-js";
  * Normalized result from a Stripe confirmation operation.
  */
 export type StripeConfirmResult =
-  | { success: true }
-  | { success: false; error: string };
+  { success: true } | { success: false; error: string };
 
 /**
  * Hook for confirming a PaymentIntent (immediate charge) or SetupIntent (future charge / trial).

package/src/react/hooks/useEarnings.test.ts

@@ -48,8 +48,20 @@ const earningsResult = {
 };
 
 const previewPayouts = [
-  { stripePayoutId: "po_1", accountId: "acct_store", amount: 4000, currency: "usd", status: "paid" },
-  { stripePayoutId: "po_2", accountId: "acct_store", amount: 1500, currency: "usd", status: "pending" },
+  {
+    stripePayoutId: "po_1",
+    accountId: "acct_store",
+    amount: 4000,
+    currency: "usd",
+    status: "paid",
+  },
+  {
+    stripePayoutId: "po_2",
+    accountId: "acct_store",
+    amount: 1500,
+    currency: "usd",
+    status: "pending",
+  },
 ];
 
 const payoutsResult = {
@@ -70,7 +82,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, payoutsResult],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -92,7 +108,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, payoutsResult],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -111,7 +131,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, undefined],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -125,7 +149,11 @@ describe("createUseEarnings", () => {
 
   it("skips both queries when the account id is undefined", () => {
     const mockUseQuery = useQueryFor(new Map());
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings(undefined);
 
@@ -143,11 +171,18 @@ describe("createUseEarnings", () => {
   it("treats empty ledgers as loaded with zero totals", () => {
     const mockUseQuery = useQueryFor(
       new Map<unknown, unknown>([
-        [earningsRef, { gross: 0, reversed: 0, transferCount: 0, transfers: [] }],
+        [
+          earningsRef,
+          { gross: 0, reversed: 0, transferCount: 0, transfers: [] },
+        ],
         [payoutsRef, { paidOut: 0, payoutCount: 0, payouts: [] }],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_new");
 

package/src/react/hooks/useStripeMode.test.ts

@@ -28,16 +28,13 @@ describe("useStripeMode", () => {
     expect(useQueryMock).toHaveBeenCalledWith(mockQueryRef, {});
   });
 
-  it.each(["test", "live"] as const)(
-    "returns the resolved %s mode",
-    (mode) => {
-      useQueryMock.mockReturnValue(mode);
+  it.each(["test", "live"] as const)("returns the resolved %s mode", (mode) => {
+    useQueryMock.mockReturnValue(mode);
 
-      const result = useStripeMode(mockQueryRef);
+    const result = useStripeMode(mockQueryRef);
 
-      expect(result).toBe(mode);
-    },
-  );
+    expect(result).toBe(mode);
+  });
 
   it("returns undefined while the query is still loading", () => {
     useQueryMock.mockReturnValue(undefined);