@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

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

@@ -2,13 +2,7 @@
 
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { useEffect, useState } from "react";
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Checkbox,
-  Label,
-} from "../../../../../shadcnui";
+import { Alert, AlertDescription, Button, Checkbox, Label } from "../../../../../shadcnui";
 import { StripeCustomerService } from "../../data";
 
 type PaymentMethodFormProps = {
@@ -137,11 +131,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
 
       {/* Set as Default Checkbox */}
       <div className="flex items-center gap-x-2">
-        <Checkbox
-          id="setAsDefault"
-          checked={setAsDefault}
-          onCheckedChange={(checked) => setSetAsDefault(!!checked)}
-        />
+        <Checkbox id="setAsDefault" checked={setAsDefault} onCheckedChange={(checked) => setSetAsDefault(!!checked)} />
         <Label htmlFor="setAsDefault" className="text-sm font-normal">
           Set as default payment method
         </Label>

package/src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx

@@ -13,7 +13,12 @@ type InvoiceDetailsProps = {
   onInvoiceChange: () => void;
 };
 
-export function InvoiceDetails({ invoice, open, onOpenChange, onInvoiceChange }: InvoiceDetailsProps) {
+export function InvoiceDetails({
+  invoice,
+  open,
+  onOpenChange,
+  onInvoiceChange: _onInvoiceChange,
+}: InvoiceDetailsProps) {
   const handleDownloadPDF = () => {
     if (invoice.stripePdfUrl) {
       window.open(invoice.stripePdfUrl, "_blank");

package/src/features/billing/stripe-invoice/data/stripe-invoice.interface.ts

@@ -52,6 +52,7 @@ export interface ProrationPreviewInterface {
   immediateCharge: number;
   prorationDate: Date;
   lineItems: ProrationLineItem[];
+  isTrialUpgrade?: boolean;
 }
 
 export interface ProrationLineItem {

package/src/features/billing/stripe-price/components/lists/PricesList.tsx

@@ -184,13 +184,19 @@ export function PricesList({ productId, onPricesChange }: PricesListProps) {
 
                 <div className="flex flex-wrap gap-2">
                   {price.active ? (
-                    <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">Active</span>
+                    <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
+                      Active
+                    </span>
                   ) : (
-                    <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium">Inactive</span>
+                    <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium">
+                      Inactive
+                    </span>
                   )}
 
                   {price.recurring?.usageType === "metered" && (
-                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">Metered</span>
+                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">
+                      Metered
+                    </span>
                   )}
 
                   <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase">
@@ -238,7 +244,8 @@ export function PricesList({ productId, onPricesChange }: PricesListProps) {
             <AlertDialogTitle>Archive Price</AlertDialogTitle>
             <AlertDialogDescription>
               Are you sure you want to archive the price for{" "}
-              {priceToArchive && `${formatCurrency(priceToArchive.unitAmount, priceToArchive.currency)} ${formatInterval(priceToArchive)}`}
+              {priceToArchive &&
+                `${formatCurrency(priceToArchive.unitAmount, priceToArchive.currency)} ${formatInterval(priceToArchive)}`}
               ? This will prevent new subscriptions but existing ones will continue.
             </AlertDialogDescription>
           </AlertDialogHeader>
@@ -262,7 +269,8 @@ export function PricesList({ productId, onPricesChange }: PricesListProps) {
             <AlertDialogTitle>Reactivate Price</AlertDialogTitle>
             <AlertDialogDescription>
               Are you sure you want to reactivate the price for{" "}
-              {priceToReactivate && `${formatCurrency(priceToReactivate.unitAmount, priceToReactivate.currency)} ${formatInterval(priceToReactivate)}`}
+              {priceToReactivate &&
+                `${formatCurrency(priceToReactivate.unitAmount, priceToReactivate.currency)} ${formatInterval(priceToReactivate)}`}
               ? This will allow new subscriptions again.
             </AlertDialogDescription>
           </AlertDialogHeader>

package/src/features/billing/stripe-product/components/lists/ProductsList.tsx

@@ -38,11 +38,11 @@ export function ProductsList({ products, onProductsChange }: ProductsListProps)
 
     setArchivingProductId(productToArchive.id);
     try {
-      const archivedProduct = await StripeProductService.archiveProduct({ id: productToArchive.id });
+      const _archivedProduct = await StripeProductService.archiveProduct({ id: productToArchive.id });
       setProductToArchive(null); // Close dialog on success
       onProductsChange();
-    } catch (error) {
-      console.error("[ProductsList] Failed to archive product:", error);
+    } catch (_error) {
+      console.error("[ProductsList] Failed to archive product:", _error);
       // Keep dialog open on error so user can retry or cancel
     } finally {
       setArchivingProductId(null);
@@ -56,10 +56,10 @@ export function ProductsList({ products, onProductsChange }: ProductsListProps)
 
     setReactivatingProductId(productToReactivate.id);
     try {
-      const reactivatedProduct = await StripeProductService.reactivateProduct({ id: productToReactivate.id });
+      const _reactivatedProduct = await StripeProductService.reactivateProduct({ id: productToReactivate.id });
       setProductToReactivate(null); // Close dialog on success
       onProductsChange();
-    } catch (error) {
+    } catch (_error) {
       // Keep dialog open on error so user can retry or cancel
     } finally {
       setReactivatingProductId(null);

package/src/features/billing/stripe-promotion-code/components/PromoCodeInput.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Check, X, Loader2 } from "lucide-react";
+import { Button, Input } from "../../../../shadcnui";
+import { PromotionCodeValidationResult } from "../data/stripe-promotion-code.interface";
+
+type PromoCodeInputProps = {
+  appliedCode: PromotionCodeValidationResult | null;
+  isValidating: boolean;
+  error: string | null;
+  onApply: (code: string) => void;
+  onRemove: () => void;
+  disabled?: boolean;
+};
+
+export function PromoCodeInput({
+  appliedCode,
+  isValidating,
+  error,
+  onApply,
+  onRemove,
+  disabled = false,
+}: PromoCodeInputProps) {
+  const [code, setCode] = useState("");
+
+  const handleApply = () => {
+    if (code.trim()) {
+      onApply(code.trim().toUpperCase());
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    }
+  };
+
+  // Format discount for display
+  const formatDiscount = (result: PromotionCodeValidationResult): string => {
+    if (result.discountType === "percent_off") {
+      return `${result.discountValue}% off`;
+    }
+    // amount_off is in cents, convert to dollars
+    const amount = (result.discountValue || 0) / 100;
+    const currency = result.currency?.toUpperCase() || "USD";
+    return `${currency} ${amount.toFixed(2)} off`;
+  };
+
+  // Format duration for display
+  const formatDuration = (result: PromotionCodeValidationResult): string => {
+    switch (result.duration) {
+      case "forever":
+        return "Applied to all payments";
+      case "once":
+        return "Applied to first payment only";
+      case "repeating":
+        return `Applied for ${result.durationInMonths} months`;
+      default:
+        return "";
+    }
+  };
+
+  // Show applied code state
+  if (appliedCode?.valid) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
+          <div className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-600" />
+            <span className="font-medium text-green-800">{appliedCode.code}</span>
+            <span className="text-sm text-green-600">{formatDiscount(appliedCode)}</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onRemove}
+            disabled={disabled}
+            className="text-green-700 hover:text-green-900 hover:bg-green-100"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+        <p className="text-sm text-green-600">{formatDuration(appliedCode)}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <Input
+          placeholder="Enter promo code"
+          value={code}
+          onChange={(e) => setCode(e.target.value.toUpperCase())}
+          onKeyDown={handleKeyDown}
+          disabled={disabled || isValidating}
+          className="flex-1"
+        />
+        <Button variant="outline" onClick={handleApply} disabled={disabled || isValidating || !code.trim()}>
+          {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Apply"}
+        </Button>
+      </div>
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}

package/src/features/billing/stripe-promotion-code/components/index.ts

@@ -0,0 +1 @@
+export * from "./PromoCodeInput";

package/src/features/billing/stripe-promotion-code/data/index.ts

@@ -0,0 +1,3 @@
+export * from "./stripe-promotion-code.interface";
+export * from "./stripe-promotion-code.service";
+export * from "./stripe-promotion-code";

package/src/features/billing/stripe-promotion-code/data/stripe-promotion-code.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * Promotion code validation result from the backend
+ */
+export interface PromotionCodeValidationResult {
+  valid: boolean;
+  promotionCodeId?: string;
+  code: string;
+  discountType?: "percent_off" | "amount_off";
+  discountValue?: number;
+  currency?: string;
+  duration?: "forever" | "once" | "repeating";
+  durationInMonths?: number;
+  errorMessage?: string;
+}

package/src/features/billing/stripe-promotion-code/data/stripe-promotion-code.service.ts

@@ -0,0 +1,64 @@
+import { Modules } from "../../../../core";
+import { JsonApiPost } from "../../../../unified/JsonApiRequest";
+import { PromotionCodeValidationResult } from "./stripe-promotion-code.interface";
+import { StripePromotionCode } from "./stripe-promotion-code";
+
+const STRIPE_PROMOTION_CODE_ENDPOINT = "stripe-promotion-codes";
+
+/**
+ * Service for validating Stripe promotion codes
+ */
+export class StripePromotionCodeService {
+  /**
+   * Validate a promotion code against Stripe
+   *
+   * @param params.code - The promotion code to validate (e.g., "SAVE20")
+   * @param params.stripePriceId - Optional price ID to check product restrictions
+   * @param params.language - Language code for the request
+   * @returns Validation result with discount details if valid
+   */
+  static async validatePromotionCode(params: {
+    code: string;
+    stripePriceId?: string;
+    language?: string;
+  }): Promise<PromotionCodeValidationResult> {
+    const response = await JsonApiPost({
+      classKey: Modules.StripePromotionCode,
+      endpoint: `${STRIPE_PROMOTION_CODE_ENDPOINT}/validate`,
+      body: {
+        data: {
+          type: STRIPE_PROMOTION_CODE_ENDPOINT,
+          attributes: {
+            code: params.code,
+            stripePriceId: params.stripePriceId,
+          },
+        },
+      },
+      overridesJsonApiCreation: true,
+      language: params.language ?? "en",
+    });
+
+    if (!response.ok) {
+      return {
+        valid: false,
+        code: params.code,
+        errorMessage: response.error || "Failed to validate promotion code",
+      };
+    }
+
+    // The response is hydrated as a StripePromotionCode model
+    const data = response.data as StripePromotionCode;
+
+    return {
+      valid: data.valid,
+      promotionCodeId: data.promotionCodeId,
+      code: data.code,
+      discountType: data.discountType,
+      discountValue: data.discountValue,
+      currency: data.currency,
+      duration: data.duration,
+      durationInMonths: data.durationInMonths,
+      errorMessage: data.errorMessage,
+    };
+  }
+}

package/src/features/billing/stripe-promotion-code/data/stripe-promotion-code.ts

@@ -0,0 +1,66 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../../core";
+import { PromotionCodeValidationResult } from "./stripe-promotion-code.interface";
+
+export class StripePromotionCode extends AbstractApiData implements PromotionCodeValidationResult {
+  private _valid: boolean = false;
+  private _promotionCodeId?: string;
+  private _code: string = "";
+  private _discountType?: "percent_off" | "amount_off";
+  private _discountValue?: number;
+  private _currency?: string;
+  private _duration?: "forever" | "once" | "repeating";
+  private _durationInMonths?: number;
+  private _errorMessage?: string;
+
+  get valid(): boolean {
+    return this._valid;
+  }
+
+  get promotionCodeId(): string | undefined {
+    return this._promotionCodeId;
+  }
+
+  get code(): string {
+    return this._code;
+  }
+
+  get discountType(): "percent_off" | "amount_off" | undefined {
+    return this._discountType;
+  }
+
+  get discountValue(): number | undefined {
+    return this._discountValue;
+  }
+
+  get currency(): string | undefined {
+    return this._currency;
+  }
+
+  get duration(): "forever" | "once" | "repeating" | undefined {
+    return this._duration;
+  }
+
+  get durationInMonths(): number | undefined {
+    return this._durationInMonths;
+  }
+
+  get errorMessage(): string | undefined {
+    return this._errorMessage;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+
+    this._valid = data.jsonApi.attributes.valid ?? false;
+    this._promotionCodeId = data.jsonApi.attributes.promotionCodeId;
+    this._code = data.jsonApi.attributes.code ?? "";
+    this._discountType = data.jsonApi.attributes.discountType;
+    this._discountValue = data.jsonApi.attributes.discountValue;
+    this._currency = data.jsonApi.attributes.currency;
+    this._duration = data.jsonApi.attributes.duration;
+    this._durationInMonths = data.jsonApi.attributes.durationInMonths;
+    this._errorMessage = data.jsonApi.attributes.errorMessage;
+
+    return this;
+  }
+}

package/src/features/billing/stripe-promotion-code/index.ts

@@ -0,0 +1,2 @@
+export * from "./data";
+export * from "./stripe-promotion-code.module";

package/src/features/billing/stripe-promotion-code/stripe-promotion-code.module.ts

@@ -0,0 +1,9 @@
+import { ModuleFactory } from "../../../permissions";
+import { StripePromotionCode } from "./data/stripe-promotion-code";
+
+export const StripePromotionCodeModule = (factory: ModuleFactory) =>
+  factory({
+    name: "stripe-promotion-codes",
+    model: StripePromotionCode,
+    moduleId: "b8e4f6a2-9d0c-5b3f-c7e8-4g2d9f0a5c6e",
+  });

package/src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx

@@ -75,9 +75,7 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
           <CreditCard className="h-16 w-16 text-muted-foreground" />
           <div className="text-center">
             <h3 className="text-xl font-semibold mb-2">No Active Subscriptions</h3>
-            <p className="text-muted-foreground mb-6">
-              Choose a subscription plan to get started with our services.
-            </p>
+            <p className="text-muted-foreground mb-6">Choose a subscription plan to get started with our services.</p>
             <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
           </div>
         </div>

package/src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx

@@ -118,7 +118,10 @@ export function SubscriptionDetails({
             {/* Status */}
             <div className="flex items-center gap-x-3">
               <span className="text-sm font-medium text-muted-foreground">Status:</span>
-              <SubscriptionStatusBadge status={subscription.status} cancelAtPeriodEnd={subscription.cancelAtPeriodEnd} />
+              <SubscriptionStatusBadge
+                status={subscription.status}
+                cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
+              />
             </div>
 
             {/* Plan Info */}

package/src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx

@@ -43,7 +43,7 @@ export function CancelSubscriptionDialog({
     },
   });
 
-  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (_values) => {
     setIsSubmitting(true);
 
     try {

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
 import { formatCurrency, formatDate } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
-import { StripeSubscriptionInterface } from "../../data";
+import { StripeSubscriptionInterface, SubscriptionStatus } from "../../data";
 import { SubscriptionDetails } from "../details/SubscriptionDetails";
 import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
 
@@ -61,12 +61,13 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
               <TableHead>Plan</TableHead>
               <TableHead>Period</TableHead>
               <TableHead className="text-right">Amount</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {subscriptions.map((subscription) => {
               const price = subscription.price;
-              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "N/A";
+              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "0";
               const period = `${formatDate(subscription.currentPeriodStart)} - ${formatDate(subscription.currentPeriodEnd)}`;
 
               return (
@@ -76,11 +77,30 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                   className="cursor-pointer hover:bg-muted/50"
                 >
                   <TableCell>
-                    <SubscriptionStatusBadge status={subscription.status} cancelAtPeriodEnd={subscription.cancelAtPeriodEnd} />
+                    <SubscriptionStatusBadge
+                      status={subscription.status}
+                      cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
+                    />
                   </TableCell>
                   <TableCell className="font-medium">{formatPlanName(price)}</TableCell>
                   <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
                   <TableCell className="text-right font-medium">{amount}</TableCell>
+                  <TableCell className="text-right">
+                    {(subscription.status === SubscriptionStatus.ACTIVE ||
+                      subscription.status === SubscriptionStatus.TRIALING) &&
+                      onChangePlan && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onChangePlan(subscription);
+                          }}
+                        >
+                          Upgrade
+                        </Button>
+                      )}
+                  </TableCell>
                 </TableRow>
               );
             })}

package/src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx

@@ -16,7 +16,14 @@ export type PricingCardProps = {
   onSelect: (price: StripePriceInterface) => void;
 };
 
-export function PricingCard({ price, isCurrentPlan = false, isSelected = false, isDisabled = false, isLoading = false, onSelect }: PricingCardProps) {
+export function PricingCard({
+  price,
+  isCurrentPlan = false,
+  isSelected = false,
+  isDisabled = false,
+  isLoading = false,
+  onSelect,
+}: PricingCardProps) {
   const description = price.description || price.nickname || "Standard";
   const features = price.features || [];
   const formattedPrice = formatCurrency(price.unitAmount, price.currency);
@@ -50,7 +57,7 @@ export function PricingCard({ price, isCurrentPlan = false, isSelected = false,
         isSelected && !isCurrentPlan && "ring-2 ring-primary",
         !isDisabled && !isCurrentPlan && "hover:shadow-md hover:border-primary/50",
         isDisabled && "opacity-50 pointer-events-none",
-        isLoading && "pointer-events-none"
+        isLoading && "pointer-events-none",
       )}
     >
       {isCurrentPlan && (

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionStatusBadge.tsx

@@ -54,7 +54,9 @@ const cancelingConfig: StatusConfig = {
 
 export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: SubscriptionStatusBadgeProps) {
   // Show "Canceling" when subscription is set to cancel at period end
-  const config = cancelAtPeriodEnd ? cancelingConfig : statusConfig[status] || statusConfig[SubscriptionStatus.CANCELED];
+  const config = cancelAtPeriodEnd
+    ? cancelingConfig
+    : statusConfig[status] || statusConfig[SubscriptionStatus.CANCELED];
 
   return <span className={`${config.color} text-xs px-2 py-1 rounded-full font-medium`}>{config.label}</span>;
 }

package/src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx

@@ -1,13 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../../../../../shadcnui";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
 import { StripeSubscriptionInterface } from "../../data";
 import { useSubscriptionWizard } from "../../hooks/useSubscriptionWizard";
 import { WizardProgressIndicator } from "./WizardProgressIndicator";
@@ -109,6 +103,12 @@ export function SubscriptionWizard({
             onBack={() => actions.goToStep("plan-selection")}
             onAddPaymentMethod={() => actions.goToStep("payment-method")}
             onConfirm={actions.confirmSubscription}
+            promotionCode={state.promotionCode}
+            isValidatingPromoCode={state.isValidatingPromoCode}
+            promoCodeError={state.promoCodeError}
+            onApplyPromoCode={actions.validatePromoCode}
+            onRemovePromoCode={actions.clearPromoCode}
+            isTrialUpgrade={state.isTrialSubscription}
           />
         )}
 

package/src/features/billing/stripe-subscription/components/wizards/WizardProgressIndicator.tsx

@@ -42,21 +42,13 @@ export function WizardProgressIndicator({ currentStep }: WizardProgressIndicator
             </div>
 
             {/* Step Label */}
-            <span
-              className={`text-sm ${
-                isCurrent ? "font-medium text-foreground" : "text-muted-foreground"
-              }`}
-            >
+            <span className={`text-sm ${isCurrent ? "font-medium text-foreground" : "text-muted-foreground"}`}>
               {step.label}
             </span>
 
             {/* Connector */}
             {index < STEPS.length - 1 && (
-              <div
-                className={`h-0.5 w-8 ${
-                  index < currentIndex ? "bg-primary" : "bg-muted"
-                }`}
-              />
+              <div className={`h-0.5 w-8 ${index < currentIndex ? "bg-primary" : "bg-muted"}`} />
             )}
           </div>
         );

package/src/features/billing/stripe-subscription/components/wizards/WizardStepPaymentMethod.tsx

@@ -8,25 +8,15 @@ type WizardStepPaymentMethodProps = {
   isProcessing: boolean;
 };
 
-export function WizardStepPaymentMethod({
-  onBack,
-  onSuccess,
-  isProcessing,
-}: WizardStepPaymentMethodProps) {
+export function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }: WizardStepPaymentMethodProps) {
   return (
     <div className="space-y-6">
       <div className="text-center">
         <h3 className="font-semibold text-lg">Add Payment Method</h3>
-        <p className="text-sm text-muted-foreground">
-          Enter your card details to complete your subscription
-        </p>
+        <p className="text-sm text-muted-foreground">Enter your card details to complete your subscription</p>
       </div>
 
-      <PaymentMethodForm
-        onSuccess={onSuccess}
-        onCancel={onBack}
-        isLoading={isProcessing}
-      />
+      <PaymentMethodForm onSuccess={onSuccess} onCancel={onBack} isLoading={isProcessing} />
     </div>
   );
 }