@carlonicora/nextjs-jsonapi 1.28.0 → 1.29.0

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

@@ -1,45 +1,21 @@
 "use client";
 
-import { CheckCircle, CreditCard, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { v4 } from "uuid";
-import { Alert, AlertDescription, AlertTitle, Button } from "../../../../../shadcnui";
+import { CreditCard } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "../../../../../shadcnui";
 import { BillingAlertBanner } from "../../../components";
-import { PaymentMethodEditor } from "../../../stripe-customer/components/forms/PaymentMethodEditor";
-import { StripeCustomerService } from "../../../stripe-customer/data/stripe-customer.service";
-import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
-import { StripeProductInterface, StripeProductService } from "../../../stripe-product";
 import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../../data";
-import { useConfirmSubscriptionPayment } from "../../hooks";
-import { SubscriptionEditor } from "../forms";
 import { SubscriptionsList } from "../lists";
-import { PricesByProduct, PricingCardsGrid } from "../widgets/PricingCardsGrid";
 
-type PaymentConfirmationState = "idle" | "confirming" | "success" | "error";
-
-export function SubscriptionsContainer() {
-  const { confirmPayment, isConfirming } = useConfirmSubscriptionPayment();
+type SubscriptionsContainerProps = {
+  onOpenWizard?: (subscription?: StripeSubscriptionInterface) => void;
+};
 
+export function SubscriptionsContainer({ onOpenWizard }: SubscriptionsContainerProps) {
   const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
-  const [showCreateSubscription, setShowCreateSubscription] = useState<boolean>(false);
-  const [showPaymentMethodEditor, setShowPaymentMethodEditor] = useState<boolean>(false);
-
-  // Pricing data for empty state
-  const [products, setProducts] = useState<StripeProductInterface[]>([]);
-  const [pricesByProduct, setPricesByProduct] = useState<PricesByProduct>(new Map());
-  const [loadingPricing, setLoadingPricing] = useState<boolean>(false);
-
-  // Payment method and pending subscription state
-  const [hasPaymentMethod, setHasPaymentMethod] = useState<boolean | null>(null);
-  const [pendingPriceId, setPendingPriceId] = useState<string | null>(null);
-  const [creatingSubscription, setCreatingSubscription] = useState<boolean>(false);
 
-  // Payment confirmation state
-  const [paymentConfirmationState, setPaymentConfirmationState] = useState<PaymentConfirmationState>("idle");
-  const [paymentError, setPaymentError] = useState<string | null>(null);
-
-  const loadSubscriptions = async () => {
+  const loadSubscriptions = useCallback(async () => {
     setLoading(true);
     try {
       const fetchedSubscriptions = await StripeSubscriptionService.listSubscriptions();
@@ -49,125 +25,12 @@ export function SubscriptionsContainer() {
     } finally {
       setLoading(false);
     }
-  };
-
-  const loadPricingData = async () => {
-    setLoadingPricing(true);
-    try {
-      const fetchedProducts = await StripeProductService.listProducts({ active: true });
-
-      // Build prices map from product.stripePrices
-      const grouped: PricesByProduct = new Map();
-      for (const product of fetchedProducts) {
-        if (product.stripePrices && product.stripePrices.length > 0) {
-          grouped.set(product.id, product.stripePrices);
-        }
-      }
-
-      setProducts(fetchedProducts);
-      setPricesByProduct(grouped);
-    } catch (error) {
-      console.error("[SubscriptionsContainer] Failed to load pricing data:", error);
-    } finally {
-      setLoadingPricing(false);
-    }
-  };
-
-  const checkPaymentMethod = async () => {
-    try {
-      const paymentMethods = await StripeCustomerService.listPaymentMethods();
-      const hasMethod = paymentMethods.length > 0;
-      setHasPaymentMethod(hasMethod);
-    } catch (error) {
-      console.error("[SubscriptionsContainer] Failed to check payment methods:", error);
-      setHasPaymentMethod(false);
-    }
-  };
-
-  const createSubscriptionWithPrice = async (priceId: string) => {
-    setCreatingSubscription(true);
-    setPaymentError(null);
-    setPaymentConfirmationState("idle");
-
-    try {
-      const result = await StripeSubscriptionService.createSubscription({
-        id: v4(),
-        priceId,
-      });
-
-      // Check if payment confirmation is required (SCA flow)
-      if (result.meta.requiresAction && result.meta.clientSecret) {
-        setPaymentConfirmationState("confirming");
-
-        const confirmation = await confirmPayment(result.meta.clientSecret);
-
-        if (!confirmation.success) {
-          console.error("[SubscriptionsContainer] Payment confirmation failed:", confirmation.error);
-          setPaymentConfirmationState("error");
-          setPaymentError(confirmation.error || "Payment confirmation failed");
-          setCreatingSubscription(false);
-          return;
-        }
-
-        // Sync subscription to get updated status from Stripe
-        await StripeSubscriptionService.syncSubscription({
-          subscriptionId: result.subscription.id,
-        });
-      }
-
-      // Success
-      setPaymentConfirmationState("success");
-      await loadSubscriptions();
-    } catch (error: any) {
-      console.error("[SubscriptionsContainer] Failed to create subscription:", error);
-      // Handle 402 error - payment method required despite our check
-      if (error?.status === 402 || error?.response?.status === 402) {
-        setPendingPriceId(priceId);
-        setHasPaymentMethod(false);
-        setShowPaymentMethodEditor(true);
-      } else {
-        setPaymentConfirmationState("error");
-        setPaymentError(error?.message || "Failed to create subscription");
-      }
-    } finally {
-      setCreatingSubscription(false);
-    }
-  };
-
-  const handleSelectPrice = async (price: StripePriceInterface) => {
-    const priceId = price.id; // Use internal UUID, not Stripe ID
-
-    if (!hasPaymentMethod) {
-      setPendingPriceId(priceId);
-      setShowPaymentMethodEditor(true);
-      return;
-    }
-
-    await createSubscriptionWithPrice(priceId);
-  };
-
-  const handlePaymentMethodSuccess = async () => {
-    setShowPaymentMethodEditor(false);
-    setHasPaymentMethod(true);
-
-    if (pendingPriceId) {
-      await createSubscriptionWithPrice(pendingPriceId);
-      setPendingPriceId(null);
-    }
-  };
+  }, []);
 
   useEffect(() => {
     loadSubscriptions();
   }, []);
 
-  // Load pricing data when there are no subscriptions
-  useEffect(() => {
-    if (!loading && subscriptions.length === 0) {
-      loadPricingData();
-      checkPaymentMethod();
-    }
-  }, [loading, subscriptions.length]);
-
   // Detect critical subscriptions
   const criticalSubscriptions = subscriptions.filter(
     (sub) =>
@@ -194,7 +57,7 @@ export function SubscriptionsContainer() {
           <h1 className="text-3xl font-bold">Subscriptions</h1>
         </div>
         {subscriptions.length > 0 && (
-          <Button onClick={() => setShowCreateSubscription(true)}>Subscribe to a Plan</Button>
+          <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
         )}
       </div>
 
@@ -203,100 +66,26 @@ export function SubscriptionsContainer() {
         <BillingAlertBanner key={subscription.id} subscription={subscription} />
       ))}
 
-      {/* Pricing Cards when no subscriptions */}
+      {/* Empty state CTA */}
       {subscriptions.length === 0 && (
-        <div className="space-y-6">
-          {/* Payment confirmation states */}
-          {(paymentConfirmationState === "confirming" || isConfirming) && (
-            <div className="flex flex-col items-center justify-center py-12 space-y-4 bg-muted/50 rounded-lg">
-              <Loader2 className="h-8 w-8 animate-spin text-primary" />
-              <div className="text-center">
-                <p className="font-medium">Processing payment...</p>
-                <p className="text-sm text-muted-foreground">Please complete any verification if prompted.</p>
-              </div>
-            </div>
-          )}
-
-          {paymentConfirmationState === "success" && (
-            <div className="flex flex-col items-center justify-center py-8 space-y-4 bg-green-50 rounded-lg border border-green-200">
-              <CheckCircle className="h-12 w-12 text-green-500" />
-              <div className="text-center">
-                <p className="font-medium text-green-600">Payment successful!</p>
-                <p className="text-sm text-muted-foreground">Your subscription is now active.</p>
-              </div>
-            </div>
-          )}
-
-          {paymentConfirmationState === "error" && (
-            <Alert variant="destructive">
-              <AlertTitle>Payment Failed</AlertTitle>
-              <AlertDescription className="mt-2">
-                <p className="mb-4">{paymentError || "We couldn't process your payment. Please try again."}</p>
-                <Button
-                  onClick={() => {
-                    setPaymentConfirmationState("idle");
-                    setPaymentError(null);
-                  }}
-                  variant="outline"
-                >
-                  Try Again
-                </Button>
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {paymentConfirmationState === "idle" && !isConfirming && (
-            <>
-              <div className="text-center">
-                <CreditCard className="text-muted-foreground mx-auto h-16 w-16 mb-4" />
-                <h3 className="mb-2 text-xl font-semibold">Choose Your Plan</h3>
-                <p className="text-muted-foreground mb-6">
-                  Select a subscription plan to get started with our services.
-                </p>
-              </div>
-
-              <PricingCardsGrid
-                products={products}
-                pricesByProduct={pricesByProduct}
-                loading={loadingPricing}
-                loadingPriceId={creatingSubscription ? (pendingPriceId ?? undefined) : undefined}
-                onSelectPrice={handleSelectPrice}
-              />
-            </>
-          )}
+        <div className="flex flex-col items-center justify-center py-12 space-y-4">
+          <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>
+            <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
+          </div>
         </div>
       )}
 
       {/* Subscriptions List */}
       {subscriptions.length > 0 && (
-        <SubscriptionsList subscriptions={subscriptions} onSubscriptionsChange={loadSubscriptions} />
-      )}
-
-      {/* Create Subscription Modal (for users who already have subscriptions) */}
-      {showCreateSubscription && (
-        <SubscriptionEditor
-          open={showCreateSubscription}
-          onOpenChange={setShowCreateSubscription}
-          onSuccess={loadSubscriptions}
-          onAddPaymentMethod={() => {
-            setShowCreateSubscription(false);
-            setShowPaymentMethodEditor(true);
-          }}
-        />
-      )}
-
-      {/* Payment Method Editor Modal */}
-      {showPaymentMethodEditor && (
-        <PaymentMethodEditor
-          open={showPaymentMethodEditor}
-          onOpenChange={(open) => {
-            setShowPaymentMethodEditor(open);
-            if (!open) {
-              // Clear pending price if user cancels
-              setPendingPriceId(null);
-            }
-          }}
-          onSuccess={handlePaymentMethodSuccess}
+        <SubscriptionsList
+          subscriptions={subscriptions}
+          onSubscriptionsChange={loadSubscriptions}
+          onChangePlan={(sub) => onOpenWizard?.(sub)}
         />
       )}
     </div>

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

@@ -7,7 +7,6 @@ import { StripeCustomerService } from "../../../stripe-customer";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../../data";
 import { CancelSubscriptionDialog } from "../forms/CancelSubscriptionDialog";
-import { SubscriptionEditor } from "../forms/SubscriptionEditor";
 import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
 
 /**
@@ -53,6 +52,7 @@ type SubscriptionDetailsProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSubscriptionChange: () => void;
+  onChangePlan?: (subscription: StripeSubscriptionInterface) => void;
 };
 
 export function SubscriptionDetails({
@@ -60,8 +60,8 @@ export function SubscriptionDetails({
   open,
   onOpenChange,
   onSubscriptionChange,
+  onChangePlan,
 }: SubscriptionDetailsProps) {
-  const [showEdit, setShowEdit] = useState<boolean>(false);
   const [showCancel, setShowCancel] = useState<boolean>(false);
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
@@ -163,9 +163,11 @@ export function SubscriptionDetails({
 
             {/* Action Buttons */}
             <div className="flex flex-wrap gap-2 pt-4 border-t">
-              <Button variant="default" onClick={() => setShowEdit(true)}>
-                Change Plan
-              </Button>
+              {onChangePlan && (
+                <Button variant="default" onClick={() => onChangePlan(subscription)}>
+                  Change Plan
+                </Button>
+              )}
 
               {canPause && (
                 <Button variant="outline" onClick={handlePause} disabled={isProcessing}>
@@ -193,19 +195,6 @@ export function SubscriptionDetails({
         </DialogContent>
       </Dialog>
 
-      {/* Edit Subscription Dialog */}
-      {showEdit && (
-        <SubscriptionEditor
-          subscription={subscription}
-          open={showEdit}
-          onOpenChange={setShowEdit}
-          onSuccess={() => {
-            onSubscriptionChange();
-            setShowEdit(false);
-          }}
-        />
-      )}
-
       {/* Cancel Subscription Dialog */}
       {showCancel && (
         <CancelSubscriptionDialog

package/src/features/billing/stripe-subscription/components/forms/index.ts

@@ -1,2 +1 @@
 export * from "./CancelSubscriptionDialog";
-export * from "./SubscriptionEditor";

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

@@ -41,9 +41,10 @@ function formatPlanName(price: StripePriceInterface | undefined): string {
 type SubscriptionsListProps = {
   subscriptions: StripeSubscriptionInterface[];
   onSubscriptionsChange: () => void;
+  onChangePlan?: (subscription: StripeSubscriptionInterface) => void;
 };
 
-export function SubscriptionsList({ subscriptions, onSubscriptionsChange }: SubscriptionsListProps) {
+export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChangePlan }: SubscriptionsListProps) {
   const [selectedSub, setSelectedSub] = useState<StripeSubscriptionInterface | null>(null);
 
   const handleRowClick = (subscription: StripeSubscriptionInterface) => {
@@ -97,6 +98,14 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange }: Subs
             onSubscriptionsChange();
             setSelectedSub(null);
           }}
+          onChangePlan={
+            onChangePlan
+              ? (sub) => {
+                  setSelectedSub(null); // Close details dialog first
+                  onChangePlan(sub); // Then open wizard at parent level
+                }
+              : undefined
+          }
         />
       )}
     </>

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "../../../../../shadcnui";
+
+export type BillingInterval = "month" | "year";
+
+export type IntervalToggleProps = {
+  value: BillingInterval;
+  onChange: (interval: BillingInterval) => void;
+  hasMonthly: boolean;
+  hasYearly: boolean;
+};
+
+export function IntervalToggle({ value, onChange, hasMonthly, hasYearly }: IntervalToggleProps) {
+  // Only render if BOTH intervals are available
+  if (!hasMonthly || !hasYearly) {
+    return null;
+  }
+
+  return (
+    <Tabs value={value} onValueChange={(v) => onChange(v as BillingInterval)}>
+      <TabsList>
+        <TabsTrigger value="month">Monthly</TabsTrigger>
+        <TabsTrigger value="year">Yearly</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { Skeleton } from "../../../../../shadcnui";
+import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
+import { StripeProductInterface } from "../../../stripe-product";
+import { BillingInterval } from "./IntervalToggle";
+import { ProductPricingRow } from "./ProductPricingRow";
+
+export type ProductPricingListProps = {
+  products: StripeProductInterface[];
+  selectedInterval: BillingInterval;
+  currentPriceId?: string;
+  selectedPriceId?: string;
+  loadingPriceId?: string;
+  loading?: boolean;
+  onSelectPrice: (price: StripePriceInterface) => void;
+  hideRecurringPrices?: boolean;
+};
+
+function isRecurringProduct(prices: StripePriceInterface[]): boolean {
+  return prices.some((p) => p.priceType === "recurring");
+}
+
+function getFilteredPrices(prices: StripePriceInterface[], selectedInterval: BillingInterval): StripePriceInterface[] {
+  const isRecurring = isRecurringProduct(prices);
+
+  if (!isRecurring) {
+    return prices.filter((p) => p.priceType === "one_time");
+  }
+
+  const intervalPrices = prices.filter(
+    (p) => p.priceType === "recurring" && p.recurring?.interval === selectedInterval,
+  );
+
+  if (intervalPrices.length === 0) {
+    const fallbackInterval = selectedInterval === "month" ? "year" : "month";
+    return prices.filter((p) => p.priceType === "recurring" && p.recurring?.interval === fallbackInterval);
+  }
+
+  return intervalPrices;
+}
+
+export function ProductPricingList({
+  products,
+  selectedInterval,
+  currentPriceId,
+  selectedPriceId,
+  loadingPriceId,
+  loading = false,
+  onSelectPrice,
+  hideRecurringPrices = false,
+}: ProductPricingListProps) {
+  if (loading) {
+    return <ProductPricingListSkeleton />;
+  }
+
+  if (products.length === 0) {
+    return <div className="text-center py-8 text-muted-foreground">No plans available</div>;
+  }
+
+  const sortedProducts = [...products].sort((a, b) => {
+    const aRecurring = isRecurringProduct(a.stripePrices || []);
+    const bRecurring = isRecurringProduct(b.stripePrices || []);
+    if (aRecurring && !bRecurring) return -1;
+    if (!aRecurring && bRecurring) return 1;
+    return 0;
+  });
+
+  // Filter products based on hideRecurringPrices
+  const filteredProducts = hideRecurringPrices
+    ? sortedProducts
+        .map((product) => ({
+          ...product,
+          stripePrices: (product.stripePrices || []).filter((price) => price.priceType !== "recurring"),
+        }))
+        .filter((product) => product.stripePrices.length > 0)
+    : sortedProducts;
+
+  return (
+    <div className="space-y-6">
+      {filteredProducts.map((product) => {
+        const allPrices = product.stripePrices || [];
+        const filteredPrices = getFilteredPrices(allPrices, selectedInterval);
+
+        if (filteredPrices.length === 0) {
+          return null;
+        }
+
+        return (
+          <ProductPricingRow
+            key={product.id}
+            product={product}
+            prices={filteredPrices}
+            currentPriceId={currentPriceId}
+            selectedPriceId={selectedPriceId}
+            loadingPriceId={loadingPriceId}
+            onSelectPrice={onSelectPrice}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function ProductPricingListSkeleton() {
+  return (
+    <div className="space-y-6">
+      {[1, 2].map((rowIndex) => (
+        <div key={rowIndex} className="space-y-3">
+          <Skeleton className="h-6 w-32" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3].map((cardIndex) => (
+              <div key={cardIndex} className="p-4 rounded-lg border animate-pulse space-y-3">
+                <Skeleton className="h-6 w-24" />
+                <Skeleton className="h-8 w-32" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-3/4" />
+                </div>
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
+import { StripeProductInterface } from "../../../stripe-product";
+import { PricingCard } from "./PricingCard";
+
+export type ProductPricingRowProps = {
+  product: StripeProductInterface;
+  prices: StripePriceInterface[]; // Multiple prices for this product
+  currentPriceId?: string;
+  selectedPriceId?: string;
+  loadingPriceId?: string;
+  onSelectPrice: (price: StripePriceInterface) => void;
+};
+
+export function ProductPricingRow({
+  product,
+  prices,
+  currentPriceId,
+  selectedPriceId,
+  loadingPriceId,
+  onSelectPrice,
+}: ProductPricingRowProps) {
+  if (prices.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Product name header */}
+      <h3 className="font-semibold text-lg">{product.name}</h3>
+
+      {/* Price cards in columns */}
+      <div
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+        role="radiogroup"
+        aria-label={`Pricing options for ${product.name}`}
+      >
+        {prices
+          .sort((a, b) => (a.unitAmount ?? 0) - (b.unitAmount ?? 0))
+          .map((price) => (
+            <PricingCard
+              key={price.id}
+              price={price}
+              isCurrentPlan={price.id === currentPriceId}
+              isSelected={price.id === selectedPriceId}
+              isLoading={price.id === loadingPriceId}
+              onSelect={onSelectPrice}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { Check, Loader2 } from "lucide-react";
+import { Button } from "../../../../../shadcnui";
+import { formatCurrency, formatInterval } from "../../../components/utils";
+import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
+
+type SubscriptionConfirmationProps = {
+  price: StripePriceInterface;
+  isLoading: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel }: SubscriptionConfirmationProps) {
+  const productName = price.product?.name || price.nickname || "Selected Plan";
+  const productDescription = price.product?.description || price.description;
+  const features = price.features || [];
+
+  return (
+    <div className="bg-accent/10 border border-accent/30 rounded-lg p-4">
+      <h4 className="font-semibold mb-3">Confirm Your Subscription</h4>
+
+      <div className="space-y-3">
+        {/* Plan name and description */}
+        <div>
+          <div className="font-medium">{productName}</div>
+          {productDescription && <div className="text-sm text-muted-foreground">{productDescription}</div>}
+        </div>
+
+        {/* Price */}
+        <div className="text-lg font-semibold">
+          {formatCurrency(price.unitAmount, price.currency)}
+          <span className="text-sm font-normal text-muted-foreground">{formatInterval(price)}</span>
+        </div>
+
+        {/* Features */}
+        {features.length > 0 && (
+          <div className="space-y-1">
+            {features.map((feature, index) => (
+              <div key={index} className="flex items-center gap-2 text-sm ">
+                <Check className="h-4 w-4 text-primary" />
+                <span>{feature}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="flex justify-end gap-3 pt-2 border-t border-accent/30">
+          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                Processing...
+              </>
+            ) : (
+              "Subscribe"
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}