@fantastic.dev/better-stripe 0.7.0 → 0.8.0

package/src/react/workflows/public-workflows.test.tsx

@@ -0,0 +1,216 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import {
+  CheckoutChooser,
+  SubscriptionOverview,
+  PayoutHistory,
+  PayoutOverview,
+  ChargeSummary,
+  PaymentDetails,
+  Account,
+  Onboarding,
+  Payouts,
+  Refunds,
+  Products,
+  Subscriptions,
+  SubscriptionManager,
+  BillingPlans,
+  InvoiceEstimate,
+  BalancePaymentSource,
+  BillingPortal,
+  ReferralLinks,
+  Sales,
+  Invoices,
+  RefundHistory,
+  ReferredSales,
+  WebhookEvents,
+  ChargebackLedger,
+  CostRecovery,
+  Overview,
+  EnvironmentStatus,
+  StripeSetup,
+  SandboxTesting,
+  PaymentReceipt,
+  Earnings,
+  Storefront,
+} from "../index.js";
+import type { ReactNode } from "react";
+const action = vi.fn(async () => null);
+const account = {
+  stripeAccountId: "acct_public",
+  email: "seller@example.com",
+  country: "US",
+  onboardingStatus: "complete",
+  configurations: ["recipient"],
+};
+const subscription = {
+  stripeSubscriptionId: "sub_public",
+  status: "active",
+  isTrialing: false,
+  cancelAtPeriodEnd: false,
+};
+describe("public workflows without example providers, a router, or CSS", () => {
+  const cases: [string, ReactNode][] = [
+    ["CheckoutChooser", <CheckoutChooser />],
+    ["SubscriptionOverview", <SubscriptionOverview subscriptions={[]} />],
+    ["PayoutHistory", <PayoutHistory rows={[]} />],
+    ["PayoutOverview", <PayoutOverview payouts={[]} currency="usd" />],
+    [
+      "ChargeSummary",
+      <ChargeSummary
+        gross={1000}
+        fee={90}
+        net={910}
+        currency="usd"
+        reconciles
+      />,
+    ],
+    ["PaymentDetails", <PaymentDetails payment={null} />],
+    ["Account", <Account scopeKey="seller" account={account} />],
+    [
+      "Onboarding",
+      <Onboarding
+        scopeKey="seller"
+        account={null}
+        createAccount={async () => ({
+          onboardingUrl: "https://connect.stripe.com",
+        })}
+        continueOnboarding={async () => ({ url: "https://connect.stripe.com" })}
+      />,
+    ],
+    [
+      "Payouts",
+      <Payouts
+        scopeKey="seller"
+        load={async () => ({
+          balances: [],
+          payouts: [],
+          upcoming: [],
+          nextCursor: null,
+        })}
+      />,
+    ],
+    [
+      "Refunds",
+      <Refunds
+        scopeKey="seller"
+        issueRefund={async () => ({ stripeRefundId: "re_public" })}
+      />,
+    ],
+    [
+      "Products",
+      <Products
+        scopeKey="seller"
+        products={[]}
+        createProduct={action}
+        createPrice={action}
+      />,
+    ],
+    ["Subscriptions", <Subscriptions rows={[subscription]} />],
+    [
+      "SubscriptionManager",
+      <SubscriptionManager
+        scopeKey="buyer"
+        subscription={subscription}
+        onAction={action}
+      />,
+    ],
+    [
+      "BillingPlans",
+      <BillingPlans
+        scopeKey="seller"
+        publishableKey="pk_test_public"
+        plans={[
+          {
+            id: "starter",
+            name: "Starter",
+            monthlyAmount: 900,
+            currency: "usd",
+          },
+        ]}
+        createCheckout={async () => ({
+          stripeSessionId: "cs_public",
+          clientSecret: "cs_public_secret",
+        })}
+        createPortal={async () => "https://billing.stripe.com"}
+      />,
+    ],
+    [
+      "InvoiceEstimate",
+      <InvoiceEstimate
+        scopeKey="seller"
+        load={async () => ({
+          total: 900,
+          currency: "usd",
+          nextBillingAt: 1800000000000,
+          lines: [],
+        })}
+      />,
+    ],
+    [
+      "BalancePaymentSource",
+      <BalancePaymentSource
+        scopeKey="seller"
+        enabled={false}
+        change={action}
+      />,
+    ],
+    [
+      "BillingPortal",
+      <BillingPortal
+        createSession={async () => "https://billing.stripe.com"}
+      />,
+    ],
+    ["ReferralLinks", <ReferralLinks links={[]} />],
+    ["Sales", <Sales rows={[]} />],
+    ["Invoices", <Invoices rows={[]} />],
+    ["RefundHistory", <RefundHistory rows={[]} />],
+    ["ReferredSales", <ReferredSales rows={[]} />],
+    ["WebhookEvents", <WebhookEvents rows={[]} />],
+    ["CostRecovery", <CostRecovery rows={[]} />],
+    ["ChargebackLedger", <ChargebackLedger chargeback={null} />],
+    ["Overview", <Overview products={[]} subscriptions={[]} />],
+    [
+      "EnvironmentStatus",
+      <EnvironmentStatus
+        checks={[{ id: "secret", label: "Stripe key", configured: true }]}
+      />,
+    ],
+    [
+      "StripeSetup",
+      <StripeSetup tasks={[{ id: "sync", label: "Sync", run: action }]} />,
+    ],
+    [
+      "SandboxTesting",
+      <SandboxTesting tasks={[{ id: "seed", label: "Seed", run: action }]} />,
+    ],
+    [
+      "PaymentReceipt",
+      <PaymentReceipt
+        payment={{ status: "succeeded", amount: 2900, currency: "usd" }}
+      />,
+    ],
+    [
+      "Earnings",
+      <Earnings
+        gross={2900}
+        reversed={0}
+        net={2900}
+        paidOut={0}
+        payouts={[]}
+      />,
+    ],
+    ["Storefront", <Storefront stores={[]} />],
+  ];
+  it.each(cases)(
+    "%s renders unstyled native HTML independently",
+    (_name, component) => {
+      const markup = renderToStaticMarkup(component);
+      expect(markup.length).toBeGreaterThan(0);
+      expect(markup).not.toContain("class=");
+      expect(markup).not.toContain("style=");
+      expect(markup).not.toContain("localhost");
+      expect(action).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/react/workflows/useWorkflowAction.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { act, renderHook, cleanup } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+afterEach(cleanup);
+it("prevents duplicate requests and exposes pending, errors, and retry", async () => {
+  let reject!: (error: Error) => void;
+  const callback = vi.fn(
+    () =>
+      new Promise<string>((_resolve, fail) => {
+        reject = fail;
+      }),
+  );
+  const { result } = renderHook(() => useWorkflowAction(callback));
+  let first!: Promise<string | undefined>;
+  act(() => {
+    first = result.current.run();
+  });
+  expect(result.current.isPending).toBe(true);
+  await act(async () => {
+    await result.current.run();
+  });
+  expect(callback).toHaveBeenCalledOnce();
+  await act(async () => {
+    reject(new Error("Stripe declined"));
+    await first;
+  });
+  expect(result.current.error).toBe("Stripe declined");
+  expect(result.current.isPending).toBe(false);
+});
+it("does not publish an old account's action result after a scope change", async () => {
+  let resolve!: (value: string) => void;
+  const callback = vi.fn(
+    () =>
+      new Promise<string>((done) => {
+        resolve = done;
+      }),
+  );
+  const { result, rerender } = renderHook(
+    ({ scope }) => useWorkflowAction(callback, scope),
+    { initialProps: { scope: "seller_one" } },
+  );
+  let request!: Promise<string | undefined>;
+  act(() => {
+    request = result.current.run();
+  });
+  rerender({ scope: "seller_two" });
+  await act(async () => {
+    resolve("seller_one_secret");
+    await request;
+  });
+  expect(result.current.result).toBeUndefined();
+  expect(result.current.isPending).toBe(false);
+});

package/src/react/workflows/useWorkflowAction.ts

@@ -0,0 +1,75 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+export type WorkflowActionState<T, Args extends unknown[]> = {
+  isPending: boolean;
+  error: string | null;
+  result: T | undefined;
+  /** Errors are exposed in state; failed and duplicate calls return undefined. */
+  run: (...args: Args) => Promise<T | undefined>;
+  reset: () => void;
+};
+/** Shared async action lifecycle. Scope identifies the authenticated account/resource, not authorization. */
+export function useWorkflowAction<T, Args extends unknown[]>(
+  action: (...args: Args) => Promise<T>,
+  scope: string = "default",
+): WorkflowActionState<T, Args> {
+  const initial = {
+    scope,
+    isPending: false,
+    error: null as string | null,
+    result: undefined as T | undefined,
+  };
+  const [state, setState] = useState(initial);
+  if (state.scope !== scope) setState(initial);
+  const callback = useRef(action);
+  const lifecycle = useRef({ version: 0, mounted: false });
+  const lock = useRef<number | null>(null);
+  useEffect(() => {
+    callback.current = action;
+  }, [action]);
+  useEffect(() => {
+    const version = ++lifecycle.current.version;
+    lifecycle.current.mounted = true;
+    lock.current = null;
+    return () => {
+      if (lifecycle.current.version === version) {
+        lifecycle.current.mounted = false;
+        lifecycle.current.version++;
+        lock.current = null;
+      }
+    };
+  }, [scope]);
+  const reset = useCallback(() => {
+    if (lock.current !== null) return;
+    setState({ scope, isPending: false, error: null, result: undefined });
+  }, [scope]);
+  const run = useCallback(
+    async (...args: Args) => {
+      if (lock.current !== null) return undefined;
+      const version = lifecycle.current.version;
+      lock.current = version;
+      setState({ scope, isPending: true, error: null, result: undefined });
+      const current = () =>
+        lifecycle.current.mounted && lifecycle.current.version === version;
+      try {
+        const result = await callback.current(...args);
+        if (!current()) return undefined;
+        setState({ scope, isPending: false, error: null, result });
+        return result;
+      } catch (error) {
+        if (current())
+          setState({
+            scope,
+            isPending: false,
+            error: error instanceof Error ? error.message : String(error),
+            result: undefined,
+          });
+        return undefined;
+      } finally {
+        if (lock.current === version) lock.current = null;
+      }
+    },
+    [scope],
+  );
+  return { ...state, run, reset };
+}

package/src/react/workflows/useWorkflowResource.test.tsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { StrictMode } from "react";
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { useWorkflowResource } from "./useWorkflowResource.js";
+afterEach(cleanup);
+it("initializes only once in StrictMode and permits an explicit retry", async () => {
+  const load = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("Unavailable"))
+    .mockResolvedValueOnce("fresh");
+  const { result } = renderHook(() => useWorkflowResource(load), {
+    wrapper: StrictMode,
+  });
+  await waitFor(() => expect(result.current.error).toBe("Unavailable"));
+  expect(load).toHaveBeenCalledOnce();
+  act(() => result.current.refresh());
+  await waitFor(() => expect(result.current.data).toBe("fresh"));
+  expect(load).toHaveBeenCalledTimes(2);
+});
+it("ignores an old account's response and loads new account data", async () => {
+  let resolve!: (value: string) => void;
+  const load = vi
+    .fn()
+    .mockImplementationOnce(
+      () =>
+        new Promise<string>((done) => {
+          resolve = done;
+        }),
+    )
+    .mockResolvedValueOnce("new balance");
+  const { result, rerender } = renderHook(
+    ({ scope }) => useWorkflowResource(load, scope),
+    { initialProps: { scope: "one" } },
+  );
+  await waitFor(() => expect(load).toHaveBeenCalledOnce());
+  rerender({ scope: "two" });
+  await waitFor(() => expect(result.current.data).toBe("new balance"));
+  await act(async () => resolve("old balance"));
+  expect(result.current.data).toBe("new balance");
+});

package/src/react/workflows/useWorkflowResource.ts

@@ -0,0 +1,78 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+/** Loads once per scope/refresh, including under React StrictMode. Stale requests cannot update another scope. */
+export function useWorkflowResource<T>(
+  load: () => Promise<T>,
+  scope = "default",
+) {
+  const initial = {
+    scope,
+    attempt: 0,
+    data: undefined as T | undefined,
+    error: null as string | null,
+    isLoading: true,
+  };
+  const [state, setState] = useState(initial);
+  if (state.scope !== scope) setState(initial);
+  const loader = useRef(load);
+  const request = useRef<{
+    scope: string;
+    attempt: number;
+    promise: Promise<T>;
+  } | null>(null);
+  useEffect(() => {
+    loader.current = load;
+  }, [load]);
+  useEffect(() => {
+    let active = true;
+    if (
+      !request.current ||
+      request.current.scope !== scope ||
+      request.current.attempt !== state.attempt
+    ) {
+      request.current = {
+        scope,
+        attempt: state.attempt,
+        promise: Promise.resolve().then(() => loader.current()),
+      };
+    }
+    void request.current.promise
+      .then((data) => {
+        if (active)
+          setState((previous) => ({
+            ...previous,
+            data,
+            error: null,
+            isLoading: false,
+          }));
+      })
+      .catch((error: unknown) => {
+        if (active)
+          setState((previous) => ({
+            ...previous,
+            error: error instanceof Error ? error.message : String(error),
+            isLoading: false,
+          }));
+      });
+    return () => {
+      active = false;
+    };
+  }, [scope, state.attempt]);
+  const refresh = useCallback(
+    () =>
+      setState((previous) => ({
+        ...previous,
+        attempt: previous.attempt + 1,
+        isLoading: true,
+        error: null,
+      })),
+    [],
+  );
+  return {
+    revision: state.attempt,
+    data: state.data,
+    error: state.error,
+    isLoading: state.isLoading,
+    refresh,
+  };
+}