@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

package/src/components/tables/__tests__/ContentListTable.test.tsx

@@ -75,13 +75,7 @@ describe("ContentListTable", () => {
         ],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByRole("table")).toBeInTheDocument();
     });
@@ -97,7 +91,7 @@ describe("ContentListTable", () => {
           tableGeneratorType={mockModule as any}
           fields={["id", "title"]}
           title="Articles"
-        />
+        />,
       );
 
       expect(screen.getByText("Articles")).toBeInTheDocument();
@@ -108,13 +102,7 @@ describe("ContentListTable", () => {
         data: [{ id: "1", title: "Article 1" }],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("ID")).toBeInTheDocument();
       expect(screen.getByText("Title")).toBeInTheDocument();
@@ -128,13 +116,7 @@ describe("ContentListTable", () => {
         ],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("1")).toBeInTheDocument();
       expect(screen.getByText("First Article")).toBeInTheDocument();
@@ -147,13 +129,7 @@ describe("ContentListTable", () => {
         data: [],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("No results.")).toBeInTheDocument();
     });
@@ -172,7 +148,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           allowSearch={true}
-        />
+        />,
       );
 
       expect(screen.getByTestId("content-table-search")).toBeInTheDocument();
@@ -187,13 +163,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons
       const buttons = screen.getAllByRole("button");
@@ -207,13 +177,7 @@ describe("ContentListTable", () => {
         previous: undefined,
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const previousButton = buttons[0];
@@ -227,13 +191,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const nextButton = buttons[buttons.length - 1];
@@ -249,13 +207,7 @@ describe("ContentListTable", () => {
         next: nextFn,
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const nextButton = buttons[buttons.length - 1];
@@ -274,13 +226,7 @@ describe("ContentListTable", () => {
         next: vi.fn(), // Need both to show footer
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const previousButton = buttons[0];
@@ -300,13 +246,7 @@ describe("ContentListTable", () => {
         },
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("1-25")).toBeInTheDocument();
     });
@@ -325,7 +265,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           functions={<button data-testid="custom-function">Custom</button>}
-        />
+        />,
       );
 
       expect(screen.getByTestId("custom-function")).toBeInTheDocument();
@@ -343,7 +283,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           filters={<div data-testid="custom-filter">Filter</div>}
-        />
+        />,
       );
 
       expect(screen.getByTestId("custom-filter")).toBeInTheDocument();
@@ -362,7 +302,7 @@ describe("ContentListTable", () => {
           tableGeneratorType={mockModule as any}
           fields={["id", "title"]}
           functions={<button>Action</button>}
-        />
+        />,
       );
 
       // Footer should be present with buttons
@@ -376,13 +316,7 @@ describe("ContentListTable", () => {
         next: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons in footer
       const buttons = screen.getAllByRole("button");
@@ -395,13 +329,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons in footer
       const buttons = screen.getAllByRole("button");

package/src/components/tables/cells/cell.component.tsx

@@ -11,7 +11,7 @@ export const cellComponent = (params: {
     id: params.name,
     accessorKey: params.name,
     header: params.title,
-    cell: ({ row }) => params.component,
+    cell: ({ row: _row }) => params.component,
     enableSorting: false,
     enableHiding: false,
   };

package/src/contexts/HeaderChildrenContext.tsx

@@ -20,7 +20,9 @@ interface HeaderChildrenProviderProps {
  * Wrap your layout with this provider and pass the content you want in the header.
  */
 export function HeaderChildrenProvider({ children, content }: HeaderChildrenProviderProps) {
-  return <HeaderChildrenContext.Provider value={{ headerChildren: content }}>{children}</HeaderChildrenContext.Provider>;
+  return (
+    <HeaderChildrenContext.Provider value={{ headerChildren: content }}>{children}</HeaderChildrenContext.Provider>
+  );
 }
 
 /**

package/src/core/endpoint/__tests__/EndpointCreator.test.ts

@@ -74,10 +74,7 @@ describe("EndpointCreator", () => {
     });
 
     it("should support full fluent chain", () => {
-      const creator = new EndpointCreator({ endpoint: "articles" })
-        .id("123")
-        .childEndpoint("comments")
-        .childId("456");
+      const creator = new EndpointCreator({ endpoint: "articles" }).id("123").childEndpoint("comments").childId("456");
       expect(creator.generate()).toBe("articles/123/comments/456");
     });
   });
@@ -141,9 +138,7 @@ describe("EndpointCreator", () => {
         { type: "articles", fields: ["title", "body"] },
         { type: "authors", fields: ["name", "email"] },
       ]);
-      expect(creator.generate()).toBe(
-        "articles?fields[articles]=title,body&fields[authors]=name,email"
-      );
+      expect(creator.generate()).toBe("articles?fields[articles]=title,body&fields[authors]=name,email");
     });
 
     it("should handle empty selectors array", () => {

package/src/core/factories/__tests__/JsonApiDataFactory.test.ts

@@ -74,9 +74,9 @@ describe("JsonApiDataFactory", () => {
     it("should throw for unregistered module", () => {
       const unregisteredModule = { name: "unknown", model: MockDataClass };
 
-      expect(() =>
-        JsonApiDataFactory.create(unregisteredModule as any, { data: "test" })
-      ).toThrow("Class not registered for key: unknown");
+      expect(() => JsonApiDataFactory.create(unregisteredModule as any, { data: "test" })).toThrow(
+        "Class not registered for key: unknown",
+      );
     });
 
     it("should handle empty data", () => {

package/src/core/factories/__tests__/RehydrationFactory.test.ts

@@ -72,9 +72,9 @@ describe("RehydrationFactory", () => {
         included: [],
       };
 
-      expect(() =>
-        RehydrationFactory.rehydrate(unregisteredModule as any, hydratedData)
-      ).toThrow("Class not registered for key: unknown");
+      expect(() => RehydrationFactory.rehydrate(unregisteredModule as any, hydratedData)).toThrow(
+        "Class not registered for key: unknown",
+      );
     });
 
     it("should create a new instance for rehydration", () => {
@@ -128,9 +128,7 @@ describe("RehydrationFactory", () => {
       const unregisteredModule = { name: "unknown", model: MockDataClass };
 
       expect(() =>
-        RehydrationFactory.rehydrateList(unregisteredModule as any, [
-          { jsonApi: {}, included: [] },
-        ])
+        RehydrationFactory.rehydrateList(unregisteredModule as any, [{ jsonApi: {}, included: [] }]),
       ).toThrow("Class not registered for key: unknown");
     });
 

package/src/core/index.ts

@@ -40,6 +40,7 @@ export * from "../features/billing/stripe-price";
 export * from "../features/billing/stripe-product";
 export * from "../features/billing/stripe-subscription";
 export * from "../features/billing/stripe-usage";
+export * from "../features/billing/stripe-promotion-code";
 export * from "../features/company/company.module";
 export * from "../features/company/data";
 export * from "../features/content/content.module";

package/src/core/registry/ModuleRegistry.ts

@@ -26,6 +26,7 @@ export interface FoundationModuleDefinitions {
   StripeProduct: ModuleWithPermissions;
   StripePrice: ModuleWithPermissions;
   StripeUsage: ModuleWithPermissions;
+  StripePromotionCode: ModuleWithPermissions;
   // OAuth modules
   OAuth: ModuleWithPermissions;
 }

package/src/core/registry/__tests__/DataClassRegistry.test.ts

@@ -67,9 +67,7 @@ describe("DataClassRegistry", () => {
 
     it("should throw for unregistered class", () => {
       const module = createMockModule({ name: "unknown" });
-      expect(() => DataClassRegistry.get(module)).toThrow(
-        "Class not registered for key: unknown"
-      );
+      expect(() => DataClassRegistry.get(module)).toThrow("Class not registered for key: unknown");
     });
   });
 
@@ -88,12 +86,8 @@ describe("DataClassRegistry", () => {
 
       DataClassRegistry.bootstrap(modules as any);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockArticle } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockArticle } as any)).not.toThrow();
     });
 
     it("should skip modules without model", () => {
@@ -110,12 +104,8 @@ describe("DataClassRegistry", () => {
 
       DataClassRegistry.bootstrap(modules as any);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "invalid", model: null } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "invalid", model: null } as any)).toThrow();
     });
   });
 

package/src/core/registry/__tests__/ModuleRegistrar.test.ts

@@ -98,12 +98,8 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.bootstrap(MockModules);
 
       // Should be able to get registered classes
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
     });
 
     it("should only bootstrap once", () => {
@@ -114,9 +110,7 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.bootstrap(MockModules);
 
       // Registry should still be empty because second bootstrap was skipped
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).toThrow();
     });
 
     it("should handle class without model property", () => {
@@ -141,9 +135,7 @@ describe("ModuleRegistrar", () => {
       // Can bootstrap again after reset
       ModuleRegistrar.bootstrap(MockModules);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).not.toThrow();
     });
 
     it("should clear the registry", () => {
@@ -151,9 +143,7 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.reset();
 
       // Registry should be cleared
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).toThrow();
     });
   });
 });

package/src/features/auth/components/GdprConsentSection.tsx

@@ -33,12 +33,7 @@ export function GdprConsentSection<T extends FieldValues>({
 
   return (
     <div className="space-y-4 py-4">
-      <GdprConsentCheckbox
-        form={form}
-        id={termsCheckboxId}
-        label={termsLabel}
-        required
-      />
+      <GdprConsentCheckbox form={form} id={termsCheckboxId} label={termsLabel} required />
       <GdprConsentCheckbox
         form={form}
         id={marketingCheckboxId}

package/src/features/auth/components/details/LandingComponent.tsx

@@ -3,7 +3,12 @@
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { getApiUrl } from "../../../../client/config";
-import { isDiscordAuthEnabled, isGoogleAuthEnabled, isInternalAuthEnabled, isRegistrationAllowed } from "../../../../login";
+import {
+  isDiscordAuthEnabled,
+  isGoogleAuthEnabled,
+  isInternalAuthEnabled,
+  isRegistrationAllowed,
+} from "../../../../login";
 import { Button, CardDescription, CardFooter, CardHeader, CardTitle, Link } from "../../../../shadcnui";
 import { useAuthContext } from "../../contexts";
 import { AuthComponent } from "../../enums";

package/src/features/auth/components/forms/AcceptInvitation.tsx

@@ -82,7 +82,7 @@ export function AcceptInvitation() {
         setComponentType(AuthComponent.Login);
         setParams(undefined);
       }, 2000);
-    } catch (e) {
+    } catch (_e) {
       errorToast({ title: t(`common.errors.error`), error });
     }
   };

package/src/features/auth/components/forms/ResetPassword.tsx

@@ -82,7 +82,7 @@ export function ResetPassword() {
         setComponentType(AuthComponent.Login);
         setParams(undefined);
       }, 2000);
-    } catch (e) {
+    } catch (_e) {
       errorToast({ title: t(`common.errors.error`), error });
     }
   };

package/src/features/billing/components/cards/PaymentMethodSummaryCard.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { Wallet, ChevronRight } from "lucide-react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Skeleton,
-} from "../../../../shadcnui";
+import { Card, CardContent, CardHeader, CardTitle, Button, Skeleton } from "../../../../shadcnui";
 import { PaymentMethodInterface } from "../../stripe-customer";
 
 type PaymentMethodSummaryCardProps = {
@@ -81,10 +74,16 @@ export function PaymentMethodSummaryCard({
         {paymentMethods.length === 0 ? (
           <div className="space-y-2">
             <p className="text-xl font-bold text-muted-foreground">No payment method</p>
-            <p className="text-xs text-muted-foreground">
-              Add a card to enable subscriptions
-            </p>
-            <Button variant="outline" size="sm" className="mt-2" onClick={(e) => { e.stopPropagation(); onManageClick(); }}>
+            <p className="text-xs text-muted-foreground">Add a card to enable subscriptions</p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManageClick();
+              }}
+            >
               Add Card
               <ChevronRight className="h-4 w-4 ml-1" />
             </Button>
@@ -98,18 +97,14 @@ export function PaymentMethodSummaryCard({
               Expires {String(defaultMethod.card.expMonth).padStart(2, "0")}/{defaultMethod.card.expYear}
             </p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                +{paymentMethods.length - 1} more card(s)
-              </p>
+              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more card(s)</p>
             )}
           </div>
         ) : (
           <div className="space-y-2">
             <p className="text-xl font-bold">{defaultMethod?.type || "Payment Method"}</p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                +{paymentMethods.length - 1} more method(s)
-              </p>
+              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more method(s)</p>
             )}
           </div>
         )}

package/src/features/billing/components/cards/SubscriptionSummaryCard.tsx

@@ -34,15 +34,6 @@ function formatDate(date: Date): string {
   });
 }
 
-function formatPrice(amount: number | undefined, currency: string | undefined): string {
-  if (amount === undefined) return "N/A";
-  const currencyCode = currency?.toUpperCase() || "USD";
-  return new Intl.NumberFormat(undefined, {
-    style: "currency",
-    currency: currencyCode,
-  }).format(amount / 100);
-}
-
 function formatPlanName(subscription: StripeSubscriptionInterface): string {
   const productName = subscription.price?.product?.name || "";
   const nickname = subscription.price?.nickname || "";
@@ -122,18 +113,22 @@ export function SubscriptionSummaryCard({
           <div className="space-y-2">
             <div className="flex items-center gap-2">
               <p className="text-xl font-bold">{formatPlanName(primarySubscription)}</p>
-              <Badge variant={primarySubscription.cancelAtPeriodEnd ? "secondary" : getStatusBadgeVariant(primarySubscription.status)}>
+              <Badge
+                variant={
+                  primarySubscription.cancelAtPeriodEnd
+                    ? "secondary"
+                    : getStatusBadgeVariant(primarySubscription.status)
+                }
+              >
                 {primarySubscription.cancelAtPeriodEnd ? "Canceling" : primarySubscription.status}
               </Badge>
             </div>
-            <p className="text-sm text-muted-foreground">
-              {formatPrice(primarySubscription.price?.unitAmount, primarySubscription.price?.currency)}
-              {primarySubscription.price?.recurring && <span>/{primarySubscription.price.recurring.interval}</span>}
-            </p>
             <p className="text-xs text-muted-foreground">
-              {primarySubscription.cancelAtPeriodEnd
-                ? `Cancels on ${formatDate(primarySubscription.currentPeriodEnd)}`
-                : `Renews on ${formatDate(primarySubscription.currentPeriodEnd)}`}
+              {!primarySubscription.price?.isTrial
+                ? `Ends on ${formatDate(primarySubscription.currentPeriodEnd)}`
+                : primarySubscription.cancelAtPeriodEnd
+                  ? `Cancels on ${formatDate(primarySubscription.currentPeriodEnd)}`
+                  : `Renews on ${formatDate(primarySubscription.currentPeriodEnd)}`}
             </p>
             {activeSubscriptions.length > 1 && (
               <p className="text-xs text-muted-foreground">+{activeSubscriptions.length - 1} more subscription(s)</p>

package/src/features/billing/components/modals/BillingDetailModal.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { ReactNode } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../../../../shadcnui";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../../shadcnui";
 
 type BillingDetailModalProps = {
   open: boolean;
@@ -16,13 +11,7 @@ type BillingDetailModalProps = {
   className?: string;
 };
 
-export function BillingDetailModal({
-  open,
-  onOpenChange,
-  title,
-  children,
-  className,
-}: BillingDetailModalProps) {
+export function BillingDetailModal({ open, onOpenChange, title, children, className }: BillingDetailModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className ?? "max-w-4xl max-h-[90vh] overflow-y-auto"}>

package/src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx

@@ -101,7 +101,14 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <Button render={<div />} nativeButton={false} variant="ghost" size="sm" disabled={loading} className="h-8 w-8 p-0">
+              <Button
+                render={<div />}
+                nativeButton={false}
+                variant="ghost"
+                size="sm"
+                disabled={loading}
+                className="h-8 w-8 p-0"
+              >
                 <MoreVertical className="h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>

package/src/features/billing/stripe-customer/components/forms/PaymentMethodEditor.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../../../../../shadcnui";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
 import { PaymentMethodForm } from "./PaymentMethodForm";
 
 type PaymentMethodEditorProps = {
@@ -34,12 +28,7 @@ export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMe
             Add a new payment method to your account. Your card information is securely processed by Stripe.
           </DialogDescription>
         </DialogHeader>
-        {open && (
-          <PaymentMethodForm
-            onSuccess={handleSuccess}
-            onCancel={handleCancel}
-          />
-        )}
+        {open && <PaymentMethodForm onSuccess={handleSuccess} onCancel={handleCancel} />}
       </DialogContent>
     </Dialog>
   );