@fantastic.dev/better-stripe 0.7.0 → 0.8.1

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

@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it, vi } from "vitest";
+import { Payouts } from "./Payouts.js";
+afterEach(cleanup);
+const row = (id: string, status = "paid") => ({
+  id,
+  status,
+  amount: 5000,
+  currency: "usd",
+  arrivalDate: 1800000000000,
+  created: 1799990000000,
+});
+it("shows balances, the actual next payout/date, and merges paginated history without duplicates", async () => {
+  const first = row("po_first");
+  const next = row("po_next", "pending");
+  const load = vi
+    .fn()
+    .mockResolvedValueOnce({
+      balances: [{ currency: "usd", available: 12000, pending: 2000 }],
+      upcoming: [next],
+      payouts: [next, first],
+      nextCursor: "po_first",
+    })
+    .mockResolvedValueOnce({
+      balances: [],
+      upcoming: [next],
+      payouts: [first, row("po_older")],
+      nextCursor: null,
+    });
+  render(<Payouts scopeKey="acct_one" load={load} />);
+  await screen.findByText("$120.00");
+  expect(screen.getByText("$20.00")).toBeTruthy();
+  expect(screen.getByText("po_next")).toBeTruthy();
+  await userEvent.click(
+    screen.getByRole("button", { name: "Load more payouts" }),
+  );
+  await screen.findByText("po_older");
+  expect(screen.getAllByText("po_first")).toHaveLength(1);
+  expect(screen.getByText("$120.00")).toBeTruthy();
+  expect(load).toHaveBeenLastCalledWith("po_first");
+});
+it("shows a load error with a working retry", async () => {
+  const load = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("No balance access"))
+    .mockResolvedValueOnce({
+      balances: [],
+      upcoming: [],
+      payouts: [],
+      nextCursor: null,
+    });
+  render(<Payouts scopeKey="acct_one" load={load} />);
+  expect((await screen.findByRole("alert")).textContent).toContain(
+    "No balance access",
+  );
+  await userEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await screen.findByText("No previous payouts yet.");
+});
+it("exports payout history with explicit empty/loading states and date formatting", async () => {
+  const { PayoutHistory } = await import("./Payouts.js");
+  const { rerender } = render(<PayoutHistory rows={undefined} />);
+  expect(screen.getByRole("status")).toBeTruthy();
+  rerender(<PayoutHistory rows={[]} />);
+  expect(screen.getByText("No payouts yet.")).toBeTruthy();
+  rerender(
+    <PayoutHistory
+      rows={[
+        {
+          id: "po_history",
+          amount: 900,
+          currency: "usd",
+          status: "paid",
+          arrivalDate: null,
+        },
+      ]}
+    />,
+  );
+  expect(screen.getByText("po_history")).toBeTruthy();
+  expect(screen.getByText("Not supplied by Stripe")).toBeTruthy();
+});
+it("keeps completed payouts out of upcoming and sorts the remaining arrivals", async () => {
+  const pending = {
+    ...row("po_pending", "pending"),
+    arrivalDate: 1900000000000,
+  };
+  const transit = {
+    ...row("po_transit", "in_transit"),
+    arrivalDate: 1800000000000,
+  };
+  const paid = row("po_paid");
+  const failed = row("po_failed", "failed");
+  const load = async () => ({
+    balances: [],
+    upcoming: [paid, pending, failed, transit],
+    payouts: [paid, pending, failed, transit],
+    nextCursor: null,
+  });
+  const { container } = render(<Payouts scopeKey="seller" load={load} />);
+  await screen.findByText("po_pending");
+  const headings = Array.from(container.querySelectorAll("h3"));
+  const upcomingTable = headings.find(
+    (node) => node.textContent === "Upcoming payouts",
+  )!.nextElementSibling!;
+  expect(upcomingTable.textContent).not.toContain("po_paid");
+  expect(upcomingTable.textContent).not.toContain("po_failed");
+  expect(upcomingTable.textContent!.indexOf("po_transit")).toBeLessThan(
+    upcomingTable.textContent!.indexOf("po_pending"),
+  );
+  expect(screen.getAllByText("po_paid")).toHaveLength(1);
+});

package/src/react/workflows/Payouts.tsx

@@ -0,0 +1,215 @@
+"use client";
+import { useState, type ReactNode } from "react";
+import { Connect, type ConnectProps } from "./Connect.js";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+import { useWorkflowResource } from "./useWorkflowResource.js";
+import {
+  Collection,
+  type CollectionProps,
+  type WorkflowColumn,
+} from "./Collection.js";
+import { formatPrice } from "../lib/price-helpers.js";
+export type PayoutRow = {
+  id: string;
+  amount: number;
+  currency: string;
+  status: string;
+  /** Unix milliseconds. */ arrivalDate: number | null;
+  created: number;
+};
+export type PayoutSnapshot = {
+  balances: { currency: string; available: number; pending: number }[];
+  payouts: PayoutRow[];
+  upcoming: PayoutRow[];
+  nextCursor: string | null;
+};
+export type PayoutsRenderProps = {
+  data: PayoutSnapshot | undefined;
+  error: string | null;
+  isLoading: boolean;
+  isPending: boolean;
+  nextPayout: PayoutRow | undefined;
+  previousPayouts: PayoutRow[];
+  upcomingPayouts: PayoutRow[];
+  refresh: () => void;
+  loadMore: () => Promise<void>;
+};
+export type HeadlessPayoutsProps = {
+  presentation?: "headless";
+  scopeKey: string;
+  load: (cursor?: string) => Promise<PayoutSnapshot>;
+  children?: (state: PayoutsRenderProps) => ReactNode;
+};
+export type PayoutsProps =
+  | HeadlessPayoutsProps
+  | (Omit<ConnectProps, "component"> & { presentation: "embedded" });
+const upcoming = (row: PayoutRow) =>
+  row.status === "pending" || row.status === "in_transit";
+export function Payouts(props: PayoutsProps) {
+  return props.presentation === "embedded" ? (
+    <Connect {...props} component="payouts" />
+  ) : (
+    <PayoutsBody key={props.scopeKey} {...props} />
+  );
+}
+function PayoutsBody({ load, scopeKey, children }: HeadlessPayoutsProps) {
+  const resource = useWorkflowResource(() => load(), scopeKey);
+  const more = useWorkflowAction(
+    (cursor: string) => load(cursor),
+    `${scopeKey}:${resource.revision}`,
+  );
+  const [pages, setPages] = useState<{
+    base: PayoutSnapshot | undefined;
+    rows: PayoutRow[];
+    cursor: string | null | undefined;
+  }>({ base: undefined, rows: [], cursor: undefined });
+  if (pages.base !== resource.data)
+    setPages({ base: resource.data, rows: [], cursor: undefined });
+  const base = resource.data;
+  const nextCursor =
+    pages.cursor === undefined ? (base?.nextCursor ?? null) : pages.cursor;
+  const data = base
+    ? {
+        ...base,
+        nextCursor,
+        payouts: [
+          ...new Map(
+            [...base.payouts, ...pages.rows].map((row) => [row.id, row]),
+          ).values(),
+        ],
+      }
+    : undefined;
+  const loadMore = async () => {
+    if (!nextCursor || resource.isLoading) return;
+    const next = await more.run(nextCursor);
+    if (next)
+      setPages((previous) => ({
+        ...previous,
+        rows: [...previous.rows, ...next.payouts],
+        cursor: next.nextCursor,
+      }));
+  };
+  const sortedUpcoming =
+    data?.upcoming
+      .filter(upcoming)
+      .slice()
+      .sort(
+        (a, b) => (a.arrivalDate ?? Infinity) - (b.arrivalDate ?? Infinity),
+      ) ?? [];
+  const state: PayoutsRenderProps = {
+    data,
+    isLoading: resource.isLoading,
+    isPending: resource.isLoading || more.isPending,
+    error: resource.error ?? more.error,
+    nextPayout: sortedUpcoming[0],
+    upcomingPayouts: sortedUpcoming,
+    previousPayouts: data?.payouts.filter((row) => !upcoming(row)) ?? [],
+    refresh: resource.refresh,
+    loadMore,
+  };
+  return <>{children ? children(state) : <NativePayouts {...state} />}</>;
+}
+function date(value: number | null) {
+  return value === null
+    ? "Not supplied by Stripe"
+    : new Date(value).toLocaleDateString(undefined, { timeZone: "UTC" });
+}
+export type PayoutHistoryRow = Pick<
+  PayoutRow,
+  "id" | "amount" | "currency" | "status" | "arrivalDate"
+>;
+export type PayoutHistoryProps<
+  Row extends PayoutHistoryRow = PayoutHistoryRow,
+> = Omit<CollectionProps<Row>, "columns" | "getKey"> & {
+  columns?: WorkflowColumn<Row>[];
+};
+export function PayoutHistory<Row extends PayoutHistoryRow>(
+  props: PayoutHistoryProps<Row>,
+) {
+  const columns: WorkflowColumn<Row>[] = [
+    { id: "id", label: "Payout ID", cell: (row) => row.id },
+    {
+      id: "amount",
+      label: "Amount",
+      align: "end",
+      cell: (row) => formatPrice(row.amount, row.currency),
+    },
+    { id: "status", label: "Status", cell: (row) => row.status },
+    {
+      id: "arrival",
+      label: "Arrival date",
+      cell: (row) => date(row.arrivalDate),
+    },
+  ];
+  return (
+    <Collection
+      emptyLabel="No payouts yet."
+      {...props}
+      getKey={(row) => row.id}
+      columns={props.columns ?? columns}
+    />
+  );
+}
+function NativePayouts({
+  data,
+  isLoading,
+  isPending,
+  error,
+  nextPayout,
+  previousPayouts,
+  upcomingPayouts,
+  refresh,
+  loadMore,
+}: PayoutsRenderProps) {
+  return (
+    <section data-better-stripe="payouts" aria-busy={isPending}>
+      <h2>Payouts</h2>
+      <button type="button" disabled={isPending} onClick={refresh}>
+        {isPending ? "Refreshing…" : "Refresh"}
+      </button>
+      {error && <p role="alert">{error}</p>}
+      {isLoading && !data && <p role="status">Loading payouts…</p>}
+      {data && (
+        <>
+          <dl>
+            {data.balances.map((balance) => (
+              <div key={balance.currency}>
+                <dt>Available</dt>
+                <dd>{formatPrice(balance.available, balance.currency)}</dd>
+                <dt>Pending</dt>
+                <dd>{formatPrice(balance.pending, balance.currency)}</dd>
+              </div>
+            ))}
+            <dt>Next payout</dt>
+            <dd>
+              {nextPayout
+                ? `${formatPrice(nextPayout.amount, nextPayout.currency)} · ${date(nextPayout.arrivalDate)}`
+                : "Not scheduled"}
+            </dd>
+          </dl>
+          <h3>Upcoming payouts</h3>
+          <PayoutHistory
+            rows={upcomingPayouts}
+            emptyLabel="No upcoming payouts scheduled."
+          />
+          <h3>Previous payouts</h3>
+          <PayoutHistory
+            rows={previousPayouts}
+            emptyLabel="No previous payouts yet."
+          />
+          {data.nextCursor && (
+            <button
+              type="button"
+              disabled={isPending}
+              onClick={() => {
+                void loadMore();
+              }}
+            >
+              {isPending ? "Loading…" : "Load more payouts"}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { useProductManager } from "./Products.js";
+afterEach(cleanup);
+it("validates product names and price minor units before mutation", async () => {
+  const createProduct = vi.fn().mockResolvedValue("prod_test");
+  const createPrice = vi.fn().mockResolvedValue("price_test");
+  const { result } = renderHook(() =>
+    useProductManager({ scopeKey: "seller", createProduct, createPrice }),
+  );
+  await act(async () => {
+    await result.current.handleCreateProduct();
+  });
+  expect(createProduct).not.toHaveBeenCalled();
+  act(() =>
+    result.current.setNewProduct({
+      name: "  Classic Tee  ",
+      description: "Cotton",
+    }),
+  );
+  await act(async () => {
+    await result.current.handleCreateProduct();
+  });
+  expect(createProduct).toHaveBeenCalledWith({
+    name: "Classic Tee",
+    description: "Cotton",
+  });
+  act(() =>
+    result.current.setNewPrice({
+      amount: "12.50",
+      currency: "usd",
+      interval: "one_time",
+    }),
+  );
+  await act(async () => {
+    await result.current.handleAddPrice("prod_test");
+  });
+  expect(createPrice).not.toHaveBeenCalled();
+  act(() =>
+    result.current.setNewPrice({
+      amount: "2900",
+      currency: "usd",
+      interval: "one_time",
+    }),
+  );
+  await act(async () => {
+    await result.current.handleAddPrice("prod_test");
+  });
+  expect(createPrice).toHaveBeenCalledWith({
+    stripeProductId: "prod_test",
+    unitAmount: 2900,
+    currency: "usd",
+    type: "one_time",
+    interval: undefined,
+  });
+});
+
+it("keeps the active product operation when a second operation is attempted", async () => {
+  let finish!: () => void;
+  const deactivateProduct = vi.fn(
+    () =>
+      new Promise<void>((resolve) => {
+        finish = resolve;
+      }),
+  );
+  const deactivatePrice = vi.fn();
+  const { result } = renderHook(() =>
+    useProductManager({
+      scopeKey: "seller",
+      createProduct: async () => null,
+      createPrice: async () => null,
+      deactivateProduct,
+      deactivatePrice,
+    }),
+  );
+  let pending!: Promise<unknown>;
+  act(() => {
+    pending = result.current.handleDeactivate("prod_one");
+  });
+  await act(async () => {
+    await result.current.handleDeactivatePrice("price_one");
+  });
+  expect(result.current.deactivatingId).toBe("prod_one");
+  expect(deactivatePrice).not.toHaveBeenCalled();
+  await act(async () => {
+    finish();
+    await pending;
+  });
+});