@fantastic.dev/better-stripe 0.6.1 → 0.8.0

package/src/component/_generated/api.ts

@@ -19,6 +19,7 @@ import type * as core_queries from "../core/queries.js";
 import type * as core_validators from "../core/validators.js";
 import type * as lib_fees from "../lib/fees.js";
 import type * as lib_idempotency from "../lib/idempotency.js";
+import type * as lib_paymentSeller from "../lib/paymentSeller.js";
 import type * as lib_reversals from "../lib/reversals.js";
 import type * as lib_stripeFactory from "../lib/stripeFactory.js";
 import type * as products_mutations from "../products/mutations.js";
@@ -47,6 +48,7 @@ const fullApi: ApiFromModules<{
   "core/validators": typeof core_validators;
   "lib/fees": typeof lib_fees;
   "lib/idempotency": typeof lib_idempotency;
+  "lib/paymentSeller": typeof lib_paymentSeller;
   "lib/reversals": typeof lib_reversals;
   "lib/stripeFactory": typeof lib_stripeFactory;
   "products/mutations": typeof products_mutations;

package/src/component/_generated/component.ts

@@ -592,6 +592,52 @@ export type ComponentApi<Name extends string | undefined = string | undefined> =
           }>,
           Name
         >;
+        listSubscriptionsByPrice: FunctionReference<
+          "query",
+          "internal",
+          { priceId: string },
+          Array<{
+            _creationTime: number;
+            _id: string;
+            accountId?: string;
+            applicationFeeAmount?: number;
+            applicationFeePercent?: number;
+            cancelAtPeriodEnd: boolean;
+            canceledAt?: string;
+            chargeType?: "destination" | "separate";
+            currency?: string;
+            currentPeriodEnd?: string;
+            currentPeriodStart?: string;
+            destinationAccountId?: string;
+            feeCollectedAmount?: number;
+            feeRefundedAmount?: number;
+            isTrialing: boolean;
+            metadata?: any;
+            orgId?: string;
+            priceId?: string;
+            quantity?: number;
+            splitRecipients?: Array<{
+              amount?: number;
+              destinationAccountId: string;
+              percent?: number;
+              role: "store" | "affiliate" | "other";
+            }>;
+            status:
+              | "active"
+              | "trialing"
+              | "past_due"
+              | "canceled"
+              | "incomplete"
+              | "incomplete_expired"
+              | "unpaid"
+              | "paused";
+            stripeSubscriptionId: string;
+            trialEnd?: string;
+            trialStart?: string;
+            userId: string;
+          }>,
+          Name
+        >;
         listSubscriptionsByUser: FunctionReference<
           "query",
           "internal",

package/src/component/billing/queries.ts

@@ -376,3 +376,15 @@ export const listInvoices = query({
     return await ctx.db.query("invoices").take(limit);
   },
 });
+
+/** Seller subscriber lists use catalog prices, including referred subscriptions. */
+export const listSubscriptionsByPrice = query({
+  args: { priceId: v.string() },
+  returns: v.array(subscriptionDocValidator),
+  handler: async (ctx, args) =>
+    ctx.db
+      .query("subscriptions")
+      .withIndex("by_price_id", (q) => q.eq("priceId", args.priceId))
+      .order("desc")
+      .take(100),
+});

package/src/component/billing/schema.ts

@@ -11,6 +11,7 @@ import {
  */
 export const subscriptionsTable = defineTable(subscriptionFields)
   .index("by_stripe_subscription_id", ["stripeSubscriptionId"])
+  .index("by_price_id", ["priceId"])
   .index("by_user_id", ["userId"])
   .index("by_org_id", ["orgId"])
   .index("by_status", ["status"])

package/src/component/connect/mutations.ts

@@ -3,7 +3,8 @@ import { v } from "convex/values";
 import type { Doc, Id } from "../_generated/dataModel";
 import { mutation } from "../_generated/server";
 import { feeRoutingFields } from "../lib/fees";
-import { computeReversalSlices } from "../lib/reversals";
+import { computeReversalSlices, deriveReversalState } from "../lib/reversals";
+import { paymentSeller } from "../lib/paymentSeller";
 import {
   disputeFields,
   paymentStatusValidator,
@@ -12,9 +13,7 @@ import {
   transferFields,
 } from "./validators";
 
-// =============================================================================
-// PAYMENT MUTATIONS
-// =============================================================================
+// Payment mutations
 
 export const upsertPayment = mutation({
   args: {
@@ -87,13 +86,31 @@ export const upsertPayment = mutation({
       }
     }
 
+    // A refund/dispute can arrive before the platform charge has its seller
+    // routing metadata. Reconcile those case owners once routing is known.
+    const sellerAccountId =
+      args.destinationAccountId ?? existing?.destinationAccountId;
+    if (sellerAccountId) {
+      for (const table of ["refunds", "disputes"] as const) {
+        const cases = await ctx.db
+          .query(table)
+          .withIndex("by_stripe_payment_intent_id", (q) =>
+            q.eq("stripePaymentIntentId", args.stripePaymentIntentId),
+          )
+          .take(100);
+        for (const record of cases)
+          if (!record.accountId)
+            await ctx.db.patch(table, record._id, {
+              accountId: sellerAccountId,
+            });
+      }
+    }
+
     return null;
   },
 });
 
-// =============================================================================
-// PAYOUT MUTATIONS
-// =============================================================================
+// Payout mutations
 
 export const upsertPayout = mutation({
   args: {
@@ -140,10 +157,13 @@ export const upsertRefund = mutation({
       )
       .first();
 
+    const accountId =
+      args.accountId ?? (await paymentSeller(ctx, args.stripePaymentIntentId));
+    const record = { ...args, ...(accountId ? { accountId } : {}) };
     if (existing) {
-      await ctx.db.patch("refunds", existing._id, args);
+      await ctx.db.patch("refunds", existing._id, record);
     } else {
-      await ctx.db.insert("refunds", args);
+      await ctx.db.insert("refunds", record);
     }
 
     // Denormalize cumulative refund state onto the linked `payments` row so
@@ -278,10 +298,13 @@ export const upsertDispute = mutation({
       )
       .first();
 
+    const accountId =
+      args.accountId ?? (await paymentSeller(ctx, args.stripePaymentIntentId));
+    const record = { ...args, ...(accountId ? { accountId } : {}) };
     if (existing) {
-      await ctx.db.patch("disputes", existing._id, args);
+      await ctx.db.patch("disputes", existing._id, record);
     } else {
-      await ctx.db.insert("disputes", args);
+      await ctx.db.insert("disputes", record);
     }
 
     return null;
@@ -292,30 +315,6 @@ export const upsertDispute = mutation({
 // TRANSFER MUTATIONS (ledger — BTS-12)
 // =============================================================================
 
-/**
- * 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.
- */
-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,
-  };
-}
-
 export const upsertTransfer = mutation({
   args: transferFields,
   returns: v.null(),

package/src/component/connect/schema.ts

@@ -34,9 +34,10 @@ export const payoutsTable = defineTable(payoutFields)
  * (BTS-103). One row per payment intent; consumed and deleted by
  * `upsertPayment`'s insert branch.
  */
-export const pendingFeeRefundsTable = defineTable(
-  pendingFeeRefundFields,
-).index("by_stripe_payment_intent_id", ["stripePaymentIntentId"]);
+export const pendingFeeRefundsTable = defineTable(pendingFeeRefundFields).index(
+  "by_stripe_payment_intent_id",
+  ["stripePaymentIntentId"],
+);
 
 /**
  * Refunds. Compound status indexes follow Plan 002: filtered list queries

package/src/component/connect.test.ts

@@ -15,11 +15,7 @@ describe("connect — refunds", () => {
       stripePaymentIntentId?: string;
       accountId?: string;
       status:
-        | "pending"
-        | "requires_action"
-        | "succeeded"
-        | "failed"
-        | "canceled";
+        "pending" | "requires_action" | "succeeded" | "failed" | "canceled";
     },
   ) => {
     await t.mutation(api.connect.mutations.upsertRefund, {

package/src/component/lib/paymentSeller.ts

@@ -0,0 +1,15 @@
+import type { MutationCtx } from "../_generated/server";
+
+export async function paymentSeller(
+  ctx: MutationCtx,
+  stripePaymentIntentId?: string,
+): Promise<string | undefined> {
+  if (!stripePaymentIntentId) return undefined;
+  const payment = await ctx.db
+    .query("payments")
+    .withIndex("by_stripe_payment_intent_id", (q) =>
+      q.eq("stripePaymentIntentId", stripePaymentIntentId),
+    )
+    .first();
+  return payment?.destinationAccountId;
+}

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/seller-case-ownership.test.ts

@@ -0,0 +1,61 @@
+import { convexTest } from "convex-test";
+import { expect, it } from "vitest";
+import { api } from "./_generated/api";
+import schema from "./schema";
+const modules = import.meta.glob("./**/*.*s");
+const payment = {
+  stripePaymentIntentId: "pi_sale",
+  userId: "customer",
+  amount: 10000,
+  currency: "usd",
+  status: "succeeded" as const,
+  destinationAccountId: "acct_store",
+  chargeType: "separate" as const,
+};
+const refund = {
+  stripeRefundId: "re_sale",
+  stripePaymentIntentId: "pi_sale",
+  amount: 1000,
+  currency: "usd",
+  status: "succeeded" as const,
+};
+const dispute = {
+  stripeDisputeId: "dp_sale",
+  stripePaymentIntentId: "pi_sale",
+  amount: 10000,
+  currency: "usd",
+  status: "needs_response" as const,
+  reason: "product_not_received",
+  isChargeRefundable: false,
+};
+it("attributes refunds and disputes to the seller instead of the purchasing customer", async () => {
+  const t = convexTest(schema, modules);
+  await t.mutation(api.connect.mutations.upsertPayment, payment);
+  await t.mutation(api.connect.mutations.upsertRefund, refund);
+  await t.mutation(api.connect.mutations.upsertDispute, dispute);
+  expect(
+    await t.query(api.connect.queries.listRefunds, { accountId: "acct_store" }),
+  ).toHaveLength(1);
+  expect(
+    await t.query(api.connect.queries.listDisputes, {
+      accountId: "acct_store",
+    }),
+  ).toHaveLength(1);
+  expect(
+    await t.query(api.connect.queries.listRefunds, { accountId: "acct_other" }),
+  ).toHaveLength(0);
+});
+it("reconciles cases delivered before the seller's settlement metadata", async () => {
+  const t = convexTest(schema, modules);
+  await t.mutation(api.connect.mutations.upsertRefund, refund);
+  await t.mutation(api.connect.mutations.upsertDispute, dispute);
+  await t.mutation(api.connect.mutations.upsertPayment, payment);
+  expect(
+    await t.query(api.connect.queries.listRefunds, { accountId: "acct_store" }),
+  ).toHaveLength(1);
+  expect(
+    await t.query(api.connect.queries.listDisputes, {
+      accountId: "acct_store",
+    }),
+  ).toHaveLength(1);
+});

package/src/component/store-subscriptions.test.ts

@@ -0,0 +1,32 @@
+import { convexTest } from "convex-test";
+import { expect, it } from "vitest";
+import { api } from "./_generated/api";
+import schema from "./schema";
+const modules = import.meta.glob("./**/*.*s");
+it("scopes seller subscriptions by catalog price for both destination and split sales", async () => {
+  const t = convexTest(schema, modules);
+  await t.run(async (ctx) => {
+    for (const [id, priceId] of [
+      ["sub_direct", "price_seller"],
+      ["sub_referred", "price_seller"],
+      ["sub_other", "price_other"],
+    ]) {
+      await ctx.db.insert("subscriptions", {
+        stripeSubscriptionId: id,
+        priceId,
+        userId: "customer",
+        status: "active",
+        cancelAtPeriodEnd: false,
+        isTrialing: false,
+        isCollectionPaused: false,
+      });
+    }
+  });
+  const rows = await t.query(api.billing.queries.listSubscriptionsByPrice, {
+    priceId: "price_seller",
+  });
+  expect(rows.map((s) => s.stripeSubscriptionId).sort()).toEqual([
+    "sub_direct",
+    "sub_referred",
+  ]);
+});

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/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 ? (