@fantastic.dev/better-stripe 0.8.0 → 0.9.0

package/src/react/workflows/AffiliateRateEditor.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { useId, useState, type ReactNode } from "react";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+export type AffiliateRateUpdate = {
+  affiliateBasisPoints: number | null;
+  expectedVersion: number;
+};
+export type AffiliateRateEditorState = {
+  percentage: string;
+  setPercentage: (value: string) => void;
+  effectiveLabel: string;
+  isPending: boolean;
+  error: string | null;
+  message: string | undefined;
+  save: () => Promise<unknown>;
+};
+export type AffiliateRateEditorProps = {
+  scopeKey: string;
+  affiliateBasisPoints: number | null;
+  effectiveBasisPoints: number;
+  source: "plan" | "product" | "price" | "store" | "global" | "none";
+  version: number;
+  onSave: (update: AffiliateRateUpdate) => Promise<unknown>;
+  children?: (state: AffiliateRateEditorState) => ReactNode;
+};
+/** Unstyled nullable commission editor. Blank inherits the next applicable rate. */
+export function AffiliateRateEditor(props: AffiliateRateEditorProps) {
+  const id = useId();
+  const scope = `${props.scopeKey}:${props.version}`;
+  const initial = {
+    scope,
+    percentage:
+      props.affiliateBasisPoints === null
+        ? ""
+        : String(props.affiliateBasisPoints / 100),
+  };
+  const [fields, setFields] = useState(initial);
+  if (fields.scope !== scope) setFields(initial);
+  const action = useWorkflowAction(async () => {
+    const value = fields.percentage.trim();
+    const rate = value === "" ? null : Math.round(Number(value) * 100);
+    if (
+      rate !== null &&
+      (!/^\d+(\.\d{1,2})?$/.test(value) ||
+        !Number.isSafeInteger(rate) ||
+        rate < 0 ||
+        rate > 10000)
+    )
+      throw new Error(
+        "Enter a percentage from 0 to 100 with at most two decimal places, or leave it blank to inherit.",
+      );
+    await props.onSave({
+      affiliateBasisPoints: rate,
+      expectedVersion: props.version,
+    });
+    return "Affiliate payout saved.";
+  }, props.scopeKey);
+  const state: AffiliateRateEditorState = {
+    percentage: fields.percentage,
+    setPercentage: (percentage) =>
+      setFields((previous) => ({ ...previous, percentage })),
+    effectiveLabel: `Effective payout: ${props.effectiveBasisPoints / 100}% from ${props.source === "plan" ? "store plan" : props.source}.`,
+    isPending: action.isPending,
+    error: action.error,
+    message: action.result,
+    save: action.run,
+  };
+  if (props.children) return <>{props.children(state)}</>;
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        void state.save();
+      }}
+    >
+      <label htmlFor={id}>Affiliate payout (%)</label>
+      <input
+        id={id}
+        inputMode="decimal"
+        value={state.percentage}
+        disabled={state.isPending}
+        onChange={(event) => state.setPercentage(event.target.value)}
+      />
+      <p>{state.effectiveLabel} Leave blank to inherit.</p>
+      {state.error && <p role="alert">{state.error}</p>}
+      {state.message && <p role="status">{state.message}</p>}
+      <button type="submit" disabled={state.isPending}>
+        {state.isPending ? "Saving…" : "Save payout"}
+      </button>
+    </form>
+  );
+}

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

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { ReactNode } from "react";
 const mocks = vi.hoisted(() => ({
+  sessionEmail: null as string | null,
   updateEmail: vi.fn(),
   confirm: vi.fn(),
   submit: vi.fn(),
@@ -21,6 +22,7 @@ vi.mock("@stripe/react-stripe-js/checkout", () => ({
     type: "success",
     checkout: {
       id: "cs_test",
+      email: mocks.sessionEmail,
       canConfirm: false,
       updateEmail: mocks.updateEmail,
       confirm: mocks.confirm,
@@ -36,6 +38,7 @@ import { CheckoutElementsForm, PaymentIntentForm } from "./CheckoutForms.js";
 afterEach(cleanup);
 beforeEach(() => {
   vi.clearAllMocks();
+  mocks.sessionEmail = null;
   mocks.updateEmail.mockResolvedValue({ type: "success" });
   mocks.confirm.mockResolvedValue({
     type: "error",
@@ -53,6 +56,27 @@ const props = {
   email: "buyer@example.com",
   onNavigate: vi.fn(),
 };
+it("confirms a session with a server-set email without attempting to update it", async () => {
+  mocks.sessionEmail = "account@example.com";
+  mocks.updateEmail.mockResolvedValue({
+    type: "error",
+    error: { message: "You cannot update the email" },
+  });
+  mocks.confirm.mockResolvedValue({ type: "success" });
+  const navigate = vi.fn();
+  render(<CheckoutElementsForm {...props} onNavigate={navigate} />);
+  const input = screen.getByRole("textbox", {
+    name: "Email for your receipt",
+  }) as HTMLInputElement;
+  expect(input.value).toBe("account@example.com");
+  expect(input.readOnly).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  expect(mocks.updateEmail).not.toHaveBeenCalled();
+  expect(mocks.confirm).toHaveBeenCalledOnce();
+  expect(navigate).toHaveBeenCalledWith(
+    "https://app.test/receipt?session_id=cs_test",
+  );
+});
 it("sends the email before confirming, including when canConfirm is initially false", async () => {
   render(<CheckoutElementsForm {...props} />);
   await userEvent.click(screen.getByRole("button", { name: "Pay" }));
@@ -70,6 +94,22 @@ it("does not confirm after Stripe rejects the email", async () => {
   expect(screen.getByRole("alert").textContent).toContain("Invalid email");
   expect(mocks.confirm).not.toHaveBeenCalled();
 });
+it("keeps a guest email editable after a declined payment", async () => {
+  mocks.updateEmail.mockImplementation(async (email: string) => {
+    mocks.sessionEmail = email;
+    return { type: "success" };
+  });
+  render(<CheckoutElementsForm {...props} />);
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  await screen.findByText("Card declined");
+  const input = screen.getByRole("textbox", { name: "Email for your receipt" });
+  expect((input as HTMLInputElement).readOnly).toBe(false);
+  await userEvent.clear(input);
+  await userEvent.type(input, "other@example.com");
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  expect(mocks.updateEmail).toHaveBeenLastCalledWith("other@example.com");
+  expect(mocks.confirm).toHaveBeenCalledTimes(2);
+});
 it("disables confirmation while Stripe is processing and supports a new attempt after failure", async () => {
   let resolve!: (value: unknown) => void;
   mocks.confirm.mockImplementationOnce(

package/src/react/workflows/CheckoutForms.tsx

@@ -24,6 +24,8 @@ import { StripeProvider } from "../components/StripeProvider.js";
 import { useWorkflowAction } from "./useWorkflowAction.js";
 export type CheckoutFormState = {
   email: string;
+  /** Stripe supplied this email when the session loaded; do not edit it. */
+  emailReadOnly?: boolean;
   setEmail: (email: string) => void;
   emailInputId: string;
   isPending: boolean;
@@ -44,6 +46,7 @@ export type CheckoutFormProps = CheckoutFormOptions & {
 };
 function NativeForm({
   email,
+  emailReadOnly,
   setEmail,
   emailInputId,
   paymentElement,
@@ -65,6 +68,7 @@ function NativeForm({
         required
         autoComplete="email"
         value={email}
+        readOnly={emailReadOnly}
         onChange={(event) => setEmail(event.target.value)}
       />
       {paymentElement}
@@ -86,31 +90,48 @@ export function CheckoutElementsForm(props: CheckoutFormProps) {
     </CheckoutSessionProvider>
   );
 }
-function SessionForm({
+function SessionForm(props: CheckoutFormProps) {
+  const checkout = useCheckout();
+  if (checkout.type === "loading")
+    return <p role="status">Loading checkout…</p>;
+  if (checkout.type === "error")
+    return <p role="alert">{checkout.error.message}</p>;
+  return (
+    <ReadySessionForm
+      key={checkout.checkout.id}
+      {...props}
+      checkout={checkout.checkout}
+    />
+  );
+}
+function ReadySessionForm({
+  checkout,
   email: initialEmail = "",
   returnUrl,
   onNavigate,
   renderForm,
-}: CheckoutFormProps) {
-  const checkout = useCheckout();
-  const [email, setEmail] = useState(initialEmail);
+}: CheckoutFormProps & {
+  checkout: Extract<
+    ReturnType<typeof useCheckout>,
+    { type: "success" }
+  >["checkout"];
+}) {
+  // Snapshot once per session: a guest update must not lock their input on retry.
+  const [sessionEmail] = useState(() => checkout.email);
+  const [email, setEmail] = useState(sessionEmail ?? initialEmail);
   const emailInputId = useId();
   const action = useWorkflowAction(async () => {
-    if (checkout.type !== "success") throw new Error("Checkout is not ready.");
-    const updated = await checkout.checkout.updateEmail(email);
-    if (updated.type === "error") throw new Error(updated.error.message);
-    const confirmed = await checkout.checkout.confirm();
+    if (!sessionEmail) {
+      const updated = await checkout.updateEmail(email);
+      if (updated.type === "error") throw new Error(updated.error.message);
+    }
+    const confirmed = await checkout.confirm();
     if (confirmed.type === "error") throw new Error(confirmed.error.message);
-    onNavigate(
-      returnUrl.replace("{CHECKOUT_SESSION_ID}", checkout.checkout.id),
-    );
+    onNavigate(returnUrl.replace("{CHECKOUT_SESSION_ID}", checkout.id));
   });
-  if (checkout.type === "loading")
-    return <p role="status">Loading checkout…</p>;
-  if (checkout.type === "error")
-    return <p role="alert">{checkout.error.message}</p>;
   const state: CheckoutFormState = {
-    email,
+    email: sessionEmail ?? email,
+    emailReadOnly: !!sessionEmail,
     setEmail,
     emailInputId,
     paymentElement: <PaymentElement />,

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

@@ -1,7 +1,14 @@
 // @vitest-environment jsdom
-import { act, cleanup, renderHook } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  renderHook,
+  render,
+  screen,
+  fireEvent,
+} from "@testing-library/react";
 import { afterEach, expect, it, vi } from "vitest";
-import { useDisputeResponse } from "./Disputes.js";
+import { Disputes, useDisputeResponse } from "./Disputes.js";
 afterEach(cleanup);
 it("requires explicit confirmation and clears it when selecting another dispute", async () => {
   const acceptDispute = vi.fn().mockResolvedValue(null);
@@ -23,3 +30,35 @@ it("requires explicit confirmation and clears it when selecting another dispute"
   expect(acceptDispute).toHaveBeenCalledWith("dp_two");
   expect(result.current.acceptStatus).toBe("accepted");
 });
+
+it.each(["won", "lost", "under_review"] as const)(
+  "keeps %s disputes read-only",
+  (status) => {
+    const detail = {
+      _id: "doc",
+      _creationTime: 0,
+      stripeDisputeId: "dp_closed",
+      amount: 1000,
+      currency: "usd",
+      status,
+      reason: "product_not_received",
+      isChargeRefundable: false,
+      countdown: { daysRemaining: 9, isOverdue: false },
+    };
+    render(
+      <Disputes
+        scopeKey="seller"
+        disputes={[detail]}
+        detail={detail}
+        acceptDispute={vi.fn()}
+        onUpdateEvidence={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /dp_closed/ }));
+    expect(screen.queryByRole("button", { name: "Accept dispute" })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Submit evidence" }),
+    ).toBeNull();
+    expect(screen.queryByText("Evidence due in 9 days")).toBeNull();
+  },
+);

package/src/react/workflows/Disputes.tsx

@@ -4,7 +4,10 @@ import {
   DisputesList,
   type DisputesListRow,
 } from "../components/DisputesList.js";
-import { DisputeDetail } from "../components/DisputeDetail.js";
+import {
+  DisputeDetail,
+  canRespondToDispute,
+} from "../components/DisputeDetail.js";
 import {
   EvidenceForm,
   type EvidenceFormUpdateArgs,
@@ -118,45 +121,51 @@ function DisputesBody(props: HeadlessDisputesProps) {
       ) : (
         <>
           <DisputeDetail dispute={detail} isLoading={!detail} />
-          {props.acceptDispute &&
-            (state.acceptStatus === "confirming" ? (
-              <div>
-                <p>
-                  Accepting permanently closes this dispute. This cannot be
-                  undone.
-                </p>
-                <button
-                  type="button"
-                  disabled={state.isPending}
-                  onClick={() => {
-                    void state.accept();
-                  }}
-                >
-                  Yes, accept dispute
-                </button>
-                <button type="button" onClick={state.cancelAccept}>
-                  Cancel
-                </button>
-              </div>
-            ) : (
-              <button
-                type="button"
-                disabled={state.isPending || state.acceptStatus === "accepted"}
-                onClick={state.requestAccept}
-              >
-                {state.isPending
-                  ? "Accepting…"
-                  : state.acceptStatus === "accepted"
-                    ? "Dispute accepted"
-                    : "Accept dispute"}
-              </button>
-            ))}
-          {state.acceptError && <p role="alert">{state.acceptError}</p>}
-          <EvidenceForm
-            key={state.selectedId}
-            stripeDisputeId={state.selectedId}
-            onUpdateDispute={props.onUpdateEvidence}
-          />
+          {canRespondToDispute(detail?.status) && (
+            <>
+              {props.acceptDispute &&
+                (state.acceptStatus === "confirming" ? (
+                  <div>
+                    <p>
+                      Accepting permanently closes this dispute. This cannot be
+                      undone.
+                    </p>
+                    <button
+                      type="button"
+                      disabled={state.isPending}
+                      onClick={() => {
+                        void state.accept();
+                      }}
+                    >
+                      Yes, accept dispute
+                    </button>
+                    <button type="button" onClick={state.cancelAccept}>
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    disabled={
+                      state.isPending || state.acceptStatus === "accepted"
+                    }
+                    onClick={state.requestAccept}
+                  >
+                    {state.isPending
+                      ? "Accepting…"
+                      : state.acceptStatus === "accepted"
+                        ? "Dispute accepted"
+                        : "Accept dispute"}
+                  </button>
+                ))}
+              {state.acceptError && <p role="alert">{state.acceptError}</p>}
+              <EvidenceForm
+                key={state.selectedId}
+                stripeDisputeId={state.selectedId}
+                onUpdateDispute={props.onUpdateEvidence}
+              />
+            </>
+          )}
         </>
       )}
     </section>

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

@@ -34,3 +34,28 @@ it("allows an uncontrolled choice without requiring a router", async () => {
   expect(screen.getByText("Stripe component")).toBeTruthy();
   expect(screen.queryByText("API controls")).toBeNull();
 });
+it("names API, BetterStripe components, and Stripe UI distinctly while preserving mode values", async () => {
+  const changed = vi.fn();
+  render(
+    <IntegrationSwitch
+      views={{
+        headless: <p>API controls</p>,
+        components: <p>Package UI</p>,
+        embedded: <p>Stripe embed</p>,
+        hosted: <p>Stripe portal</p>,
+      }}
+      onValueChange={changed}
+    />,
+  );
+  expect(screen.getByRole("button", { name: "via API" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Stripe embedded" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Stripe hosted" })).toBeTruthy();
+  await userEvent.click(
+    screen.getByRole("button", { name: "BetterStripe components" }),
+  );
+  expect(changed).toHaveBeenLastCalledWith("components");
+  expect(screen.getByText("Package UI")).toBeTruthy();
+  await userEvent.click(screen.getByRole("button", { name: "via API" }));
+  expect(changed).toHaveBeenLastCalledWith("headless");
+  expect(screen.queryByRole("button", { name: "Headless" })).toBeNull();
+});

package/src/react/workflows/IntegrationSwitch.tsx

@@ -2,8 +2,8 @@
 import { useState, type ReactNode } from "react";
 export type IntegrationMode = "headless" | "components" | "embedded" | "hosted";
 const labels: Record<IntegrationMode, string> = {
-  headless: "Headless",
-  components: "Components",
+  headless: "via API",
+  components: "BetterStripe components",
   embedded: "Stripe embedded",
   hosted: "Stripe hosted",
 };

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

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it } from "vitest";
+import { Pagination, useCursorPagination } from "./Pagination.js";
+afterEach(cleanup);
+it("navigates cursor history and resets when the account changes", async () => {
+  function View({ account }: { account: string }) {
+    const state = useCursorPagination(account);
+    return (
+      <>
+        <output>{state.cursor ?? "first"}</output>
+        <Pagination
+          page={state.page}
+          canPrevious={state.canPrevious}
+          canNext={state.page < 3}
+          onPrevious={state.previous}
+          onNext={() => state.next(`cursor-${state.page}`)}
+        />
+      </>
+    );
+  }
+  const { rerender } = render(<View account="a" />);
+  expect(
+    screen.getByRole("button", { name: "Previous" }).hasAttribute("disabled"),
+  ).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Next" }));
+  expect(screen.getByText("cursor-1")).toBeTruthy();
+  await userEvent.click(screen.getByRole("button", { name: "Next" }));
+  expect(screen.getByText("Page 3")).toBeTruthy();
+  expect(
+    screen.getByRole("button", { name: "Next" }).hasAttribute("disabled"),
+  ).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Previous" }));
+  expect(screen.getByText("cursor-1")).toBeTruthy();
+  rerender(<View account="b" />);
+  expect(screen.getByText("Page 1")).toBeTruthy();
+  expect(screen.getByText("first")).toBeTruthy();
+});
+it("disables navigation while a page is loading", () => {
+  render(
+    <Pagination
+      page={2}
+      canPrevious
+      canNext
+      isLoading
+      onPrevious={() => {}}
+      onNext={() => {}}
+    />,
+  );
+  for (const button of screen.getAllByRole("button"))
+    expect(button.hasAttribute("disabled")).toBe(true);
+});

package/src/react/workflows/Pagination.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { useState, type ReactNode } from "react";
+
+/** Cursor history for bounded server pages. Changing scope resets navigation. */
+export function useCursorPagination(scopeKey: string) {
+  const initial = { scopeKey, cursors: [null] as (string | null)[], index: 0 };
+  const [state, setState] = useState(initial);
+  const current = state.scopeKey === scopeKey ? state : initial;
+  if (state.scopeKey !== scopeKey) setState(initial);
+  return {
+    cursor: current.cursors[current.index],
+    page: current.index + 1,
+    canPrevious: current.index > 0,
+    previous: () =>
+      setState((previous) => ({
+        ...previous,
+        index: Math.max(0, previous.index - 1),
+      })),
+    next: (cursor: string) =>
+      setState((previous) => ({
+        ...previous,
+        cursors: [...previous.cursors.slice(0, previous.index + 1), cursor],
+        index: previous.index + 1,
+      })),
+  };
+}
+export type PaginationProps = {
+  page: number;
+  canPrevious: boolean;
+  canNext: boolean;
+  isLoading?: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  previousLabel?: string;
+  nextLabel?: string;
+  pageLabel?: string;
+  children?: (state: {
+    pageLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    previousDisabled: boolean;
+    nextDisabled: boolean;
+    previous: () => void;
+    next: () => void;
+  }) => ReactNode;
+};
+/** Unstyled navigation with render props for application design systems. */
+export function Pagination({
+  page,
+  canPrevious,
+  canNext,
+  isLoading = false,
+  onPrevious,
+  onNext,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  pageLabel = `Page ${page}`,
+  children,
+}: PaginationProps) {
+  const previousDisabled = isLoading || !canPrevious;
+  const nextDisabled = isLoading || !canNext;
+  const state = {
+    pageLabel,
+    previousLabel,
+    nextLabel,
+    previousDisabled,
+    nextDisabled,
+    previous: () => {
+      if (!previousDisabled) onPrevious();
+    },
+    next: () => {
+      if (!nextDisabled) onNext();
+    },
+  };
+  if (children) return <>{children(state)}</>;
+  return (
+    <nav aria-label="Pagination">
+      <button
+        type="button"
+        disabled={previousDisabled}
+        onClick={state.previous}
+      >
+        {previousLabel}
+      </button>
+      <span role="status" aria-live="polite">
+        {pageLabel}
+      </span>
+      <button type="button" disabled={nextDisabled} onClick={state.next}>
+        {nextLabel}
+      </button>
+    </nav>
+  );
+}

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

@@ -80,3 +80,33 @@ it("exports payout history with explicit empty/loading states and date formattin
   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

@@ -30,6 +30,7 @@ export type PayoutsRenderProps = {
   isPending: boolean;
   nextPayout: PayoutRow | undefined;
   previousPayouts: PayoutRow[];
+  upcomingPayouts: PayoutRow[];
   refresh: () => void;
   loadMore: () => Promise<void>;
 };
@@ -101,6 +102,7 @@ function PayoutsBody({ load, scopeKey, children }: HeadlessPayoutsProps) {
     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,
@@ -155,6 +157,7 @@ function NativePayouts({
   error,
   nextPayout,
   previousPayouts,
+  upcomingPayouts,
   refresh,
   loadMore,
 }: PayoutsRenderProps) {
@@ -186,7 +189,7 @@ function NativePayouts({
           </dl>
           <h3>Upcoming payouts</h3>
           <PayoutHistory
-            rows={data.upcoming}
+            rows={upcomingPayouts}
             emptyLabel="No upcoming payouts scheduled."
           />
           <h3>Previous payouts</h3>