@carlonicora/nextjs-jsonapi 1.27.0 → 1.29.0

package/dist/billing/index.mjs

@@ -10,7 +10,6 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertTitle,
   Badge,
   Button,
   Card,
@@ -48,7 +47,7 @@ import {
   TabsList,
   TabsTrigger,
   useCurrentUserContext
-} from "../chunk-RU4GQIB6.mjs";
+} from "../chunk-UCD5CUE4.mjs";
 import {
   getRoleId,
   getStripePublishableKey
@@ -61,7 +60,7 @@ import {
   StripeSubscriptionService,
   StripeUsageService,
   cn
-} from "../chunk-NAB52T2P.mjs";
+} from "../chunk-DU64WMZD.mjs";
 import "../chunk-AUXK7QSA.mjs";
 import "../chunk-C7C7VY4F.mjs";
 import "../chunk-U4MTVHOC.mjs";
@@ -533,18 +532,19 @@ function BillingUsageSummaryCard({
 __name(BillingUsageSummaryCard, "BillingUsageSummaryCard");
 
 // src/features/billing/components/containers/BillingDashboardContainer.tsx
-import { CreditCard as CreditCard4, Loader2 as Loader23, Wallet as Wallet2 } from "lucide-react";
-import { useCallback as useCallback2, useEffect as useEffect8, useState as useState14 } from "react";
+import { CreditCard as CreditCard4, Loader2 as Loader22, Wallet as Wallet2 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo3, useState as useState13 } from "react";
 
 // src/features/billing/stripe-customer/components/containers/PaymentMethodsContainer.tsx
 import { CreditCard as CreditCard2 } from "lucide-react";
 import { useEffect as useEffect3, useState as useState4 } from "react";
 
-// src/features/billing/stripe-customer/components/forms/PaymentMethodEditor.tsx
+// src/features/billing/stripe-customer/components/forms/PaymentMethodForm.tsx
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { useEffect, useState as useState2 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function PaymentMethodEditor({ open, onOpenChange, onSuccess }) {
+function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }) {
   const stripe = useStripe();
   const elements = useElements();
   const [setupIntent, setSetupIntent] = useState2(null);
@@ -559,16 +559,14 @@ function PaymentMethodEditor({ open, onOpenChange, onSuccess }) {
         const intent = await StripeCustomerService.createSetupIntent();
         setSetupIntent(intent);
       } catch (err) {
-        console.error("[PaymentMethodEditor] Failed to create setup intent:", err);
+        console.error("[PaymentMethodForm] Failed to create setup intent:", err);
         setError("Failed to initialize payment form. Please try again.");
       } finally {
         setLoading(false);
       }
     }, "fetchSetupIntent");
-    if (open) {
-      fetchSetupIntent();
-    }
-  }, [open]);
+    fetchSetupIntent();
+  }, []);
   const handleSubmit = /* @__PURE__ */ __name(async (e) => {
     e.preventDefault();
     if (!stripe || !elements || !setupIntent) {
@@ -590,7 +588,7 @@ function PaymentMethodEditor({ open, onOpenChange, onSuccess }) {
         }
       );
       if (stripeError) {
-        console.error("[PaymentMethodEditor] Stripe error:", stripeError);
+        console.error("[PaymentMethodForm] Stripe error:", stripeError);
         setError(stripeError.message || "Failed to add payment method. Please check your card details.");
         setIsSubmitting(false);
         return;
@@ -601,58 +599,81 @@ function PaymentMethodEditor({ open, onOpenChange, onSuccess }) {
         });
       }
       onSuccess();
-      onOpenChange(false);
     } catch (err) {
-      console.error("[PaymentMethodEditor] Error:", err);
+      console.error("[PaymentMethodForm] Error:", err);
       setError(err.message || "An unexpected error occurred. Please try again.");
     } finally {
       setIsSubmitting(false);
     }
   }, "handleSubmit");
-  return /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs6(DialogContent, { className: "max-w-md", children: [
-    /* @__PURE__ */ jsxs6(DialogHeader, { children: [
-      /* @__PURE__ */ jsx6(DialogTitle, { children: "Add Payment Method" }),
-      /* @__PURE__ */ jsx6(DialogDescription, { children: "Add a new payment method to your account. Your card information is securely processed by Stripe." })
-    ] }),
-    loading && /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "Loading payment form..." }) }),
-    !loading && setupIntent && /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "flex flex-col gap-y-4", children: [
-      /* @__PURE__ */ jsx6("div", { className: "rounded-md border border-gray-300 p-3", children: /* @__PURE__ */ jsx6(
-        CardElement,
-        {
-          options: {
-            style: {
-              base: {
-                fontSize: "16px",
-                color: "#424770",
-                "::placeholder": {
-                  color: "#aab7c4"
-                }
-              },
-              invalid: {
-                color: "#9e2146"
+  if (loading) {
+    return /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "Loading payment form..." }) });
+  }
+  if (!setupIntent && error) {
+    return /* @__PURE__ */ jsx6(Alert, { variant: "destructive", className: "bg-red-50 border-red-200", children: /* @__PURE__ */ jsx6(AlertDescription, { children: error }) });
+  }
+  return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsx6("div", { className: "rounded-md border border-gray-300 p-3", children: /* @__PURE__ */ jsx6(
+      CardElement,
+      {
+        options: {
+          style: {
+            base: {
+              fontSize: "16px",
+              color: "#424770",
+              "::placeholder": {
+                color: "#aab7c4"
               }
+            },
+            invalid: {
+              color: "#9e2146"
             }
           }
         }
-      ) }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx6(
-          Checkbox,
-          {
-            id: "setAsDefault",
-            checked: setAsDefault,
-            onCheckedChange: (checked) => setSetAsDefault(!!checked)
-          }
-        ),
-        /* @__PURE__ */ jsx6(Label, { htmlFor: "setAsDefault", className: "text-sm font-normal", children: "Set as default payment method" })
-      ] }),
-      error && /* @__PURE__ */ jsx6(Alert, { variant: "destructive", className: "bg-red-50 border-red-200", children: /* @__PURE__ */ jsx6(AlertDescription, { children: error }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-x-2", children: [
-        /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Cancel" }),
-        /* @__PURE__ */ jsx6(Button, { type: "submit", disabled: !stripe || isSubmitting, children: isSubmitting ? "Processing..." : "Add Card" })
-      ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx6(
+        Checkbox,
+        {
+          id: "setAsDefault",
+          checked: setAsDefault,
+          onCheckedChange: (checked) => setSetAsDefault(!!checked)
+        }
+      ),
+      /* @__PURE__ */ jsx6(Label, { htmlFor: "setAsDefault", className: "text-sm font-normal", children: "Set as default payment method" })
     ] }),
-    !loading && !setupIntent && error && /* @__PURE__ */ jsx6(Alert, { variant: "destructive", className: "bg-red-50 border-red-200", children: /* @__PURE__ */ jsx6(AlertDescription, { children: error }) })
+    error && /* @__PURE__ */ jsx6(Alert, { variant: "destructive", className: "bg-red-50 border-red-200", children: /* @__PURE__ */ jsx6(AlertDescription, { children: error }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isSubmitting || isLoading, children: "Cancel" }),
+      /* @__PURE__ */ jsx6(Button, { type: "submit", disabled: !stripe || isSubmitting || isLoading, children: isSubmitting ? "Processing..." : "Add Card" })
+    ] })
+  ] });
+}
+__name(PaymentMethodForm, "PaymentMethodForm");
+
+// src/features/billing/stripe-customer/components/forms/PaymentMethodEditor.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function PaymentMethodEditor({ open, onOpenChange, onSuccess }) {
+  const handleSuccess = /* @__PURE__ */ __name(() => {
+    onSuccess();
+    onOpenChange(false);
+  }, "handleSuccess");
+  const handleCancel = /* @__PURE__ */ __name(() => {
+    onOpenChange(false);
+  }, "handleCancel");
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+      /* @__PURE__ */ jsx7(DialogTitle, { children: "Add Payment Method" }),
+      /* @__PURE__ */ jsx7(DialogDescription, { children: "Add a new payment method to your account. Your card information is securely processed by Stripe." })
+    ] }),
+    open && /* @__PURE__ */ jsx7(
+      PaymentMethodForm,
+      {
+        onSuccess: handleSuccess,
+        onCancel: handleCancel
+      }
+    )
   ] }) });
 }
 __name(PaymentMethodEditor, "PaymentMethodEditor");
@@ -660,7 +681,7 @@ __name(PaymentMethodEditor, "PaymentMethodEditor");
 // src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx
 import { MoreVertical } from "lucide-react";
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var brandIcons = {
   visa: "\u{1F4B3}",
   mastercard: "\u{1F4B3}",
@@ -710,28 +731,28 @@ function PaymentMethodCard({ paymentMethod, onUpdate }) {
       setLoading(false);
     }
   }, "handleRemove");
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7(Card, { className: "relative", children: [
-      isDefault && /* @__PURE__ */ jsx7(Badge, { className: "absolute right-2 top-2 bg-green-100 text-green-800 hover:bg-green-100", children: "Default" }),
-      /* @__PURE__ */ jsxs7(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-2", children: [
-          /* @__PURE__ */ jsx7("span", { className: "text-2xl", children: brandIcon }),
-          /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium capitalize", children: brand })
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(Card, { className: "relative", children: [
+      isDefault && /* @__PURE__ */ jsx8(Badge, { className: "absolute right-2 top-2 bg-green-100 text-green-800 hover:bg-green-100", children: "Default" }),
+      /* @__PURE__ */ jsxs8(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-2xl", children: brandIcon }),
+          /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium capitalize", children: brand })
         ] }),
-        /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx7(DropdownMenuTrigger, { children: /* @__PURE__ */ jsx7(Button, { render: /* @__PURE__ */ jsx7("div", {}), nativeButton: false, variant: "ghost", size: "sm", disabled: loading, className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx7(MoreVertical, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", children: [
-            !isDefault && /* @__PURE__ */ jsx7(DropdownMenuItem, { onClick: handleSetDefault, disabled: loading, children: "Set as Default" }),
-            /* @__PURE__ */ jsx7(DropdownMenuItem, { onClick: () => setShowRemoveDialog(true), disabled: loading, className: "text-red-600", children: "Remove" })
+        /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx8(DropdownMenuTrigger, { children: /* @__PURE__ */ jsx8(Button, { render: /* @__PURE__ */ jsx8("div", {}), nativeButton: false, variant: "ghost", size: "sm", disabled: loading, className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx8(MoreVertical, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", children: [
+            !isDefault && /* @__PURE__ */ jsx8(DropdownMenuItem, { onClick: handleSetDefault, disabled: loading, children: "Set as Default" }),
+            /* @__PURE__ */ jsx8(DropdownMenuItem, { onClick: () => setShowRemoveDialog(true), disabled: loading, className: "text-red-600", children: "Remove" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-y-1", children: [
-        /* @__PURE__ */ jsxs7("p", { className: "text-lg font-semibold", children: [
+      /* @__PURE__ */ jsx8(CardContent, { children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-y-1", children: [
+        /* @__PURE__ */ jsxs8("p", { className: "text-lg font-semibold", children: [
           "\u2022\u2022\u2022\u2022 ",
           last4
         ] }),
-        /* @__PURE__ */ jsxs7("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs8("p", { className: "text-sm text-muted-foreground", children: [
           "Expires ",
           String(expMonth).padStart(2, "0"),
           "/",
@@ -739,17 +760,17 @@ function PaymentMethodCard({ paymentMethod, onUpdate }) {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx7(AlertDialog, { open: showRemoveDialog, onOpenChange: setShowRemoveDialog, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx7(AlertDialogTitle, { children: "Remove Payment Method" }),
-        /* @__PURE__ */ jsxs7(AlertDialogDescription, { children: [
+    /* @__PURE__ */ jsx8(AlertDialog, { open: showRemoveDialog, onOpenChange: setShowRemoveDialog, children: /* @__PURE__ */ jsxs8(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs8(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Remove Payment Method" }),
+        /* @__PURE__ */ jsxs8(AlertDialogDescription, { children: [
           "Are you sure you want to remove this payment method? This action cannot be undone.",
           isDefault && " This is your default payment method."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx7(AlertDialogCancel, { disabled: loading, children: "Cancel" }),
-        /* @__PURE__ */ jsx7(AlertDialogAction, { onClick: handleRemove, disabled: loading, className: "bg-red-600 hover:bg-red-700", children: loading ? "Removing..." : "Remove" })
+      /* @__PURE__ */ jsxs8(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx8(AlertDialogCancel, { disabled: loading, children: "Cancel" }),
+        /* @__PURE__ */ jsx8(AlertDialogAction, { onClick: handleRemove, disabled: loading, className: "bg-red-600 hover:bg-red-700", children: loading ? "Removing..." : "Remove" })
       ] })
     ] }) })
   ] });
@@ -757,14 +778,14 @@ function PaymentMethodCard({ paymentMethod, onUpdate }) {
 __name(PaymentMethodCard, "PaymentMethodCard");
 
 // src/features/billing/stripe-customer/components/lists/PaymentMethodsList.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function PaymentMethodsList({ paymentMethods, onUpdate }) {
-  return /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: paymentMethods.map((paymentMethod) => /* @__PURE__ */ jsx8(PaymentMethodCard, { paymentMethod, onUpdate }, paymentMethod.id)) });
+  return /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: paymentMethods.map((paymentMethod) => /* @__PURE__ */ jsx9(PaymentMethodCard, { paymentMethod, onUpdate }, paymentMethod.id)) });
 }
 __name(PaymentMethodsList, "PaymentMethodsList");
 
 // src/features/billing/stripe-customer/components/containers/PaymentMethodsContainer.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function PaymentMethodsContainer() {
   const [paymentMethods, setPaymentMethods] = useState4([]);
   const [loading, setLoading] = useState4(true);
@@ -784,26 +805,26 @@ function PaymentMethodsContainer() {
     loadPaymentMethods();
   }, []);
   if (loading) {
-    return /* @__PURE__ */ jsx9("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground", children: "Loading payment methods..." }) });
+    return /* @__PURE__ */ jsx10("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx10("p", { className: "text-muted-foreground", children: "Loading payment methods..." }) });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-x-3", children: [
-        /* @__PURE__ */ jsx9(CreditCard2, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx9("h1", { className: "text-3xl font-bold", children: "Payment Methods" })
+  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx10(CreditCard2, { className: "h-8 w-8" }),
+        /* @__PURE__ */ jsx10("h1", { className: "text-3xl font-bold", children: "Payment Methods" })
       ] }),
-      /* @__PURE__ */ jsx9(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Payment Method" })
+      /* @__PURE__ */ jsx10(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Payment Method" })
     ] }),
-    paymentMethods.length === 0 && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12", children: [
-      /* @__PURE__ */ jsx9(CreditCard2, { className: "h-16 w-16 text-muted-foreground" }),
-      /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-xl font-semibold", children: "No payment methods" }),
-        /* @__PURE__ */ jsx9("p", { className: "mb-4 text-muted-foreground", children: "Add a payment method to enable subscriptions and secure checkout." }),
-        /* @__PURE__ */ jsx9(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Your First Card" })
+    paymentMethods.length === 0 && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12", children: [
+      /* @__PURE__ */ jsx10(CreditCard2, { className: "h-16 w-16 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs9("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx10("h3", { className: "mb-2 text-xl font-semibold", children: "No payment methods" }),
+        /* @__PURE__ */ jsx10("p", { className: "mb-4 text-muted-foreground", children: "Add a payment method to enable subscriptions and secure checkout." }),
+        /* @__PURE__ */ jsx10(Button, { onClick: () => setShowAddPaymentMethod(true), children: "Add Your First Card" })
       ] })
     ] }),
-    paymentMethods.length > 0 && /* @__PURE__ */ jsx9(PaymentMethodsList, { paymentMethods, onUpdate: loadPaymentMethods }),
-    showAddPaymentMethod && /* @__PURE__ */ jsx9(
+    paymentMethods.length > 0 && /* @__PURE__ */ jsx10(PaymentMethodsList, { paymentMethods, onUpdate: loadPaymentMethods }),
+    showAddPaymentMethod && /* @__PURE__ */ jsx10(
       PaymentMethodEditor,
       {
         open: showAddPaymentMethod,
@@ -872,7 +893,7 @@ __name(formatDate3, "formatDate");
 import { Download, ExternalLink as ExternalLink2, RefreshCw } from "lucide-react";
 
 // src/features/billing/stripe-invoice/components/widgets/InvoiceStatusBadge.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var statusConfig = {
   ["draft" /* DRAFT */]: {
     label: "Draft",
@@ -897,12 +918,12 @@ var statusConfig = {
 };
 function InvoiceStatusBadge({ status }) {
   const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
-  return /* @__PURE__ */ jsx10("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
+  return /* @__PURE__ */ jsx11("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
 }
 __name(InvoiceStatusBadge, "InvoiceStatusBadge");
 
 // src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function InvoiceDetails({ invoice, open, onOpenChange, onInvoiceChange }) {
   const handleDownloadPDF = /* @__PURE__ */ __name(() => {
     if (invoice.stripePdfUrl) {
@@ -923,87 +944,87 @@ function InvoiceDetails({ invoice, open, onOpenChange, onInvoiceChange }) {
     return invoice.stripeInvoiceId.slice(-8);
   }, "getInvoiceNumber");
   const productName = invoice.subscription?.price?.product?.name || "Subscription";
-  return /* @__PURE__ */ jsx11(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(DialogContent, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ jsxs9(DialogHeader, { children: [
-      /* @__PURE__ */ jsxs9(DialogTitle, { children: [
+  return /* @__PURE__ */ jsx12(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs10(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs10(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs10(DialogTitle, { children: [
         "Invoice ",
         getInvoiceNumber()
       ] }),
-      /* @__PURE__ */ jsx11(DialogDescription, { children: formatDate3(invoice.periodStart) })
+      /* @__PURE__ */ jsx12(DialogDescription, { children: formatDate3(invoice.periodStart) })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-3", children: [
-        /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Status:" }),
-        /* @__PURE__ */ jsx11(InvoiceStatusBadge, { status: invoice.status })
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Status:" }),
+        /* @__PURE__ */ jsx12(InvoiceStatusBadge, { status: invoice.status })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Period:" }),
-          /* @__PURE__ */ jsxs9("p", { className: "font-medium", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Period:" }),
+          /* @__PURE__ */ jsxs10("p", { className: "font-medium", children: [
             formatDate3(invoice.periodStart),
             " - ",
             formatDate3(invoice.periodEnd)
           ] })
         ] }),
-        invoice.dueDate && /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Due Date:" }),
-          /* @__PURE__ */ jsx11("p", { className: "font-medium", children: formatDate3(invoice.dueDate) })
+        invoice.dueDate && /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Due Date:" }),
+          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: formatDate3(invoice.dueDate) })
         ] }),
-        invoice.paidAt && /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Paid Date:" }),
-          /* @__PURE__ */ jsx11("p", { className: "font-medium", children: formatDate3(invoice.paidAt) })
+        invoice.paidAt && /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Paid Date:" }),
+          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: formatDate3(invoice.paidAt) })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Attempt Count:" }),
-          /* @__PURE__ */ jsx11("p", { className: "font-medium", children: invoice.attemptCount })
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Attempt Count:" }),
+          /* @__PURE__ */ jsx12("p", { className: "font-medium", children: invoice.attemptCount })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx11("h4", { className: "text-sm font-medium text-muted-foreground mb-2", children: "Line Items" }),
-        /* @__PURE__ */ jsx11("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs9("table", { className: "w-full", children: [
-          /* @__PURE__ */ jsx11("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs9("tr", { children: [
-            /* @__PURE__ */ jsx11("th", { className: "text-left p-3 text-sm font-medium", children: "Description" }),
-            /* @__PURE__ */ jsx11("th", { className: "text-right p-3 text-sm font-medium", children: "Amount" })
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx12("h4", { className: "text-sm font-medium text-muted-foreground mb-2", children: "Line Items" }),
+        /* @__PURE__ */ jsx12("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs10("table", { className: "w-full", children: [
+          /* @__PURE__ */ jsx12("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs10("tr", { children: [
+            /* @__PURE__ */ jsx12("th", { className: "text-left p-3 text-sm font-medium", children: "Description" }),
+            /* @__PURE__ */ jsx12("th", { className: "text-right p-3 text-sm font-medium", children: "Amount" })
           ] }) }),
-          /* @__PURE__ */ jsx11("tbody", { children: /* @__PURE__ */ jsxs9("tr", { className: "border-t", children: [
-            /* @__PURE__ */ jsx11("td", { className: "p-3", children: productName }),
-            /* @__PURE__ */ jsx11("td", { className: "p-3 text-right", children: formatCurrency(invoice.subtotal, invoice.currency) })
+          /* @__PURE__ */ jsx12("tbody", { children: /* @__PURE__ */ jsxs10("tr", { className: "border-t", children: [
+            /* @__PURE__ */ jsx12("td", { className: "p-3", children: productName }),
+            /* @__PURE__ */ jsx12("td", { className: "p-3 text-right", children: formatCurrency(invoice.subtotal, invoice.currency) })
           ] }) })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "space-y-2 border-t pt-4", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Subtotal:" }),
-          /* @__PURE__ */ jsx11("span", { className: "font-medium", children: formatCurrency(invoice.subtotal, invoice.currency) })
+      /* @__PURE__ */ jsxs10("div", { className: "space-y-2 border-t pt-4", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Subtotal:" }),
+          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: formatCurrency(invoice.subtotal, invoice.currency) })
         ] }),
-        invoice.tax !== void 0 && invoice.tax > 0 && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Tax:" }),
-          /* @__PURE__ */ jsx11("span", { className: "font-medium", children: formatCurrency(invoice.tax, invoice.currency) })
+        invoice.tax !== void 0 && invoice.tax > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Tax:" }),
+          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: formatCurrency(invoice.tax, invoice.currency) })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-lg font-semibold border-t pt-2", children: [
-          /* @__PURE__ */ jsx11("span", { children: "Total:" }),
-          /* @__PURE__ */ jsx11("span", { children: formatCurrency(invoice.total, invoice.currency) })
+        /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-lg font-semibold border-t pt-2", children: [
+          /* @__PURE__ */ jsx12("span", { children: "Total:" }),
+          /* @__PURE__ */ jsx12("span", { children: formatCurrency(invoice.total, invoice.currency) })
         ] }),
-        invoice.amountPaid > 0 && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Paid:" }),
-          /* @__PURE__ */ jsx11("span", { className: "font-medium text-green-600", children: formatCurrency(invoice.amountPaid, invoice.currency) })
+        invoice.amountPaid > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Paid:" }),
+          /* @__PURE__ */ jsx12("span", { className: "font-medium text-green-600", children: formatCurrency(invoice.amountPaid, invoice.currency) })
         ] }),
-        invoice.amountRemaining > 0 && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Due:" }),
-          /* @__PURE__ */ jsx11("span", { className: "font-medium text-red-600", children: formatCurrency(invoice.amountRemaining, invoice.currency) })
+        invoice.amountRemaining > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: "Amount Due:" }),
+          /* @__PURE__ */ jsx12("span", { className: "font-medium text-red-600", children: formatCurrency(invoice.amountRemaining, invoice.currency) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2 pt-4 border-t", children: [
-        invoice.stripePdfUrl && /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: handleDownloadPDF, children: [
-          /* @__PURE__ */ jsx11(Download, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-2 pt-4 border-t", children: [
+        invoice.stripePdfUrl && /* @__PURE__ */ jsxs10(Button, { variant: "outline", onClick: handleDownloadPDF, children: [
+          /* @__PURE__ */ jsx12(Download, { className: "mr-2 h-4 w-4" }),
           "Download PDF"
         ] }),
-        invoice.status === "open" /* OPEN */ && invoice.attempted && /* @__PURE__ */ jsxs9(Button, { variant: "default", onClick: handleRetryPayment, children: [
-          /* @__PURE__ */ jsx11(RefreshCw, { className: "mr-2 h-4 w-4" }),
+        invoice.status === "open" /* OPEN */ && invoice.attempted && /* @__PURE__ */ jsxs10(Button, { variant: "default", onClick: handleRetryPayment, children: [
+          /* @__PURE__ */ jsx12(RefreshCw, { className: "mr-2 h-4 w-4" }),
           "Retry Payment"
         ] }),
-        invoice.stripeHostedInvoiceUrl && /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: handleViewInStripe, children: [
-          /* @__PURE__ */ jsx11(ExternalLink2, { className: "mr-2 h-4 w-4" }),
+        invoice.stripeHostedInvoiceUrl && /* @__PURE__ */ jsxs10(Button, { variant: "outline", onClick: handleViewInStripe, children: [
+          /* @__PURE__ */ jsx12(ExternalLink2, { className: "mr-2 h-4 w-4" }),
           "View in Stripe"
         ] })
       ] })
@@ -1013,7 +1034,7 @@ function InvoiceDetails({ invoice, open, onOpenChange, onInvoiceChange }) {
 __name(InvoiceDetails, "InvoiceDetails");
 
 // src/features/billing/stripe-invoice/components/lists/InvoicesList.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function InvoicesList({ invoices, onInvoicesChange }) {
   const [selectedInvoice, setSelectedInvoice] = useState5(null);
   const handleRowClick = /* @__PURE__ */ __name((invoice) => {
@@ -1025,38 +1046,38 @@ function InvoicesList({ invoices, onInvoicesChange }) {
     }
     return invoice.stripeInvoiceId.slice(-8);
   }, "getInvoiceNumber");
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx12("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs10(Table, { children: [
-      /* @__PURE__ */ jsx12(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs10(TableRow, { children: [
-        /* @__PURE__ */ jsx12(TableHead, { children: "Invoice #" }),
-        /* @__PURE__ */ jsx12(TableHead, { children: "Date" }),
-        /* @__PURE__ */ jsx12(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx12(TableHead, { className: "text-right", children: "Amount" }),
-        /* @__PURE__ */ jsx12(TableHead, { children: "Period" })
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs11(Table, { children: [
+      /* @__PURE__ */ jsx13(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs11(TableRow, { children: [
+        /* @__PURE__ */ jsx13(TableHead, { children: "Invoice #" }),
+        /* @__PURE__ */ jsx13(TableHead, { children: "Date" }),
+        /* @__PURE__ */ jsx13(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx13(TableHead, { className: "text-right", children: "Amount" }),
+        /* @__PURE__ */ jsx13(TableHead, { children: "Period" })
       ] }) }),
-      /* @__PURE__ */ jsx12(TableBody, { children: invoices.map((invoice) => {
+      /* @__PURE__ */ jsx13(TableBody, { children: invoices.map((invoice) => {
         const invoiceNumber = getInvoiceNumber(invoice);
         const date = formatDate3(invoice.periodStart);
         const amount = formatCurrency(invoice.total, invoice.currency);
         const period = `${formatDate3(invoice.periodStart)} - ${formatDate3(invoice.periodEnd)}`;
-        return /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsxs11(
           TableRow,
           {
             onClick: () => handleRowClick(invoice),
             className: "cursor-pointer hover:bg-muted/50",
             children: [
-              /* @__PURE__ */ jsx12(TableCell, { className: "font-medium", children: invoiceNumber }),
-              /* @__PURE__ */ jsx12(TableCell, { className: "text-muted-foreground text-sm", children: date }),
-              /* @__PURE__ */ jsx12(TableCell, { children: /* @__PURE__ */ jsx12(InvoiceStatusBadge, { status: invoice.status }) }),
-              /* @__PURE__ */ jsx12(TableCell, { className: "text-right font-medium", children: amount }),
-              /* @__PURE__ */ jsx12(TableCell, { className: "text-muted-foreground text-sm", children: period })
+              /* @__PURE__ */ jsx13(TableCell, { className: "font-medium", children: invoiceNumber }),
+              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-sm", children: date }),
+              /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13(InvoiceStatusBadge, { status: invoice.status }) }),
+              /* @__PURE__ */ jsx13(TableCell, { className: "text-right font-medium", children: amount }),
+              /* @__PURE__ */ jsx13(TableCell, { className: "text-muted-foreground text-sm", children: period })
             ]
           },
           invoice.id
         );
       }) })
     ] }) }),
-    selectedInvoice && /* @__PURE__ */ jsx12(
+    selectedInvoice && /* @__PURE__ */ jsx13(
       InvoiceDetails,
       {
         invoice: selectedInvoice,
@@ -1073,7 +1094,7 @@ function InvoicesList({ invoices, onInvoicesChange }) {
 __name(InvoicesList, "InvoicesList");
 
 // src/features/billing/stripe-invoice/components/containers/InvoicesContainer.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function InvoicesContainer() {
   const [invoices, setInvoices] = useState6([]);
   const [loading, setLoading] = useState6(true);
@@ -1097,99 +1118,40 @@ function InvoicesContainer() {
   const handleFilterChange = /* @__PURE__ */ __name((value) => {
     setStatusFilter(value);
   }, "handleFilterChange");
-  return /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx13(Tabs, { value: statusFilter, onValueChange: handleFilterChange, children: /* @__PURE__ */ jsxs11(TabsList, { children: [
-      /* @__PURE__ */ jsx13(TabsTrigger, { value: "all", children: "All" }),
-      /* @__PURE__ */ jsx13(TabsTrigger, { value: "paid" /* PAID */, children: "Paid" }),
-      /* @__PURE__ */ jsx13(TabsTrigger, { value: "open" /* OPEN */, children: "Open" }),
-      /* @__PURE__ */ jsx13(TabsTrigger, { value: "void" /* VOID */, children: "Void" }),
-      /* @__PURE__ */ jsx13(TabsTrigger, { value: "uncollectible" /* UNCOLLECTIBLE */, children: "Uncollectible" })
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx14(Tabs, { value: statusFilter, onValueChange: handleFilterChange, children: /* @__PURE__ */ jsxs12(TabsList, { children: [
+      /* @__PURE__ */ jsx14(TabsTrigger, { value: "all", children: "All" }),
+      /* @__PURE__ */ jsx14(TabsTrigger, { value: "paid" /* PAID */, children: "Paid" }),
+      /* @__PURE__ */ jsx14(TabsTrigger, { value: "open" /* OPEN */, children: "Open" }),
+      /* @__PURE__ */ jsx14(TabsTrigger, { value: "void" /* VOID */, children: "Void" }),
+      /* @__PURE__ */ jsx14(TabsTrigger, { value: "uncollectible" /* UNCOLLECTIBLE */, children: "Uncollectible" })
     ] }) }),
-    loading && /* @__PURE__ */ jsx13("div", { className: "text-center py-8 text-muted-foreground", children: "Loading invoices..." }),
-    !loading && invoices.length === 0 && /* @__PURE__ */ jsxs11("div", { className: "border border-dashed border-gray-300 rounded-lg p-8 text-center", children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-lg font-medium text-muted-foreground mb-2", children: "No invoices yet" }),
-      /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Invoices will appear here after your first billing cycle" })
+    loading && /* @__PURE__ */ jsx14("div", { className: "text-center py-8 text-muted-foreground", children: "Loading invoices..." }),
+    !loading && invoices.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "border border-dashed border-gray-300 rounded-lg p-8 text-center", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-lg font-medium text-muted-foreground mb-2", children: "No invoices yet" }),
+      /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: "Invoices will appear here after your first billing cycle" })
     ] }),
-    !loading && invoices.length > 0 && /* @__PURE__ */ jsx13(InvoicesList, { invoices, onInvoicesChange: loadInvoices })
+    !loading && invoices.length > 0 && /* @__PURE__ */ jsx14(InvoicesList, { invoices, onInvoicesChange: loadInvoices })
   ] });
 }
 __name(InvoicesContainer, "InvoicesContainer");
 
 // src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx
-import { CheckCircle as CheckCircle2, CreditCard as CreditCard3, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect6, useState as useState12 } from "react";
-import { v4 as v42 } from "uuid";
+import { CreditCard as CreditCard3 } from "lucide-react";
+import { useCallback, useEffect as useEffect5, useState as useState10 } from "react";
 
-// src/features/billing/stripe-subscription/hooks/useConfirmSubscriptionPayment.ts
-import { useStripe as useStripe2 } from "@stripe/react-stripe-js";
-import { useCallback, useState as useState7 } from "react";
-function useConfirmSubscriptionPayment() {
-  const stripe = useStripe2();
-  const [isConfirming, setIsConfirming] = useState7(false);
-  const confirmPayment = useCallback(
-    async (clientSecret) => {
-      if (!stripe) {
-        console.error("[useConfirmSubscriptionPayment] Stripe not initialized");
-        return {
-          success: false,
-          error: "Payment system not initialized. Please refresh the page and try again."
-        };
-      }
-      if (!clientSecret) {
-        console.error("[useConfirmSubscriptionPayment] No client secret provided");
-        return {
-          success: false,
-          error: "Payment confirmation failed. Missing payment details."
-        };
-      }
-      setIsConfirming(true);
-      try {
-        const { error: stripeError, paymentIntent } = await stripe.confirmCardPayment(clientSecret);
-        if (stripeError) {
-          console.error("[useConfirmSubscriptionPayment] Stripe error:", stripeError);
-          return {
-            success: false,
-            error: stripeError.message || "Payment confirmation failed. Please try again."
-          };
-        }
-        if (paymentIntent?.status === "succeeded") {
-          return { success: true };
-        }
-        if (paymentIntent?.status === "requires_action") {
-          return {
-            success: false,
-            error: "Additional authentication required. Please complete the verification."
-          };
-        }
-        return {
-          success: false,
-          error: "Payment could not be completed. Please try again."
-        };
-      } catch (err) {
-        console.error("[useConfirmSubscriptionPayment] Unexpected error:", err);
-        return {
-          success: false,
-          error: err.message || "An unexpected error occurred during payment confirmation."
-        };
-      } finally {
-        setIsConfirming(false);
-      }
-    },
-    [stripe]
-  );
-  return {
-    confirmPayment,
-    isConfirming
-  };
-}
-__name(useConfirmSubscriptionPayment, "useConfirmSubscriptionPayment");
+// src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx
+import { useState as useState9 } from "react";
+
+// src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx
+import { useState as useState8 } from "react";
 
 // src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useState as useState8 } from "react";
+import { useState as useState7 } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var formSchema = z.object({
   cancelImmediately: z.boolean(),
   reason: z.string().optional()
@@ -1200,7 +1162,7 @@ function CancelSubscriptionDialog({
   onOpenChange,
   onSuccess
 }) {
-  const [isSubmitting, setIsSubmitting] = useState8(false);
+  const [isSubmitting, setIsSubmitting] = useState7(false);
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -1225,19 +1187,19 @@ function CancelSubscriptionDialog({
     }
   }, "onSubmit");
   const periodEndDate = formatDate3(subscription.currentPeriodEnd);
-  return /* @__PURE__ */ jsx14(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs12(DialogContent, { className: "max-w-md", children: [
-    /* @__PURE__ */ jsxs12(DialogHeader, { children: [
-      /* @__PURE__ */ jsx14(DialogTitle, { children: "Cancel Subscription" }),
-      /* @__PURE__ */ jsx14(DialogDescription, { children: "Are you sure you want to cancel this subscription? This action cannot be undone." })
+  return /* @__PURE__ */ jsx15(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs13(DialogHeader, { children: [
+      /* @__PURE__ */ jsx15(DialogTitle, { children: "Cancel Subscription" }),
+      /* @__PURE__ */ jsx15(DialogDescription, { children: "Are you sure you want to cancel this subscription? This action cannot be undone." })
     ] }),
-    /* @__PURE__ */ jsx14(Form, { ...form, children: /* @__PURE__ */ jsxs12("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
-      /* @__PURE__ */ jsx14(FormCheckbox, { form, id: "cancelImmediately", name: "Cancel Immediately" }),
-      cancelImmediately ? /* @__PURE__ */ jsx14("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-800", children: "Your subscription will be canceled immediately and you will lose access right away." }) : /* @__PURE__ */ jsxs12("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800", children: [
+    /* @__PURE__ */ jsx15(Form, { ...form, children: /* @__PURE__ */ jsxs13("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsx15(FormCheckbox, { form, id: "cancelImmediately", name: "Cancel Immediately" }),
+      cancelImmediately ? /* @__PURE__ */ jsx15("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-800", children: "Your subscription will be canceled immediately and you will lose access right away." }) : /* @__PURE__ */ jsxs13("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800", children: [
         "Your subscription will remain active until ",
         periodEndDate,
         ". You can continue using the service until then."
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         FormTextarea,
         {
           form,
@@ -1247,407 +1209,17 @@ function CancelSubscriptionDialog({
           className: "min-h-24"
         }
       ),
-      /* @__PURE__ */ jsxs12("div", { className: "flex gap-x-2 justify-end pt-2", children: [
-        /* @__PURE__ */ jsx14(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Keep Subscription" }),
-        /* @__PURE__ */ jsx14(Button, { type: "submit", variant: "destructive", disabled: isSubmitting, children: isSubmitting ? "Canceling..." : "Confirm Cancellation" })
+      /* @__PURE__ */ jsxs13("div", { className: "flex gap-x-2 justify-end pt-2", children: [
+        /* @__PURE__ */ jsx15(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Keep Subscription" }),
+        /* @__PURE__ */ jsx15(Button, { type: "submit", variant: "destructive", disabled: isSubmitting, children: isSubmitting ? "Canceling..." : "Confirm Cancellation" })
       ] })
     ] }) })
   ] }) });
 }
 __name(CancelSubscriptionDialog, "CancelSubscriptionDialog");
 
-// src/features/billing/stripe-subscription/components/forms/SubscriptionEditor.tsx
-import { CheckCircle, Loader2 } from "lucide-react";
-import { useEffect as useEffect5, useState as useState9 } from "react";
-import { v4 } from "uuid";
-
-// src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx
-import { Check } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-function PricingCard({ price, isCurrentPlan = false, isSelected = false, isDisabled = false, isLoading = false, onSelect }) {
-  const description = price.description || price.nickname || "Standard";
-  const features = price.features || [];
-  const formattedPrice = formatCurrency(price.unitAmount, price.currency);
-  const interval = formatInterval(price);
-  const handleKeyDown = /* @__PURE__ */ __name((e) => {
-    if ((e.key === "Enter" || e.key === " ") && !isDisabled && !isCurrentPlan) {
-      e.preventDefault();
-      onSelect(price);
-    }
-  }, "handleKeyDown");
-  const handleClick = /* @__PURE__ */ __name(() => {
-    if (!isDisabled && !isCurrentPlan && !isLoading) {
-      onSelect(price);
-    }
-  }, "handleClick");
-  return /* @__PURE__ */ jsxs13(
-    Card,
-    {
-      role: "radio",
-      "aria-checked": isSelected,
-      "aria-label": `${description} plan at ${formattedPrice} ${interval}`,
-      tabIndex: isDisabled ? -1 : 0,
-      onKeyDown: handleKeyDown,
-      onClick: handleClick,
-      className: cn(
-        "relative cursor-pointer transition-all duration-200 flex flex-col h-full",
-        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-        isCurrentPlan && "bg-muted/30",
-        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"
-      ),
-      children: [
-        isCurrentPlan && /* @__PURE__ */ jsx15(Badge, { variant: "secondary", className: "absolute top-2 right-2", children: "Current" }),
-        /* @__PURE__ */ jsx15(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx15("h3", { className: "font-semibold text-lg", children: description }) }),
-        /* @__PURE__ */ jsxs13(CardContent, { className: "pb-4 grow", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx15("span", { className: "text-3xl font-bold", children: formattedPrice }),
-            /* @__PURE__ */ jsx15("span", { className: "text-muted-foreground ml-1", children: interval })
-          ] }),
-          features.length > 0 && /* @__PURE__ */ jsx15("ul", { className: "space-y-2", children: features.map((feature, index) => /* @__PURE__ */ jsxs13("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx15(Check, { className: "h-4 w-4 text-green-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ jsx15("span", { className: "text-sm text-muted-foreground", children: feature })
-          ] }, index)) })
-        ] }),
-        /* @__PURE__ */ jsx15(CardFooter, { children: /* @__PURE__ */ jsx15(
-          Button,
-          {
-            variant: isCurrentPlan ? "secondary" : isSelected ? "default" : "outline",
-            className: "w-full",
-            disabled: isDisabled || isCurrentPlan || isLoading,
-            children: isLoading ? "Processing..." : isCurrentPlan ? "Current Plan" : isSelected ? "Selected" : "Select Plan"
-          }
-        ) })
-      ]
-    }
-  );
-}
-__name(PricingCard, "PricingCard");
-
-// src/features/billing/stripe-subscription/components/widgets/PricingCardsGrid.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function PricingCardsGrid({
-  products,
-  pricesByProduct,
-  currentPriceId,
-  selectedPriceId,
-  loadingPriceId,
-  loading = false,
-  onSelectPrice
-}) {
-  if (loading) {
-    return /* @__PURE__ */ jsx16(PricingCardsGridSkeleton, {});
-  }
-  if (products.length === 0) {
-    return /* @__PURE__ */ jsx16("div", { className: "text-center py-8 text-muted-foreground", children: "No plans available" });
-  }
-  return /* @__PURE__ */ jsx16("div", { className: "space-y-8", role: "radiogroup", "aria-label": "Available pricing plans", children: products.map((product) => {
-    const prices = pricesByProduct.get(product.id) || [];
-    if (prices.length === 0) return null;
-    const sortedPrices = [...prices].sort((a, b) => (a.unitAmount ?? 0) - (b.unitAmount ?? 0));
-    return /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold", children: product.name }),
-      /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: sortedPrices.map((price) => /* @__PURE__ */ jsx16(
-        PricingCard,
-        {
-          price,
-          isCurrentPlan: price.stripePriceId === currentPriceId,
-          isSelected: price.stripePriceId === selectedPriceId,
-          isLoading: price.stripePriceId === loadingPriceId,
-          onSelect: onSelectPrice
-        },
-        price.stripePriceId
-      )) })
-    ] }, product.id);
-  }) });
-}
-__name(PricingCardsGrid, "PricingCardsGrid");
-function PricingCardsGridSkeleton() {
-  return /* @__PURE__ */ jsx16("div", { className: "space-y-8", children: [1, 2].map((productIndex) => /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx16(Skeleton, { className: "h-6 w-32" }),
-    /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [1, 2, 3].map((cardIndex) => /* @__PURE__ */ jsxs14(Card, { className: "animate-pulse", children: [
-      /* @__PURE__ */ jsx16(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx16(Skeleton, { className: "h-5 w-24" }) }),
-      /* @__PURE__ */ jsxs14(CardContent, { className: "pb-4", children: [
-        /* @__PURE__ */ jsxs14("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-9 w-20 inline-block" }),
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-12 inline-block ml-2" })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-4 rounded-full" }),
-            /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-32" })
-          ] }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-4 rounded-full" }),
-            /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-28" })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx16(CardFooter, { children: /* @__PURE__ */ jsx16(Skeleton, { className: "h-9 w-full" }) })
-    ] }, cardIndex)) })
-  ] }, productIndex)) });
-}
-__name(PricingCardsGridSkeleton, "PricingCardsGridSkeleton");
-
-// src/features/billing/stripe-subscription/components/widgets/ProrationPreview.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-function ProrationPreview({ preview }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [
-    /* @__PURE__ */ jsx17("h4", { className: "font-semibold text-blue-900 mb-3", children: "Proration Breakdown" }),
-    /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-      preview.lineItems.map((item, index) => /* @__PURE__ */ jsxs15("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ jsx17("span", { className: "text-blue-800", children: item.description }),
-        /* @__PURE__ */ jsx17("span", { className: `font-medium ${item.amount < 0 ? "text-green-600" : "text-blue-900"}`, children: formatCurrency(item.amount, preview.currency) })
-      ] }, index)),
-      /* @__PURE__ */ jsx17("div", { className: "border-t border-blue-200 pt-2 mt-2", children: /* @__PURE__ */ jsxs15("div", { className: "flex justify-between font-semibold", children: [
-        /* @__PURE__ */ jsx17("span", { className: "text-blue-900", children: "Net Due Today" }),
-        /* @__PURE__ */ jsx17("span", { className: "text-blue-900", children: formatCurrency(preview.immediateCharge, preview.currency) })
-      ] }) }),
-      preview.lineItems.length > 0 && preview.lineItems[0].period && /* @__PURE__ */ jsxs15("div", { className: "text-xs text-blue-700 mt-2", children: [
-        "Next invoice on ",
-        formatDate3(preview.lineItems[0].period.end),
-        " for",
-        " ",
-        formatCurrency(preview.amountDue, preview.currency)
-      ] })
-    ] })
-  ] });
-}
-__name(ProrationPreview, "ProrationPreview");
-
-// src/features/billing/stripe-subscription/components/forms/SubscriptionEditor.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
-function SubscriptionEditor({
-  subscription,
-  open,
-  onOpenChange,
-  onSuccess,
-  onAddPaymentMethod
-}) {
-  const { confirmPayment, isConfirming } = useConfirmSubscriptionPayment();
-  const [products, setProducts] = useState9([]);
-  const [pricesByProduct, setPricesByProduct] = useState9(/* @__PURE__ */ new Map());
-  const [loading, setLoading] = useState9(true);
-  const [selectedPriceId, setSelectedPriceId] = useState9(null);
-  const [loadingPriceId, setLoadingPriceId] = useState9(null);
-  const [prorationPreview, setProrationPreview] = useState9(null);
-  const [loadingProration, setLoadingProration] = useState9(false);
-  const [hasPaymentMethod, setHasPaymentMethod] = useState9(true);
-  const [loadingPaymentMethods, setLoadingPaymentMethods] = useState9(true);
-  const [paymentRequiredError, setPaymentRequiredError] = useState9(false);
-  const [paymentConfirmationState, setPaymentConfirmationState] = useState9("idle");
-  const [paymentError, setPaymentError] = useState9(null);
-  const currentPriceId = subscription?.price?.id;
-  const isEditMode = !!subscription;
-  useEffect5(() => {
-    const checkPaymentMethods = /* @__PURE__ */ __name(async () => {
-      if (subscription) {
-        setLoadingPaymentMethods(false);
-        return;
-      }
-      setLoadingPaymentMethods(true);
-      try {
-        const paymentMethods = await StripeCustomerService.listPaymentMethods();
-        const hasMethod = paymentMethods.length > 0;
-        setHasPaymentMethod(hasMethod);
-      } catch (error) {
-        console.error("[SubscriptionEditor] Failed to check payment methods:", error);
-        setHasPaymentMethod(false);
-      } finally {
-        setLoadingPaymentMethods(false);
-      }
-    }, "checkPaymentMethods");
-    if (open) {
-      checkPaymentMethods();
-    }
-  }, [open, subscription]);
-  useEffect5(() => {
-    const loadData = /* @__PURE__ */ __name(async () => {
-      setLoading(true);
-      try {
-        const fetchedProducts = await StripeProductService.listProducts({ active: true });
-        const grouped = /* @__PURE__ */ 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("[SubscriptionEditor] Failed to load products/prices:", error);
-      } finally {
-        setLoading(false);
-      }
-    }, "loadData");
-    if (open) {
-      loadData();
-    }
-  }, [open]);
-  useEffect5(() => {
-    const loadProration = /* @__PURE__ */ __name(async () => {
-      if (!subscription || !selectedPriceId || selectedPriceId === currentPriceId) {
-        setProrationPreview(null);
-        return;
-      }
-      setLoadingProration(true);
-      try {
-        const preview = await StripeSubscriptionService.getProrationPreview({
-          subscriptionId: subscription.id,
-          newPriceId: selectedPriceId
-        });
-        setProrationPreview(preview);
-      } catch (error) {
-        console.error("[SubscriptionEditor] Failed to load proration preview:", error);
-        setProrationPreview(null);
-      } finally {
-        setLoadingProration(false);
-      }
-    }, "loadProration");
-    loadProration();
-  }, [selectedPriceId, subscription, currentPriceId]);
-  const handleSelectPrice = /* @__PURE__ */ __name(async (price) => {
-    const priceId = price.id;
-    if (isEditMode) {
-      setSelectedPriceId(priceId);
-    } else {
-      setLoadingPriceId(priceId);
-      setSelectedPriceId(priceId);
-      setPaymentError(null);
-      setPaymentConfirmationState("idle");
-      try {
-        const result = await StripeSubscriptionService.createSubscription({
-          id: v4(),
-          priceId
-        });
-        if (result.meta.requiresAction && result.meta.clientSecret) {
-          setPaymentConfirmationState("confirming");
-          const confirmation = await confirmPayment(result.meta.clientSecret);
-          if (!confirmation.success) {
-            console.error("[SubscriptionEditor] Payment confirmation failed:", confirmation.error);
-            setPaymentConfirmationState("error");
-            setPaymentError(confirmation.error || "Payment confirmation failed");
-            setLoadingPriceId(null);
-            return;
-          }
-          await StripeSubscriptionService.syncSubscription({
-            subscriptionId: result.subscription.id
-          });
-        }
-        setPaymentConfirmationState("success");
-        setTimeout(() => {
-          onSuccess();
-          onOpenChange(false);
-        }, 1e3);
-      } catch (error) {
-        console.error("[SubscriptionEditor] Failed to create subscription:", error);
-        if (error?.status === 402 || error?.response?.status === 402) {
-          setPaymentRequiredError(true);
-          setHasPaymentMethod(false);
-        } else {
-          setPaymentConfirmationState("error");
-          setPaymentError(error?.message || "Failed to create subscription");
-        }
-        setLoadingPriceId(null);
-      }
-    }
-  }, "handleSelectPrice");
-  const handleConfirmPlanChange = /* @__PURE__ */ __name(async () => {
-    if (!subscription || !selectedPriceId) return;
-    setLoadingPriceId(selectedPriceId);
-    try {
-      await StripeSubscriptionService.changePlan({
-        id: subscription.id,
-        newPriceId: selectedPriceId
-      });
-      onSuccess();
-      onOpenChange(false);
-    } catch (error) {
-      console.error("[SubscriptionEditor] Failed to change plan:", error);
-    } finally {
-      setLoadingPriceId(null);
-    }
-  }, "handleConfirmPlanChange");
-  const handleCancel = /* @__PURE__ */ __name(() => {
-    setSelectedPriceId(null);
-    setProrationPreview(null);
-  }, "handleCancel");
-  return /* @__PURE__ */ jsx18(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(DialogContent, { className: "max-w-4xl max-h-[90vh] overflow-y-auto", children: [
-    /* @__PURE__ */ jsxs16(DialogHeader, { children: [
-      /* @__PURE__ */ jsx18(DialogTitle, { children: subscription ? "Change Plan" : "Subscribe to a Plan" }),
-      /* @__PURE__ */ jsx18(DialogDescription, { children: subscription ? "Select a new plan to switch to. You'll see a proration preview before confirming." : "Choose a plan to start your subscription." })
-    ] }),
-    loadingPaymentMethods && !subscription ? /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx18("div", { className: "text-muted-foreground", children: "Checking payment methods..." }) }) : !hasPaymentMethod && !subscription ? /* @__PURE__ */ jsxs16(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx18(AlertTitle, { children: "Payment Method Required" }),
-      /* @__PURE__ */ jsxs16(AlertDescription, { className: "mt-2", children: [
-        /* @__PURE__ */ jsx18("p", { className: "mb-4", children: paymentRequiredError ? "Your subscription could not be created because no payment method is on file." : "You need to add a payment method before you can subscribe to a plan." }),
-        onAddPaymentMethod && /* @__PURE__ */ jsx18(Button, { onClick: onAddPaymentMethod, variant: "outline", children: "Add Payment Method" })
-      ] })
-    ] }) : paymentConfirmationState === "confirming" || isConfirming ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
-      /* @__PURE__ */ jsx18(Loader2, { className: "h-8 w-8 animate-spin text-primary" }),
-      /* @__PURE__ */ jsxs16("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx18("p", { className: "font-medium", children: "Processing payment..." }),
-        /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: "Please complete any verification if prompted." })
-      ] })
-    ] }) : paymentConfirmationState === "success" ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
-      /* @__PURE__ */ jsx18(CheckCircle, { className: "h-12 w-12 text-green-500" }),
-      /* @__PURE__ */ jsxs16("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx18("p", { className: "font-medium text-green-600", children: "Payment successful!" }),
-        /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: "Your subscription is now active." })
-      ] })
-    ] }) : paymentConfirmationState === "error" ? /* @__PURE__ */ jsx18("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs16(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx18(AlertTitle, { children: "Payment Failed" }),
-      /* @__PURE__ */ jsxs16(AlertDescription, { className: "mt-2", children: [
-        /* @__PURE__ */ jsx18("p", { className: "mb-4", children: paymentError || "We couldn't process your payment. Please try again." }),
-        /* @__PURE__ */ jsx18(
-          Button,
-          {
-            onClick: () => {
-              setPaymentConfirmationState("idle");
-              setPaymentError(null);
-              setLoadingPriceId(null);
-            },
-            variant: "outline",
-            children: "Try Again"
-          }
-        )
-      ] })
-    ] }) }) : /* @__PURE__ */ jsxs16("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx18(
-        PricingCardsGrid,
-        {
-          products,
-          pricesByProduct,
-          currentPriceId,
-          selectedPriceId: selectedPriceId ?? void 0,
-          loadingPriceId: loadingPriceId ?? void 0,
-          loading,
-          onSelectPrice: handleSelectPrice
-        }
-      ),
-      isEditMode && loadingProration && /* @__PURE__ */ jsx18("div", { className: "bg-muted/50 rounded-lg p-4 text-sm text-muted-foreground text-center", children: "Loading proration preview..." }),
-      isEditMode && prorationPreview && !loadingProration && /* @__PURE__ */ jsxs16("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx18(ProrationPreview, { preview: prorationPreview }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex justify-end gap-3", children: [
-          /* @__PURE__ */ jsx18(Button, { variant: "outline", onClick: handleCancel, disabled: !!loadingPriceId, children: "Cancel" }),
-          /* @__PURE__ */ jsx18(Button, { onClick: handleConfirmPlanChange, disabled: !!loadingPriceId, children: loadingPriceId ? "Processing..." : "Confirm Plan Change" })
-        ] })
-      ] })
-    ] })
-  ] }) });
-}
-__name(SubscriptionEditor, "SubscriptionEditor");
-
-// src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx
-import { useState as useState11 } from "react";
-
-// src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx
-import { useState as useState10 } from "react";
-
 // src/features/billing/stripe-subscription/components/widgets/SubscriptionStatusBadge.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var statusConfig2 = {
   ["active" /* ACTIVE */]: {
     label: "Active",
@@ -1688,12 +1260,12 @@ var cancelingConfig = {
 };
 function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }) {
   const config = cancelAtPeriodEnd ? cancelingConfig : statusConfig2[status] || statusConfig2["canceled" /* CANCELED */];
-  return /* @__PURE__ */ jsx19("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
+  return /* @__PURE__ */ jsx16("span", { className: `${config.color} text-xs px-2 py-1 rounded-full font-medium`, children: config.label });
 }
 __name(SubscriptionStatusBadge, "SubscriptionStatusBadge");
 
 // src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatPlanName2(price) {
   if (!price) return "N/A";
   const productName = price.product?.name || "";
@@ -1722,11 +1294,11 @@ function SubscriptionDetails({
   subscription,
   open,
   onOpenChange,
-  onSubscriptionChange
+  onSubscriptionChange,
+  onChangePlan
 }) {
-  const [showEdit, setShowEdit] = useState10(false);
-  const [showCancel, setShowCancel] = useState10(false);
-  const [isProcessing, setIsProcessing] = useState10(false);
+  const [showCancel, setShowCancel] = useState8(false);
+  const [isProcessing, setIsProcessing] = useState8(false);
   const handlePause = /* @__PURE__ */ __name(async () => {
     setIsProcessing(true);
     try {
@@ -1760,67 +1332,55 @@ function SubscriptionDetails({
   const canPause = subscription.status === "active" /* ACTIVE */;
   const canResume = subscription.status === "paused" /* PAUSED */;
   const canCancel = subscription.status === "active" /* ACTIVE */ || subscription.status === "trialing" /* TRIALING */ || subscription.status === "paused" /* PAUSED */;
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx20(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(DialogContent, { className: "max-w-2xl", children: [
-      /* @__PURE__ */ jsxs17(DialogHeader, { children: [
-        /* @__PURE__ */ jsx20(DialogTitle, { children: "Subscription Details" }),
-        /* @__PURE__ */ jsx20(DialogDescription, { children: "View and manage your subscription" })
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx17(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs14(DialogContent, { className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsxs14(DialogHeader, { children: [
+        /* @__PURE__ */ jsx17(DialogTitle, { children: "Subscription Details" }),
+        /* @__PURE__ */ jsx17(DialogDescription, { children: "View and manage your subscription" })
       ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-muted-foreground", children: "Status:" }),
-          /* @__PURE__ */ jsx20(SubscriptionStatusBadge, { status: subscription.status, cancelAtPeriodEnd: subscription.cancelAtPeriodEnd })
+      /* @__PURE__ */ jsxs14("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-x-3", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Status:" }),
+          /* @__PURE__ */ jsx17(SubscriptionStatusBadge, { status: subscription.status, cancelAtPeriodEnd: subscription.cancelAtPeriodEnd })
         ] }),
-        /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-muted-foreground", children: "Plan:" }),
-            /* @__PURE__ */ jsx20("span", { className: "font-medium", children: formatPlanName2(subscription.price) })
+        /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Plan:" }),
+            /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatPlanName2(subscription.price) })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Amount:" }),
-            /* @__PURE__ */ jsx20("span", { className: "font-medium", children: formatBillingAmount(subscription.price) })
+          /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Billing Amount:" }),
+            /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatBillingAmount(subscription.price) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx20("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs17("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-muted-foreground", children: "Current Period:" }),
-          /* @__PURE__ */ jsxs17("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Current Period:" }),
+          /* @__PURE__ */ jsxs14("span", { className: "font-medium", children: [
             formatDate3(subscription.currentPeriodStart),
             " - ",
             formatDate3(subscription.currentPeriodEnd)
           ] })
         ] }) }),
-        subscription.trialEnd && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-muted-foreground", children: "Trial Ends:" }),
-          /* @__PURE__ */ jsx20("span", { className: "font-medium", children: formatDate3(subscription.trialEnd) })
+        subscription.trialEnd && /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Trial Ends:" }),
+          /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatDate3(subscription.trialEnd) })
         ] }),
-        subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsx20("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs17("p", { className: "text-sm text-yellow-800", children: [
+        subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsx17("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs14("p", { className: "text-sm text-yellow-800", children: [
           "This subscription will be canceled at the end of the current period on",
           " ",
           formatDate3(subscription.currentPeriodEnd),
           "."
         ] }) }),
-        /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-2 pt-4 border-t", children: [
-          /* @__PURE__ */ jsx20(Button, { variant: "default", onClick: () => setShowEdit(true), children: "Change Plan" }),
-          canPause && /* @__PURE__ */ jsx20(Button, { variant: "outline", onClick: handlePause, disabled: isProcessing, children: isProcessing ? "Pausing..." : "Pause" }),
-          canResume && /* @__PURE__ */ jsx20(Button, { variant: "outline", onClick: handleResume, disabled: isProcessing, children: isProcessing ? "Resuming..." : "Resume" }),
-          canCancel && /* @__PURE__ */ jsx20(Button, { variant: "destructive", onClick: () => setShowCancel(true), children: "Cancel" }),
-          /* @__PURE__ */ jsx20(Button, { variant: "outline", onClick: handleManageViaPortal, children: "Manage via Portal" })
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-2 pt-4 border-t", children: [
+          onChangePlan && /* @__PURE__ */ jsx17(Button, { variant: "default", onClick: () => onChangePlan(subscription), children: "Change Plan" }),
+          canPause && /* @__PURE__ */ jsx17(Button, { variant: "outline", onClick: handlePause, disabled: isProcessing, children: isProcessing ? "Pausing..." : "Pause" }),
+          canResume && /* @__PURE__ */ jsx17(Button, { variant: "outline", onClick: handleResume, disabled: isProcessing, children: isProcessing ? "Resuming..." : "Resume" }),
+          canCancel && /* @__PURE__ */ jsx17(Button, { variant: "destructive", onClick: () => setShowCancel(true), children: "Cancel" }),
+          /* @__PURE__ */ jsx17(Button, { variant: "outline", onClick: handleManageViaPortal, children: "Manage via Portal" })
         ] })
       ] })
     ] }) }),
-    showEdit && /* @__PURE__ */ jsx20(
-      SubscriptionEditor,
-      {
-        subscription,
-        open: showEdit,
-        onOpenChange: setShowEdit,
-        onSuccess: () => {
-          onSubscriptionChange();
-          setShowEdit(false);
-        }
-      }
-    ),
-    showCancel && /* @__PURE__ */ jsx20(
+    showCancel && /* @__PURE__ */ jsx17(
       CancelSubscriptionDialog,
       {
         subscription,
@@ -1837,7 +1397,7 @@ function SubscriptionDetails({
 __name(SubscriptionDetails, "SubscriptionDetails");
 
 // src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function formatPlanName3(price) {
   if (!price) return "N/A";
   const productName = price.product?.name || "";
@@ -1857,277 +1417,826 @@ function formatPlanName3(price) {
   return interval ? `${planLabel} (${interval})` : planLabel || "N/A";
 }
 __name(formatPlanName3, "formatPlanName");
-function SubscriptionsList({ subscriptions, onSubscriptionsChange }) {
-  const [selectedSub, setSelectedSub] = useState11(null);
+function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChangePlan }) {
+  const [selectedSub, setSelectedSub] = useState9(null);
   const handleRowClick = /* @__PURE__ */ __name((subscription) => {
     setSelectedSub(subscription);
   }, "handleRowClick");
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx21("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs18(Table, { children: [
-      /* @__PURE__ */ jsx21(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs18(TableRow, { children: [
-        /* @__PURE__ */ jsx21(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx21(TableHead, { children: "Plan" }),
-        /* @__PURE__ */ jsx21(TableHead, { children: "Period" }),
-        /* @__PURE__ */ jsx21(TableHead, { className: "text-right", children: "Amount" })
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs15(Table, { children: [
+      /* @__PURE__ */ jsx18(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs15(TableRow, { children: [
+        /* @__PURE__ */ jsx18(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx18(TableHead, { children: "Plan" }),
+        /* @__PURE__ */ jsx18(TableHead, { children: "Period" }),
+        /* @__PURE__ */ jsx18(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsx21(TableBody, { children: subscriptions.map((subscription) => {
+      /* @__PURE__ */ jsx18(TableBody, { children: subscriptions.map((subscription) => {
         const price = subscription.price;
         const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "N/A";
         const period = `${formatDate3(subscription.currentPeriodStart)} - ${formatDate3(subscription.currentPeriodEnd)}`;
-        return /* @__PURE__ */ jsxs18(
+        return /* @__PURE__ */ jsxs15(
           TableRow,
           {
-            onClick: () => handleRowClick(subscription),
-            className: "cursor-pointer hover:bg-muted/50",
-            children: [
-              /* @__PURE__ */ jsx21(TableCell, { children: /* @__PURE__ */ jsx21(SubscriptionStatusBadge, { status: subscription.status, cancelAtPeriodEnd: subscription.cancelAtPeriodEnd }) }),
-              /* @__PURE__ */ jsx21(TableCell, { className: "font-medium", children: formatPlanName3(price) }),
-              /* @__PURE__ */ jsx21(TableCell, { className: "text-muted-foreground text-sm", children: period }),
-              /* @__PURE__ */ jsx21(TableCell, { className: "text-right font-medium", children: amount })
-            ]
+            onClick: () => handleRowClick(subscription),
+            className: "cursor-pointer hover:bg-muted/50",
+            children: [
+              /* @__PURE__ */ jsx18(TableCell, { children: /* @__PURE__ */ jsx18(SubscriptionStatusBadge, { status: subscription.status, cancelAtPeriodEnd: subscription.cancelAtPeriodEnd }) }),
+              /* @__PURE__ */ jsx18(TableCell, { className: "font-medium", children: formatPlanName3(price) }),
+              /* @__PURE__ */ jsx18(TableCell, { className: "text-muted-foreground text-sm", children: period }),
+              /* @__PURE__ */ jsx18(TableCell, { className: "text-right font-medium", children: amount })
+            ]
+          },
+          subscription.id
+        );
+      }) })
+    ] }) }),
+    selectedSub && /* @__PURE__ */ jsx18(
+      SubscriptionDetails,
+      {
+        subscription: selectedSub,
+        open: !!selectedSub,
+        onOpenChange: (open) => !open && setSelectedSub(null),
+        onSubscriptionChange: () => {
+          onSubscriptionsChange();
+          setSelectedSub(null);
+        },
+        onChangePlan: onChangePlan ? (sub) => {
+          setSelectedSub(null);
+          onChangePlan(sub);
+        } : void 0
+      }
+    )
+  ] });
+}
+__name(SubscriptionsList, "SubscriptionsList");
+
+// src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function SubscriptionsContainer({ onOpenWizard }) {
+  const [subscriptions, setSubscriptions] = useState10([]);
+  const [loading, setLoading] = useState10(true);
+  const loadSubscriptions = useCallback(async () => {
+    setLoading(true);
+    try {
+      const fetchedSubscriptions = await StripeSubscriptionService.listSubscriptions();
+      setSubscriptions(fetchedSubscriptions);
+    } catch (error) {
+      console.error("[SubscriptionsContainer] Failed to load subscriptions:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect5(() => {
+    loadSubscriptions();
+  }, []);
+  const criticalSubscriptions = subscriptions.filter(
+    (sub) => sub.status === "past_due" /* PAST_DUE */ || sub.status === "trialing" /* TRIALING */ && sub.trialEnd && new Date(sub.trialEnd).getTime() - (/* @__PURE__ */ new Date()).getTime() <= 7 * 24 * 60 * 60 * 1e3
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx19("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Loading subscriptions..." }) });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx19(CreditCard3, { className: "h-8 w-8" }),
+        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Subscriptions" })
+      ] }),
+      subscriptions.length > 0 && /* @__PURE__ */ jsx19(Button, { onClick: () => onOpenWizard?.(), children: "Subscribe to a Plan" })
+    ] }),
+    criticalSubscriptions.map((subscription) => /* @__PURE__ */ jsx19(BillingAlertBanner, { subscription }, subscription.id)),
+    subscriptions.length === 0 && /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
+      /* @__PURE__ */ jsx19(CreditCard3, { className: "h-16 w-16 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs16("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx19("h3", { className: "text-xl font-semibold mb-2", children: "No Active Subscriptions" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground mb-6", children: "Choose a subscription plan to get started with our services." }),
+        /* @__PURE__ */ jsx19(Button, { onClick: () => onOpenWizard?.(), children: "Subscribe to a Plan" })
+      ] })
+    ] }),
+    subscriptions.length > 0 && /* @__PURE__ */ jsx19(
+      SubscriptionsList,
+      {
+        subscriptions,
+        onSubscriptionsChange: loadSubscriptions,
+        onChangePlan: (sub) => onOpenWizard?.(sub)
+      }
+    )
+  ] });
+}
+__name(SubscriptionsContainer, "SubscriptionsContainer");
+
+// src/features/billing/stripe-subscription/components/widgets/IntervalToggle.tsx
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function IntervalToggle({ value, onChange, hasMonthly, hasYearly }) {
+  if (!hasMonthly || !hasYearly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx20(Tabs, { value, onValueChange: (v) => onChange(v), children: /* @__PURE__ */ jsxs17(TabsList, { children: [
+    /* @__PURE__ */ jsx20(TabsTrigger, { value: "month", children: "Monthly" }),
+    /* @__PURE__ */ jsx20(TabsTrigger, { value: "year", children: "Yearly" })
+  ] }) });
+}
+__name(IntervalToggle, "IntervalToggle");
+
+// src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx
+import { Check } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function PricingCard({ price, isCurrentPlan = false, isSelected = false, isDisabled = false, isLoading = false, onSelect }) {
+  const description = price.description || price.nickname || "Standard";
+  const features = price.features || [];
+  const formattedPrice = formatCurrency(price.unitAmount, price.currency);
+  const interval = formatInterval(price);
+  const handleKeyDown = /* @__PURE__ */ __name((e) => {
+    if ((e.key === "Enter" || e.key === " ") && !isDisabled && !isCurrentPlan) {
+      e.preventDefault();
+      onSelect(price);
+    }
+  }, "handleKeyDown");
+  const handleClick = /* @__PURE__ */ __name(() => {
+    if (!isDisabled && !isCurrentPlan && !isLoading) {
+      onSelect(price);
+    }
+  }, "handleClick");
+  return /* @__PURE__ */ jsxs18(
+    Card,
+    {
+      role: "radio",
+      "aria-checked": isSelected,
+      "aria-label": `${description} plan at ${formattedPrice} ${interval}`,
+      tabIndex: isDisabled ? -1 : 0,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+      className: cn(
+        "relative cursor-pointer transition-all duration-200 flex flex-col h-full",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        isCurrentPlan && "bg-muted/30",
+        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"
+      ),
+      children: [
+        isCurrentPlan && /* @__PURE__ */ jsx21(Badge, { variant: "secondary", className: "absolute top-2 right-2", children: "Current" }),
+        /* @__PURE__ */ jsx21(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx21("h3", { className: "font-semibold text-lg", children: description }) }),
+        /* @__PURE__ */ jsxs18(CardContent, { className: "pb-4 grow", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "mb-4", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-3xl font-bold", children: formattedPrice }),
+            /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground ml-1", children: interval })
+          ] }),
+          features.length > 0 && /* @__PURE__ */ jsx21("ul", { className: "space-y-2", children: features.map((feature, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx21(Check, { className: "h-4 w-4 text-green-500 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsx21("span", { className: "text-sm text-muted-foreground", children: feature })
+          ] }, index)) })
+        ] }),
+        /* @__PURE__ */ jsx21(CardFooter, { children: /* @__PURE__ */ jsx21(
+          Button,
+          {
+            variant: isCurrentPlan ? "secondary" : isSelected ? "default" : "outline",
+            className: "w-full",
+            disabled: isDisabled || isCurrentPlan || isLoading,
+            children: isLoading ? "Processing..." : isCurrentPlan ? "Current Plan" : isSelected ? "Selected" : "Select Plan"
+          }
+        ) })
+      ]
+    }
+  );
+}
+__name(PricingCard, "PricingCard");
+
+// src/features/billing/stripe-subscription/components/widgets/ProductPricingRow.tsx
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function ProductPricingRow({
+  product,
+  prices,
+  currentPriceId,
+  selectedPriceId,
+  loadingPriceId,
+  onSelectPrice
+}) {
+  if (prices.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx22("h3", { className: "font-semibold text-lg", children: product.name }),
+    /* @__PURE__ */ jsx22(
+      "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}`,
+        children: prices.sort((a, b) => (a.unitAmount ?? 0) - (b.unitAmount ?? 0)).map((price) => /* @__PURE__ */ jsx22(
+          PricingCard,
+          {
+            price,
+            isCurrentPlan: price.id === currentPriceId,
+            isSelected: price.id === selectedPriceId,
+            isLoading: price.id === loadingPriceId,
+            onSelect: onSelectPrice
           },
-          subscription.id
-        );
-      }) })
-    ] }) }),
-    selectedSub && /* @__PURE__ */ jsx21(
-      SubscriptionDetails,
-      {
-        subscription: selectedSub,
-        open: !!selectedSub,
-        onOpenChange: (open) => !open && setSelectedSub(null),
-        onSubscriptionChange: () => {
-          onSubscriptionsChange();
-          setSelectedSub(null);
-        }
+          price.id
+        ))
       }
     )
   ] });
 }
-__name(SubscriptionsList, "SubscriptionsList");
+__name(ProductPricingRow, "ProductPricingRow");
 
-// src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
-function SubscriptionsContainer() {
-  const { confirmPayment, isConfirming } = useConfirmSubscriptionPayment();
-  const [subscriptions, setSubscriptions] = useState12([]);
-  const [loading, setLoading] = useState12(true);
-  const [showCreateSubscription, setShowCreateSubscription] = useState12(false);
-  const [showPaymentMethodEditor, setShowPaymentMethodEditor] = useState12(false);
-  const [products, setProducts] = useState12([]);
-  const [pricesByProduct, setPricesByProduct] = useState12(/* @__PURE__ */ new Map());
-  const [loadingPricing, setLoadingPricing] = useState12(false);
-  const [hasPaymentMethod, setHasPaymentMethod] = useState12(null);
-  const [pendingPriceId, setPendingPriceId] = useState12(null);
-  const [creatingSubscription, setCreatingSubscription] = useState12(false);
-  const [paymentConfirmationState, setPaymentConfirmationState] = useState12("idle");
-  const [paymentError, setPaymentError] = useState12(null);
-  const loadSubscriptions = /* @__PURE__ */ __name(async () => {
-    setLoading(true);
+// src/features/billing/stripe-subscription/components/widgets/ProductPricingList.tsx
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function isRecurringProduct(prices) {
+  return prices.some((p) => p.priceType === "recurring");
+}
+__name(isRecurringProduct, "isRecurringProduct");
+function getFilteredPrices(prices, selectedInterval) {
+  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;
+}
+__name(getFilteredPrices, "getFilteredPrices");
+function ProductPricingList({
+  products,
+  selectedInterval,
+  currentPriceId,
+  selectedPriceId,
+  loadingPriceId,
+  loading = false,
+  onSelectPrice,
+  hideRecurringPrices = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx23(ProductPricingListSkeleton, {});
+  }
+  if (products.length === 0) {
+    return /* @__PURE__ */ jsx23("div", { className: "text-center py-8 text-muted-foreground", children: "No plans available" });
+  }
+  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;
+  });
+  const filteredProducts = hideRecurringPrices ? sortedProducts.map((product) => ({
+    ...product,
+    stripePrices: (product.stripePrices || []).filter((price) => price.priceType !== "recurring")
+  })).filter((product) => product.stripePrices.length > 0) : sortedProducts;
+  return /* @__PURE__ */ jsx23("div", { className: "space-y-6", children: filteredProducts.map((product) => {
+    const allPrices = product.stripePrices || [];
+    const filteredPrices = getFilteredPrices(allPrices, selectedInterval);
+    if (filteredPrices.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx23(
+      ProductPricingRow,
+      {
+        product,
+        prices: filteredPrices,
+        currentPriceId,
+        selectedPriceId,
+        loadingPriceId,
+        onSelectPrice
+      },
+      product.id
+    );
+  }) });
+}
+__name(ProductPricingList, "ProductPricingList");
+function ProductPricingListSkeleton() {
+  return /* @__PURE__ */ jsx23("div", { className: "space-y-6", children: [1, 2].map((rowIndex) => /* @__PURE__ */ jsxs20("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx23(Skeleton, { className: "h-6 w-32" }),
+    /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [1, 2, 3].map((cardIndex) => /* @__PURE__ */ jsxs20("div", { className: "p-4 rounded-lg border animate-pulse space-y-3", children: [
+      /* @__PURE__ */ jsx23(Skeleton, { className: "h-6 w-24" }),
+      /* @__PURE__ */ jsx23(Skeleton, { className: "h-8 w-32" }),
+      /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx23(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx23(Skeleton, { className: "h-4 w-3/4" })
+      ] }),
+      /* @__PURE__ */ jsx23(Skeleton, { className: "h-10 w-full" })
+    ] }, cardIndex)) })
+  ] }, rowIndex)) });
+}
+__name(ProductPricingListSkeleton, "ProductPricingListSkeleton");
+
+// src/features/billing/stripe-subscription/components/widgets/ProrationPreview.tsx
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function ProrationPreview({ preview }) {
+  return /* @__PURE__ */ jsxs21("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [
+    /* @__PURE__ */ jsx24("h4", { className: "font-semibold text-blue-900 mb-3", children: "Proration Breakdown" }),
+    /* @__PURE__ */ jsxs21("div", { className: "space-y-2", children: [
+      preview.lineItems.map((item, index) => /* @__PURE__ */ jsxs21("div", { className: "flex justify-between text-sm", children: [
+        /* @__PURE__ */ jsx24("span", { className: "text-blue-800", children: item.description }),
+        /* @__PURE__ */ jsx24("span", { className: `font-medium ${item.amount < 0 ? "text-green-600" : "text-blue-900"}`, children: formatCurrency(item.amount, preview.currency) })
+      ] }, index)),
+      /* @__PURE__ */ jsx24("div", { className: "border-t border-blue-200 pt-2 mt-2", children: /* @__PURE__ */ jsxs21("div", { className: "flex justify-between font-semibold", children: [
+        /* @__PURE__ */ jsx24("span", { className: "text-blue-900", children: "Net Due Today" }),
+        /* @__PURE__ */ jsx24("span", { className: "text-blue-900", children: formatCurrency(preview.immediateCharge, preview.currency) })
+      ] }) }),
+      preview.lineItems.length > 0 && preview.lineItems[0].period && /* @__PURE__ */ jsxs21("div", { className: "text-xs text-blue-700 mt-2", children: [
+        "Next invoice on ",
+        formatDate3(preview.lineItems[0].period.end),
+        " for",
+        " ",
+        formatCurrency(preview.amountDue, preview.currency)
+      ] })
+    ] })
+  ] });
+}
+__name(ProrationPreview, "ProrationPreview");
+
+// src/features/billing/stripe-subscription/components/widgets/SubscriptionConfirmation.tsx
+import { Check as Check2, Loader2 } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel }) {
+  const productName = price.product?.name || price.nickname || "Selected Plan";
+  const productDescription = price.product?.description || price.description;
+  const features = price.features || [];
+  return /* @__PURE__ */ jsxs22("div", { className: "bg-accent/10 border border-accent/30 rounded-lg p-4", children: [
+    /* @__PURE__ */ jsx25("h4", { className: "font-semibold mb-3", children: "Confirm Your Subscription" }),
+    /* @__PURE__ */ jsxs22("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs22("div", { children: [
+        /* @__PURE__ */ jsx25("div", { className: "font-medium", children: productName }),
+        productDescription && /* @__PURE__ */ jsx25("div", { className: "text-sm text-muted-foreground", children: productDescription })
+      ] }),
+      /* @__PURE__ */ jsxs22("div", { className: "text-lg font-semibold", children: [
+        formatCurrency(price.unitAmount, price.currency),
+        /* @__PURE__ */ jsx25("span", { className: "text-sm font-normal text-muted-foreground", children: formatInterval(price) })
+      ] }),
+      features.length > 0 && /* @__PURE__ */ jsx25("div", { className: "space-y-1", children: features.map((feature, index) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-sm ", children: [
+        /* @__PURE__ */ jsx25(Check2, { className: "h-4 w-4 text-primary" }),
+        /* @__PURE__ */ jsx25("span", { children: feature })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-3 pt-2 border-t border-accent/30", children: [
+        /* @__PURE__ */ jsx25(Button, { variant: "outline", onClick: onCancel, disabled: isLoading, children: "Cancel" }),
+        /* @__PURE__ */ jsx25(Button, { onClick: onConfirm, disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
+          /* @__PURE__ */ jsx25(Loader2, { className: "h-4 w-4 animate-spin mr-2" }),
+          "Processing..."
+        ] }) : "Subscribe" })
+      ] })
+    ] })
+  ] });
+}
+__name(SubscriptionConfirmation, "SubscriptionConfirmation");
+
+// src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx
+import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef2 } from "react";
+
+// src/features/billing/stripe-subscription/hooks/useSubscriptionWizard.ts
+import { useCallback as useCallback2, useMemo, useReducer, useRef } from "react";
+var initialState = {
+  step: "plan-selection",
+  selectedPrice: null,
+  selectedInterval: "month",
+  hasPaymentMethod: false,
+  isProcessing: false,
+  error: null,
+  prorationPreview: null
+};
+function wizardReducer(state, action) {
+  switch (action.type) {
+    case "SET_STEP":
+      return { ...state, step: action.step, error: null };
+    case "SELECT_PRICE":
+      return { ...state, selectedPrice: action.price };
+    case "SET_INTERVAL":
+      return { ...state, selectedInterval: action.interval };
+    case "SET_HAS_PAYMENT_METHOD":
+      return { ...state, hasPaymentMethod: action.hasMethod };
+    case "SET_PROCESSING":
+      return { ...state, isProcessing: action.isProcessing };
+    case "SET_ERROR":
+      return { ...state, error: action.error };
+    case "SET_PRORATION_PREVIEW":
+      return { ...state, prorationPreview: action.preview };
+    case "RESET":
+      return initialState;
+    default:
+      return state;
+  }
+}
+__name(wizardReducer, "wizardReducer");
+function useSubscriptionWizard({ subscription, onSuccess, onClose }) {
+  const [state, dispatch] = useReducer(wizardReducer, {
+    ...initialState,
+    selectedPrice: subscription?.price || null
+  });
+  const onSuccessRef = useRef(onSuccess);
+  const onCloseRef = useRef(onClose);
+  onSuccessRef.current = onSuccess;
+  onCloseRef.current = onClose;
+  const checkPaymentMethod = useCallback2(async () => {
     try {
-      const fetchedSubscriptions = await StripeSubscriptionService.listSubscriptions();
-      setSubscriptions(fetchedSubscriptions);
+      const methods = await StripeCustomerService.listPaymentMethods();
+      dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: methods.length > 0 });
     } catch (error) {
-      console.error("[SubscriptionsContainer] Failed to load subscriptions:", error);
-    } finally {
-      setLoading(false);
+      console.error("[useSubscriptionWizard] Failed to check payment methods:", error);
+      dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: false });
     }
-  }, "loadSubscriptions");
-  const loadPricingData = /* @__PURE__ */ __name(async () => {
-    setLoadingPricing(true);
+  }, []);
+  const selectPrice = useCallback2((price) => {
+    dispatch({ type: "SELECT_PRICE", price });
+  }, []);
+  const setInterval = useCallback2((interval) => {
+    dispatch({ type: "SET_INTERVAL", interval });
+  }, []);
+  const goToStep = useCallback2((step) => {
+    dispatch({ type: "SET_STEP", step });
+  }, []);
+  const goToReview = useCallback2(async () => {
+    if (!state.selectedPrice) return;
+    dispatch({ type: "SET_PROCESSING", isProcessing: true });
     try {
-      const fetchedProducts = await StripeProductService.listProducts({ active: true });
-      const grouped = /* @__PURE__ */ new Map();
-      for (const product of fetchedProducts) {
-        if (product.stripePrices && product.stripePrices.length > 0) {
-          grouped.set(product.id, product.stripePrices);
-        }
+      await checkPaymentMethod();
+      if (subscription && state.selectedPrice.id !== subscription.price?.id) {
+        const preview = await StripeSubscriptionService.getProrationPreview({
+          subscriptionId: subscription.id,
+          newPriceId: state.selectedPrice.id
+        });
+        dispatch({ type: "SET_PRORATION_PREVIEW", preview });
       }
-      setProducts(fetchedProducts);
-      setPricesByProduct(grouped);
+      dispatch({ type: "SET_STEP", step: "review" });
     } catch (error) {
-      console.error("[SubscriptionsContainer] Failed to load pricing data:", error);
+      console.error("[useSubscriptionWizard] Error preparing review:", error);
+      dispatch({ type: "SET_ERROR", error: error?.message || "Failed to prepare review" });
     } finally {
-      setLoadingPricing(false);
-    }
-  }, "loadPricingData");
-  const checkPaymentMethod = /* @__PURE__ */ __name(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);
+      dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, "checkPaymentMethod");
-  const createSubscriptionWithPrice = /* @__PURE__ */ __name(async (priceId) => {
-    setCreatingSubscription(true);
-    setPaymentError(null);
-    setPaymentConfirmationState("idle");
+  }, [state.selectedPrice, subscription, checkPaymentMethod]);
+  const confirmSubscription = useCallback2(async () => {
+    if (!state.selectedPrice) return;
+    dispatch({ type: "SET_PROCESSING", isProcessing: true });
+    dispatch({ type: "SET_ERROR", error: null });
     try {
-      const result = await StripeSubscriptionService.createSubscription({
-        id: v42(),
-        priceId
-      });
-      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;
-        }
-        await StripeSubscriptionService.syncSubscription({
-          subscriptionId: result.subscription.id
+      if (subscription) {
+        await StripeSubscriptionService.changePlan({
+          id: subscription.id,
+          newPriceId: state.selectedPrice.id
+        });
+      } else {
+        await StripeSubscriptionService.createSubscription({
+          id: crypto.randomUUID(),
+          priceId: state.selectedPrice.id
         });
       }
-      setPaymentConfirmationState("success");
-      await loadSubscriptions();
+      onSuccessRef.current();
+      onCloseRef.current();
     } catch (error) {
-      console.error("[SubscriptionsContainer] Failed to create subscription:", error);
+      console.error("[useSubscriptionWizard] Subscription error:", error);
+      if (error?.status === 409 || error?.response?.status === 409) {
+        dispatch({
+          type: "SET_ERROR",
+          error: "You already have an active subscription. Please change your existing plan instead."
+        });
+        return;
+      }
       if (error?.status === 402 || error?.response?.status === 402) {
-        setPendingPriceId(priceId);
-        setHasPaymentMethod(false);
-        setShowPaymentMethodEditor(true);
-      } else {
-        setPaymentConfirmationState("error");
-        setPaymentError(error?.message || "Failed to create subscription");
+        dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: false });
+        dispatch({ type: "SET_STEP", step: "payment-method" });
+        return;
       }
+      dispatch({ type: "SET_ERROR", error: error?.message || "Failed to process subscription" });
     } finally {
-      setCreatingSubscription(false);
-    }
-  }, "createSubscriptionWithPrice");
-  const handleSelectPrice = /* @__PURE__ */ __name(async (price) => {
-    const priceId = price.id;
-    if (!hasPaymentMethod) {
-      setPendingPriceId(priceId);
-      setShowPaymentMethodEditor(true);
-      return;
-    }
-    await createSubscriptionWithPrice(priceId);
-  }, "handleSelectPrice");
-  const handlePaymentMethodSuccess = /* @__PURE__ */ __name(async () => {
-    setShowPaymentMethodEditor(false);
-    setHasPaymentMethod(true);
-    if (pendingPriceId) {
-      await createSubscriptionWithPrice(pendingPriceId);
-      setPendingPriceId(null);
+      dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, "handlePaymentMethodSuccess");
-  useEffect6(() => {
-    loadSubscriptions();
+  }, [state.selectedPrice, subscription]);
+  const handlePaymentMethodSuccess = useCallback2(async () => {
+    dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: true });
+    dispatch({ type: "SET_STEP", step: "review" });
+  }, []);
+  const reset = useCallback2(() => {
+    dispatch({ type: "RESET" });
   }, []);
+  const actions = useMemo(
+    () => ({
+      selectPrice,
+      setInterval,
+      goToStep,
+      goToReview,
+      confirmSubscription,
+      handlePaymentMethodSuccess,
+      checkPaymentMethod,
+      reset
+    }),
+    [
+      selectPrice,
+      setInterval,
+      goToStep,
+      goToReview,
+      confirmSubscription,
+      handlePaymentMethodSuccess,
+      checkPaymentMethod,
+      reset
+    ]
+  );
+  return {
+    state,
+    actions
+  };
+}
+__name(useSubscriptionWizard, "useSubscriptionWizard");
+
+// src/features/billing/stripe-subscription/components/wizards/WizardProgressIndicator.tsx
+import { Check as Check3 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+var STEPS = [
+  { key: "plan-selection", label: "Select Plan" },
+  { key: "review", label: "Review" },
+  { key: "payment-method", label: "Payment" }
+];
+function getStepIndex(step) {
+  return STEPS.findIndex((s) => s.key === step);
+}
+__name(getStepIndex, "getStepIndex");
+function WizardProgressIndicator({ currentStep }) {
+  const currentIndex = getStepIndex(currentStep);
+  return /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center gap-x-2 py-4", children: STEPS.map((step, index) => {
+    const isCompleted = index < currentIndex;
+    const isCurrent = index === currentIndex;
+    return /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx26(
+        "div",
+        {
+          className: `flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${isCompleted ? "bg-primary text-primary-foreground" : isCurrent ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
+          children: isCompleted ? /* @__PURE__ */ jsx26(Check3, { className: "h-4 w-4" }) : index + 1
+        }
+      ),
+      /* @__PURE__ */ jsx26(
+        "span",
+        {
+          className: `text-sm ${isCurrent ? "font-medium text-foreground" : "text-muted-foreground"}`,
+          children: step.label
+        }
+      ),
+      index < STEPS.length - 1 && /* @__PURE__ */ jsx26(
+        "div",
+        {
+          className: `h-0.5 w-8 ${index < currentIndex ? "bg-primary" : "bg-muted"}`
+        }
+      )
+    ] }, step.key);
+  }) });
+}
+__name(WizardProgressIndicator, "WizardProgressIndicator");
+
+// src/features/billing/stripe-subscription/components/wizards/WizardStepPlanSelection.tsx
+import { useEffect as useEffect6, useMemo as useMemo2, useState as useState11 } from "react";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+function WizardStepPlanSelection({
+  selectedPrice,
+  selectedInterval,
+  currentPriceId,
+  hideRecurringPrices,
+  onSelectPrice,
+  onIntervalChange,
+  onNext,
+  isProcessing
+}) {
+  const [products, setProducts] = useState11([]);
+  const [loading, setLoading] = useState11(true);
   useEffect6(() => {
-    if (!loading && subscriptions.length === 0) {
-      loadPricingData();
-      checkPaymentMethod();
+    const loadProducts = /* @__PURE__ */ __name(async () => {
+      try {
+        const fetchedProducts = await StripeProductService.listProducts({ active: true });
+        setProducts(fetchedProducts);
+      } catch (error) {
+        console.error("[WizardStepPlanSelection] Failed to load products:", error);
+      } finally {
+        setLoading(false);
+      }
+    }, "loadProducts");
+    loadProducts();
+  }, []);
+  const { hasMonthly, hasYearly } = useMemo2(() => {
+    let hasMonthly2 = false;
+    let hasYearly2 = false;
+    for (const product of products) {
+      for (const price of product.stripePrices || []) {
+        if (price.priceType === "recurring" && price.recurring?.interval === "month") {
+          hasMonthly2 = true;
+        }
+        if (price.priceType === "recurring" && price.recurring?.interval === "year") {
+          hasYearly2 = true;
+        }
+      }
     }
-  }, [loading, subscriptions.length]);
-  const criticalSubscriptions = subscriptions.filter(
-    (sub) => sub.status === "past_due" /* PAST_DUE */ || sub.status === "trialing" /* TRIALING */ && sub.trialEnd && new Date(sub.trialEnd).getTime() - (/* @__PURE__ */ new Date()).getTime() <= 7 * 24 * 60 * 60 * 1e3
-  );
-  if (loading) {
-    return /* @__PURE__ */ jsx22("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx22("p", { className: "text-muted-foreground", children: "Loading subscriptions..." }) });
+    return { hasMonthly: hasMonthly2, hasYearly: hasYearly2 };
+  }, [products]);
+  const handleSelectPrice = /* @__PURE__ */ __name((price) => {
+    onSelectPrice(price);
+  }, "handleSelectPrice");
+  return /* @__PURE__ */ jsxs24("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx27("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx27(
+      IntervalToggle,
+      {
+        value: selectedInterval,
+        onChange: onIntervalChange,
+        hasMonthly,
+        hasYearly
+      }
+    ) }),
+    /* @__PURE__ */ jsx27(
+      ProductPricingList,
+      {
+        products,
+        selectedInterval,
+        currentPriceId,
+        selectedPriceId: selectedPrice?.id,
+        loading,
+        hideRecurringPrices,
+        onSelectPrice: handleSelectPrice
+      }
+    ),
+    /* @__PURE__ */ jsx27("div", { className: "flex justify-end pt-4 border-t", children: /* @__PURE__ */ jsx27(Button, { onClick: onNext, disabled: !selectedPrice || isProcessing, children: isProcessing ? "Loading..." : "Next: Review" }) })
+  ] });
+}
+__name(WizardStepPlanSelection, "WizardStepPlanSelection");
+
+// src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx
+import { AlertCircle } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+function WizardStepReview({
+  selectedPrice,
+  subscription,
+  prorationPreview,
+  hasPaymentMethod,
+  error,
+  isProcessing,
+  onBack,
+  onAddPaymentMethod,
+  onConfirm
+}) {
+  if (!selectedPrice) {
+    return /* @__PURE__ */ jsx28("div", { className: "text-center py-8 text-muted-foreground", children: "No plan selected. Please go back and select a plan." });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-x-3", children: [
-        /* @__PURE__ */ jsx22(CreditCard3, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx22("h1", { className: "text-3xl font-bold", children: "Subscriptions" })
-      ] }),
-      subscriptions.length > 0 && /* @__PURE__ */ jsx22(Button, { onClick: () => setShowCreateSubscription(true), children: "Subscribe to a Plan" })
-    ] }),
-    criticalSubscriptions.map((subscription) => /* @__PURE__ */ jsx22(BillingAlertBanner, { subscription }, subscription.id)),
-    subscriptions.length === 0 && /* @__PURE__ */ jsxs19("div", { className: "space-y-6", children: [
-      (paymentConfirmationState === "confirming" || isConfirming) && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center py-12 space-y-4 bg-muted/50 rounded-lg", children: [
-        /* @__PURE__ */ jsx22(Loader22, { className: "h-8 w-8 animate-spin text-primary" }),
-        /* @__PURE__ */ jsxs19("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx22("p", { className: "font-medium", children: "Processing payment..." }),
-          /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "Please complete any verification if prompted." })
-        ] })
-      ] }),
-      paymentConfirmationState === "success" && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center py-8 space-y-4 bg-green-50 rounded-lg border border-green-200", children: [
-        /* @__PURE__ */ jsx22(CheckCircle2, { className: "h-12 w-12 text-green-500" }),
-        /* @__PURE__ */ jsxs19("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx22("p", { className: "font-medium text-green-600", children: "Payment successful!" }),
-          /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "Your subscription is now active." })
-        ] })
-      ] }),
-      paymentConfirmationState === "error" && /* @__PURE__ */ jsxs19(Alert, { variant: "destructive", children: [
-        /* @__PURE__ */ jsx22(AlertTitle, { children: "Payment Failed" }),
-        /* @__PURE__ */ jsxs19(AlertDescription, { className: "mt-2", children: [
-          /* @__PURE__ */ jsx22("p", { className: "mb-4", children: paymentError || "We couldn't process your payment. Please try again." }),
-          /* @__PURE__ */ jsx22(
-            Button,
-            {
-              onClick: () => {
-                setPaymentConfirmationState("idle");
-                setPaymentError(null);
-              },
-              variant: "outline",
-              children: "Try Again"
-            }
-          )
-        ] })
-      ] }),
-      paymentConfirmationState === "idle" && !isConfirming && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-        /* @__PURE__ */ jsxs19("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx22(CreditCard3, { className: "text-muted-foreground mx-auto h-16 w-16 mb-4" }),
-          /* @__PURE__ */ jsx22("h3", { className: "mb-2 text-xl font-semibold", children: "Choose Your Plan" }),
-          /* @__PURE__ */ jsx22("p", { className: "text-muted-foreground mb-6", children: "Select a subscription plan to get started with our services." })
+  const isChangingPlan = subscription && subscription.price?.id !== selectedPrice.id;
+  const formatInterval2 = /* @__PURE__ */ __name((price) => {
+    if (price.priceType === "one_time") return "one-time";
+    const interval = price.recurring?.interval || "month";
+    return interval === "year" ? "yearly" : "monthly";
+  }, "formatInterval");
+  return /* @__PURE__ */ jsxs25("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs25("div", { className: "bg-muted/50 rounded-lg p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-lg", children: "Selected Plan" }),
+      /* @__PURE__ */ jsxs25("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx28("p", { className: "font-medium", children: selectedPrice.product?.name }),
+          selectedPrice.nickname && /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: selectedPrice.nickname })
         ] }),
-        /* @__PURE__ */ jsx22(
-          PricingCardsGrid,
-          {
-            products,
-            pricesByProduct,
-            loading: loadingPricing,
-            loadingPriceId: creatingSubscription ? pendingPriceId ?? void 0 : void 0,
-            onSelectPrice: handleSelectPrice
-          }
-        )
+        /* @__PURE__ */ jsxs25("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsx28("p", { className: "font-semibold text-lg", children: formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency) }),
+          /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: formatInterval2(selectedPrice) })
+        ] })
       ] })
     ] }),
-    subscriptions.length > 0 && /* @__PURE__ */ jsx22(SubscriptionsList, { subscriptions, onSubscriptionsChange: loadSubscriptions }),
-    showCreateSubscription && /* @__PURE__ */ jsx22(
-      SubscriptionEditor,
-      {
-        open: showCreateSubscription,
-        onOpenChange: setShowCreateSubscription,
-        onSuccess: loadSubscriptions,
-        onAddPaymentMethod: () => {
-          setShowCreateSubscription(false);
-          setShowPaymentMethodEditor(true);
+    isChangingPlan && prorationPreview && /* @__PURE__ */ jsxs25("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2", children: [
+      /* @__PURE__ */ jsx28("h4", { className: "font-medium text-blue-800", children: "Proration Summary" }),
+      /* @__PURE__ */ jsx28("p", { className: "text-sm text-blue-700", children: "Your next charge will be adjusted to account for the plan change." }),
+      /* @__PURE__ */ jsxs25("div", { className: "flex justify-between text-sm", children: [
+        /* @__PURE__ */ jsx28("span", { className: "text-blue-600", children: "Amount due now:" }),
+        /* @__PURE__ */ jsx28("span", { className: "font-medium text-blue-800", children: formatCurrency(prorationPreview.amountDue, prorationPreview.currency) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx28("div", { className: "border rounded-lg p-4", children: /* @__PURE__ */ jsxs25("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs25("div", { children: [
+        /* @__PURE__ */ jsx28("h4", { className: "font-medium", children: "Payment Method" }),
+        /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: hasPaymentMethod ? "A payment method is on file" : "No payment method on file" })
+      ] }),
+      !hasPaymentMethod && /* @__PURE__ */ jsx28(Button, { variant: "outline", onClick: onAddPaymentMethod, children: "Add Payment Method" })
+    ] }) }),
+    error && /* @__PURE__ */ jsxs25(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx28(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx28(AlertDescription, { children: error })
+    ] }),
+    /* @__PURE__ */ jsxs25("div", { className: "flex justify-between pt-4 border-t", children: [
+      /* @__PURE__ */ jsx28(Button, { variant: "outline", onClick: onBack, disabled: isProcessing, children: "Back" }),
+      /* @__PURE__ */ jsx28(
+        Button,
+        {
+          onClick: hasPaymentMethod ? onConfirm : onAddPaymentMethod,
+          disabled: isProcessing,
+          children: isProcessing ? "Processing..." : hasPaymentMethod ? isChangingPlan ? "Confirm Plan Change" : "Subscribe Now" : "Add Payment Method"
         }
+      )
+    ] })
+  ] });
+}
+__name(WizardStepReview, "WizardStepReview");
+
+// src/features/billing/stripe-subscription/components/wizards/WizardStepPaymentMethod.tsx
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+function WizardStepPaymentMethod({
+  onBack,
+  onSuccess,
+  isProcessing
+}) {
+  return /* @__PURE__ */ jsxs26("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx29("h3", { className: "font-semibold text-lg", children: "Add Payment Method" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: "Enter your card details to complete your subscription" })
+    ] }),
+    /* @__PURE__ */ jsx29(
+      PaymentMethodForm,
+      {
+        onSuccess,
+        onCancel: onBack,
+        isLoading: isProcessing
+      }
+    )
+  ] });
+}
+__name(WizardStepPaymentMethod, "WizardStepPaymentMethod");
+
+// src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+function SubscriptionWizard({
+  open,
+  onOpenChange,
+  onSuccess,
+  hasActiveRecurringSubscription,
+  subscription
+}) {
+  const handleClose = useCallback3(() => onOpenChange(false), [onOpenChange]);
+  const { state, actions } = useSubscriptionWizard({
+    subscription,
+    onSuccess,
+    onClose: handleClose
+  });
+  const hasCheckedRef = useRef2(false);
+  useEffect7(() => {
+    if (open && !hasCheckedRef.current) {
+      hasCheckedRef.current = true;
+      actions.checkPaymentMethod();
+    }
+    if (!open) {
+      hasCheckedRef.current = false;
+    }
+  }, [open, actions.checkPaymentMethod]);
+  useEffect7(() => {
+    if (!open) {
+      actions.reset();
+    }
+  }, [open, actions.reset]);
+  const dialogTitle = subscription ? "Change Subscription Plan" : "Subscribe to a Plan";
+  const dialogDescription = subscription ? "Select a new plan for your subscription" : "Choose a subscription plan to get started";
+  return /* @__PURE__ */ jsx30(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs27(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs27(DialogHeader, { children: [
+      /* @__PURE__ */ jsx30(DialogTitle, { children: dialogTitle }),
+      /* @__PURE__ */ jsx30(DialogDescription, { children: dialogDescription })
+    ] }),
+    /* @__PURE__ */ jsx30(WizardProgressIndicator, { currentStep: state.step }),
+    state.step === "plan-selection" && /* @__PURE__ */ jsx30(
+      WizardStepPlanSelection,
+      {
+        selectedPrice: state.selectedPrice,
+        selectedInterval: state.selectedInterval,
+        currentPriceId: subscription?.price?.id,
+        hideRecurringPrices: hasActiveRecurringSubscription && !subscription,
+        onSelectPrice: actions.selectPrice,
+        onIntervalChange: actions.setInterval,
+        onNext: actions.goToReview,
+        isProcessing: state.isProcessing
       }
     ),
-    showPaymentMethodEditor && /* @__PURE__ */ jsx22(
-      PaymentMethodEditor,
+    state.step === "review" && /* @__PURE__ */ jsx30(
+      WizardStepReview,
       {
-        open: showPaymentMethodEditor,
-        onOpenChange: (open) => {
-          setShowPaymentMethodEditor(open);
-          if (!open) {
-            setPendingPriceId(null);
-          }
-        },
-        onSuccess: handlePaymentMethodSuccess
+        selectedPrice: state.selectedPrice,
+        subscription,
+        prorationPreview: state.prorationPreview,
+        hasPaymentMethod: state.hasPaymentMethod,
+        error: state.error,
+        isProcessing: state.isProcessing,
+        onBack: () => actions.goToStep("plan-selection"),
+        onAddPaymentMethod: () => actions.goToStep("payment-method"),
+        onConfirm: actions.confirmSubscription
+      }
+    ),
+    state.step === "payment-method" && /* @__PURE__ */ jsx30(
+      WizardStepPaymentMethod,
+      {
+        onBack: () => actions.goToStep("review"),
+        onSuccess: actions.handlePaymentMethodSuccess,
+        isProcessing: state.isProcessing
       }
     )
-  ] });
+  ] }) });
 }
-__name(SubscriptionsContainer, "SubscriptionsContainer");
+__name(SubscriptionWizard, "SubscriptionWizard");
 
 // src/features/billing/stripe-usage/components/containers/UsageContainer.tsx
 import { Activity as Activity3 } from "lucide-react";
-import { useEffect as useEffect7, useState as useState13 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 
 // src/features/billing/stripe-usage/components/details/UsageSummaryCard.tsx
 import { Activity as Activity2 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 function getProgressColor(percentage) {
   if (percentage === null) return "bg-blue-500";
   if (percentage >= 90) return "bg-red-500";
@@ -2155,31 +2264,31 @@ function UsageSummaryCard({ meter, summary }) {
   const progressWidth = percentage !== null ? Math.min(percentage, 100) : 0;
   const displayName = meter.displayName || meter.eventName;
   const hasLimit = limit !== null && limit !== void 0;
-  return /* @__PURE__ */ jsxs20(Card, { children: [
-    /* @__PURE__ */ jsxs20(CardHeader, { className: "flex flex-row items-center gap-x-3 pb-3", children: [
-      /* @__PURE__ */ jsx23("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600", children: /* @__PURE__ */ jsx23(Activity2, { className: "h-5 w-5" }) }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx23("h3", { className: "font-semibold", children: displayName }),
-        /* @__PURE__ */ jsx23("p", { className: "text-xs text-gray-500", children: meter.id })
+  return /* @__PURE__ */ jsxs28(Card, { children: [
+    /* @__PURE__ */ jsxs28(CardHeader, { className: "flex flex-row items-center gap-x-3 pb-3", children: [
+      /* @__PURE__ */ jsx31("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600", children: /* @__PURE__ */ jsx31(Activity2, { className: "h-5 w-5" }) }),
+      /* @__PURE__ */ jsxs28("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx31("h3", { className: "font-semibold", children: displayName }),
+        /* @__PURE__ */ jsx31("p", { className: "text-xs text-gray-500", children: meter.id })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs20(CardContent, { className: "flex flex-col gap-y-4", children: [
-      /* @__PURE__ */ jsxs20("div", { children: [
-        /* @__PURE__ */ jsx23("p", { className: "text-3xl font-bold", children: currentUsage.toLocaleString() }),
-        hasLimit && /* @__PURE__ */ jsxs20("p", { className: "text-sm text-gray-500", children: [
+    /* @__PURE__ */ jsxs28(CardContent, { className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsx31("p", { className: "text-3xl font-bold", children: currentUsage.toLocaleString() }),
+        hasLimit && /* @__PURE__ */ jsxs28("p", { className: "text-sm text-gray-500", children: [
           "of ",
           limit.toLocaleString(),
           " used"
         ] })
       ] }),
-      hasLimit ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-y-2", children: [
-        /* @__PURE__ */ jsx23("div", { className: "h-2 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ jsx23("div", { className: `h-full transition-all ${progressColor}`, style: { width: `${progressWidth}%` } }) }),
-        /* @__PURE__ */ jsxs20("p", { className: "text-sm text-gray-500", children: [
+      hasLimit ? /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-y-2", children: [
+        /* @__PURE__ */ jsx31("div", { className: "h-2 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ jsx31("div", { className: `h-full transition-all ${progressColor}`, style: { width: `${progressWidth}%` } }) }),
+        /* @__PURE__ */ jsxs28("p", { className: "text-sm text-gray-500", children: [
           percentage?.toFixed(1),
           "% used"
         ] })
-      ] }) : /* @__PURE__ */ jsx23("p", { className: "text-sm text-gray-500", children: "No limit set" }),
-      summary && summary.start && summary.end && /* @__PURE__ */ jsx23("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs20("p", { className: "text-xs text-gray-500", children: [
+      ] }) : /* @__PURE__ */ jsx31("p", { className: "text-sm text-gray-500", children: "No limit set" }),
+      summary && summary.start && summary.end && /* @__PURE__ */ jsx31("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs28("p", { className: "text-xs text-gray-500", children: [
         "Period: ",
         formatDate4(summary.start),
         " - ",
@@ -2191,20 +2300,20 @@ function UsageSummaryCard({ meter, summary }) {
 __name(UsageSummaryCard, "UsageSummaryCard");
 
 // src/features/billing/stripe-usage/components/widgets/UsageSummaryCards.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function UsageSummaryCards({ meters, summaries }) {
-  return /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: meters.map((meter) => /* @__PURE__ */ jsx24(UsageSummaryCard, { meter, summary: summaries[meter.id] || null }, meter.id)) });
+  return /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: meters.map((meter) => /* @__PURE__ */ jsx32(UsageSummaryCard, { meter, summary: summaries[meter.id] || null }, meter.id)) });
 }
 __name(UsageSummaryCards, "UsageSummaryCards");
 
 // src/features/billing/stripe-usage/components/containers/UsageContainer.tsx
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function UsageContainer() {
-  const [meters, setMeters] = useState13([]);
-  const [summaries, setSummaries] = useState13({});
-  const [loading, setLoading] = useState13(true);
-  const [subscriptions, setSubscriptions] = useState13([]);
-  useEffect7(() => {
+  const [meters, setMeters] = useState12([]);
+  const [summaries, setSummaries] = useState12({});
+  const [loading, setLoading] = useState12(true);
+  const [subscriptions, setSubscriptions] = useState12([]);
+  useEffect8(() => {
     loadUsageData();
   }, []);
   const loadUsageData = /* @__PURE__ */ __name(async () => {
@@ -2248,27 +2357,27 @@ function UsageContainer() {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx25("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "Loading usage data..." }) });
+    return /* @__PURE__ */ jsx33("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx33("p", { className: "text-muted-foreground", children: "Loading usage data..." }) });
   }
-  return /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx25(Activity3, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx25("h1", { className: "text-3xl font-bold", children: "Usage Tracking" })
+  return /* @__PURE__ */ jsxs29("div", { className: "flex w-full flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx33(Activity3, { className: "h-8 w-8" }),
+      /* @__PURE__ */ jsx33("h1", { className: "text-3xl font-bold", children: "Usage Tracking" })
     ] }),
-    meters.length === 0 && /* @__PURE__ */ jsxs21("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12", children: [
-      /* @__PURE__ */ jsx25(Activity3, { className: "text-muted-foreground h-16 w-16" }),
-      /* @__PURE__ */ jsxs21("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx25("h3", { className: "mb-2 text-xl font-semibold", children: "No usage meters configured" }),
-        /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "Usage tracking will appear here when you have metered subscriptions with configured meters." })
+    meters.length === 0 && /* @__PURE__ */ jsxs29("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12", children: [
+      /* @__PURE__ */ jsx33(Activity3, { className: "text-muted-foreground h-16 w-16" }),
+      /* @__PURE__ */ jsxs29("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx33("h3", { className: "mb-2 text-xl font-semibold", children: "No usage meters configured" }),
+        /* @__PURE__ */ jsx33("p", { className: "text-muted-foreground", children: "Usage tracking will appear here when you have metered subscriptions with configured meters." })
       ] })
     ] }),
-    meters.length > 0 && /* @__PURE__ */ jsx25(UsageSummaryCards, { meters, summaries })
+    meters.length > 0 && /* @__PURE__ */ jsx33(UsageSummaryCards, { meters, summaries })
   ] });
 }
 __name(UsageContainer, "UsageContainer");
 
 // src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 function formatDateTime(date) {
   if (!date) return "N/A";
   const dateObj = typeof date === "string" ? new Date(date) : date;
@@ -2287,25 +2396,25 @@ function formatDateTime(date) {
 __name(formatDateTime, "formatDateTime");
 function UsageHistoryTable({ usageRecords }) {
   if (usageRecords.length === 0) {
-    return /* @__PURE__ */ jsx26("div", { className: "rounded-lg border p-8 text-center", children: /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground", children: "No usage history available." }) });
+    return /* @__PURE__ */ jsx34("div", { className: "rounded-lg border p-8 text-center", children: /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground", children: "No usage history available." }) });
   }
-  return /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-y-4", children: [
-    /* @__PURE__ */ jsx26("h2", { className: "text-xl font-semibold", children: "Usage History" }),
-    /* @__PURE__ */ jsx26("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs22(Table, { children: [
-      /* @__PURE__ */ jsx26(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs22(TableRow, { children: [
-        /* @__PURE__ */ jsx26(TableHead, { children: "Date & Time" }),
-        /* @__PURE__ */ jsx26(TableHead, { children: "Meter Event" }),
-        /* @__PURE__ */ jsx26(TableHead, { className: "text-right", children: "Quantity" }),
-        /* @__PURE__ */ jsx26(TableHead, { children: "Event ID" })
+  return /* @__PURE__ */ jsxs30("div", { className: "flex w-full flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsx34("h2", { className: "text-xl font-semibold", children: "Usage History" }),
+    /* @__PURE__ */ jsx34("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs30(Table, { children: [
+      /* @__PURE__ */ jsx34(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxs30(TableRow, { children: [
+        /* @__PURE__ */ jsx34(TableHead, { children: "Date & Time" }),
+        /* @__PURE__ */ jsx34(TableHead, { children: "Meter Event" }),
+        /* @__PURE__ */ jsx34(TableHead, { className: "text-right", children: "Quantity" }),
+        /* @__PURE__ */ jsx34(TableHead, { children: "Event ID" })
       ] }) }),
-      /* @__PURE__ */ jsx26(TableBody, { children: usageRecords.map((record) => {
+      /* @__PURE__ */ jsx34(TableBody, { children: usageRecords.map((record) => {
         const dateTime = formatDateTime(record.timestamp);
         const quantity = record.quantity.toLocaleString();
-        return /* @__PURE__ */ jsxs22(TableRow, { children: [
-          /* @__PURE__ */ jsx26(TableCell, { className: "font-medium", children: dateTime }),
-          /* @__PURE__ */ jsx26(TableCell, { className: "text-muted-foreground", children: record.meterEventName }),
-          /* @__PURE__ */ jsx26(TableCell, { className: "text-right font-medium", children: quantity }),
-          /* @__PURE__ */ jsx26(TableCell, { className: "text-muted-foreground text-sm font-mono", children: record.stripeEventId })
+        return /* @__PURE__ */ jsxs30(TableRow, { children: [
+          /* @__PURE__ */ jsx34(TableCell, { className: "font-medium", children: dateTime }),
+          /* @__PURE__ */ jsx34(TableCell, { className: "text-muted-foreground", children: record.meterEventName }),
+          /* @__PURE__ */ jsx34(TableCell, { className: "text-right font-medium", children: quantity }),
+          /* @__PURE__ */ jsx34(TableCell, { className: "text-muted-foreground text-sm font-mono", children: record.stripeEventId })
         ] }, record.id);
       }) })
     ] }) })
@@ -2314,7 +2423,7 @@ function UsageHistoryTable({ usageRecords }) {
 __name(UsageHistoryTable, "UsageHistoryTable");
 
 // src/features/billing/components/modals/BillingDetailModal.tsx
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
 function BillingDetailModal({
   open,
   onOpenChange,
@@ -2322,25 +2431,25 @@ function BillingDetailModal({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx27(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs23(DialogContent, { className: className ?? "max-w-4xl max-h-[90vh] overflow-y-auto", children: [
-    /* @__PURE__ */ jsx27(DialogHeader, { children: /* @__PURE__ */ jsx27(DialogTitle, { children: title }) }),
+  return /* @__PURE__ */ jsx35(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs31(DialogContent, { className: className ?? "max-w-4xl max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ jsx35(DialogHeader, { children: /* @__PURE__ */ jsx35(DialogTitle, { children: title }) }),
     children
   ] }) });
 }
 __name(BillingDetailModal, "BillingDetailModal");
 
 // src/features/billing/components/widgets/BillingAlertBanner.tsx
-import { AlertCircle } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { AlertCircle as AlertCircle2 } from "lucide-react";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
   if (subscription.status === "past_due" /* PAST_DUE */) {
-    return /* @__PURE__ */ jsxs24("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-x-3", children: [
-      /* @__PURE__ */ jsx28(AlertCircle, { className: "h-5 w-5 text-red-600 mt-0.5" }),
-      /* @__PURE__ */ jsxs24("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-red-900", children: "Payment Failed" }),
-        /* @__PURE__ */ jsx28("p", { className: "text-sm text-red-700 mt-1", children: "Your last payment failed. Please update your payment method to avoid service interruption." })
+    return /* @__PURE__ */ jsxs32("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-x-3", children: [
+      /* @__PURE__ */ jsx36(AlertCircle2, { className: "h-5 w-5 text-red-600 mt-0.5" }),
+      /* @__PURE__ */ jsxs32("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx36("h3", { className: "font-semibold text-red-900", children: "Payment Failed" }),
+        /* @__PURE__ */ jsx36("p", { className: "text-sm text-red-700 mt-1", children: "Your last payment failed. Please update your payment method to avoid service interruption." })
       ] }),
-      onUpdatePayment && /* @__PURE__ */ jsx28(Button, { variant: "outline", size: "sm", onClick: onUpdatePayment, className: "border-red-300 text-red-700", children: "Update Payment Method" })
+      onUpdatePayment && /* @__PURE__ */ jsx36(Button, { variant: "outline", size: "sm", onClick: onUpdatePayment, className: "border-red-300 text-red-700", children: "Update Payment Method" })
     ] });
   }
   if (subscription.status === "trialing" /* TRIALING */ && subscription.trialEnd) {
@@ -2348,11 +2457,11 @@ function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
     const now = /* @__PURE__ */ new Date();
     const daysRemaining = Math.ceil((trialEnd.getTime() - now.getTime()) / (1e3 * 60 * 60 * 24));
     if (daysRemaining <= 7) {
-      return /* @__PURE__ */ jsxs24("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-x-3", children: [
-        /* @__PURE__ */ jsx28(AlertCircle, { className: "h-5 w-5 text-yellow-600 mt-0.5" }),
-        /* @__PURE__ */ jsxs24("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-yellow-900", children: "Trial Ending Soon" }),
-          /* @__PURE__ */ jsxs24("p", { className: "text-sm text-yellow-700 mt-1", children: [
+      return /* @__PURE__ */ jsxs32("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-x-3", children: [
+        /* @__PURE__ */ jsx36(AlertCircle2, { className: "h-5 w-5 text-yellow-600 mt-0.5" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx36("h3", { className: "font-semibold text-yellow-900", children: "Trial Ending Soon" }),
+          /* @__PURE__ */ jsxs32("p", { className: "text-sm text-yellow-700 mt-1", children: [
             "Your trial ends in ",
             daysRemaining,
             " ",
@@ -2360,7 +2469,7 @@ function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
             ". Add a payment method to continue your subscription."
           ] })
         ] }),
-        onAddPayment && /* @__PURE__ */ jsx28(Button, { variant: "outline", size: "sm", onClick: onAddPayment, className: "border-yellow-300 text-yellow-700", children: "Add Payment Method" })
+        onAddPayment && /* @__PURE__ */ jsx36(Button, { variant: "outline", size: "sm", onClick: onAddPayment, className: "border-yellow-300 text-yellow-700", children: "Add Payment Method" })
       ] });
     }
   }
@@ -2369,9 +2478,9 @@ function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment }) {
 __name(BillingAlertBanner, "BillingAlertBanner");
 
 // src/features/billing/components/containers/BillingDashboardContainer.tsx
-import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function BillingDashboardContainer() {
-  const [data, setData] = useState14({
+  const [data, setData] = useState13({
     customer: null,
     subscriptions: [],
     paymentMethods: [],
@@ -2379,27 +2488,35 @@ function BillingDashboardContainer() {
     meters: [],
     meterSummaries: {}
   });
-  const [loading, setLoading] = useState14({
+  const [loading, setLoading] = useState13({
     customer: true,
     subscriptions: true,
     paymentMethods: true,
     invoices: true,
     usage: true
   });
-  const [errors, setErrors] = useState14({
+  const [errors, setErrors] = useState13({
     customer: null,
     subscriptions: null,
     paymentMethods: null,
     invoices: null,
     usage: null
   });
-  const [activeModal, setActiveModal] = useState14(null);
-  const [noCustomerExists, setNoCustomerExists] = useState14(false);
-  const [creatingCustomer, setCreatingCustomer] = useState14(false);
-  const hasMeteredSubscriptions = useCallback2(() => {
+  const [activeModal, setActiveModal] = useState13(null);
+  const [noCustomerExists, setNoCustomerExists] = useState13(false);
+  const [creatingCustomer, setCreatingCustomer] = useState13(false);
+  const searchParams = useSearchParams();
+  const [showWizard, setShowWizard] = useState13(false);
+  const [editingSubscription, setEditingSubscription] = useState13(null);
+  const hasMeteredSubscriptions = useCallback4(() => {
     return data.subscriptions.some((sub) => sub.price?.recurring?.usageType === "metered");
   }, [data.subscriptions]);
-  const fetchAllData = useCallback2(async () => {
+  const hasActiveRecurringSubscription = useMemo3(() => {
+    return data.subscriptions.some(
+      (sub) => (sub.status === "active" /* ACTIVE */ || sub.status === "trialing" /* TRIALING */) && sub.price?.priceType === "recurring"
+    );
+  }, [data.subscriptions]);
+  const fetchAllData = useCallback4(async () => {
     setNoCustomerExists(false);
     let customer = null;
     try {
@@ -2518,7 +2635,7 @@ function BillingDashboardContainer() {
       setLoading((prev) => ({ ...prev, usage: false }));
     }
   }, "fetchUsageData");
-  const refreshData = useCallback2(async () => {
+  const refreshData = useCallback4(async () => {
     setLoading({
       customer: true,
       subscriptions: true,
@@ -2528,9 +2645,25 @@ function BillingDashboardContainer() {
     });
     await fetchAllData();
   }, [fetchAllData]);
-  useEffect8(() => {
+  const handleOpenWizard = useCallback4((subscription) => {
+    setEditingSubscription(subscription || null);
+    setShowWizard(true);
+  }, []);
+  const handleWizardClose = useCallback4(() => {
+    setShowWizard(false);
+    setEditingSubscription(null);
+    refreshData();
+  }, [refreshData]);
+  useEffect9(() => {
     fetchAllData();
   }, [fetchAllData]);
+  useEffect9(() => {
+    const action = searchParams.get("action");
+    if (action === "subscribe") {
+      setShowWizard(true);
+      window.history.replaceState({}, "", window.location.pathname);
+    }
+  }, [searchParams]);
   const criticalSubscriptions = data.subscriptions.filter(
     (sub) => sub.status === "past_due" /* PAST_DUE */ || sub.status === "trialing" /* TRIALING */ && sub.trialEnd && new Date(sub.trialEnd).getTime() - (/* @__PURE__ */ new Date()).getTime() <= 7 * 24 * 60 * 60 * 1e3
   );
@@ -2555,26 +2688,26 @@ function BillingDashboardContainer() {
     }
   }, "getModalTitle");
   const isInitialLoading = loading.customer && !noCustomerExists && !data.customer;
-  return /* @__PURE__ */ jsxs25("div", { className: "flex w-full flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx29(Wallet2, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx29("h1", { className: "text-3xl font-bold", children: "Billing" })
+  return /* @__PURE__ */ jsxs33("div", { className: "flex w-full flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx37(Wallet2, { className: "h-8 w-8" }),
+      /* @__PURE__ */ jsx37("h1", { className: "text-3xl font-bold", children: "Billing" })
     ] }),
-    isInitialLoading && /* @__PURE__ */ jsx29(Card, { children: /* @__PURE__ */ jsx29(CardContent, { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx29(Loader23, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) }),
-    noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs25(Card, { children: [
-      /* @__PURE__ */ jsxs25(CardHeader, { className: "text-center", children: [
-        /* @__PURE__ */ jsx29("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx29(CreditCard4, { className: "h-8 w-8 text-primary" }) }),
-        /* @__PURE__ */ jsx29(CardTitle, { children: "Set Up Billing" }),
-        /* @__PURE__ */ jsx29(CardDescription, { children: "Your company doesn't have a billing account yet. Set one up to manage subscriptions, payment methods, and view invoices." })
+    isInitialLoading && /* @__PURE__ */ jsx37(Card, { children: /* @__PURE__ */ jsx37(CardContent, { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx37(Loader22, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) }),
+    noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs33(Card, { children: [
+      /* @__PURE__ */ jsxs33(CardHeader, { className: "text-center", children: [
+        /* @__PURE__ */ jsx37("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx37(CreditCard4, { className: "h-8 w-8 text-primary" }) }),
+        /* @__PURE__ */ jsx37(CardTitle, { children: "Set Up Billing" }),
+        /* @__PURE__ */ jsx37(CardDescription, { children: "Your company doesn't have a billing account yet. Set one up to manage subscriptions, payment methods, and view invoices." })
       ] }),
-      /* @__PURE__ */ jsx29(CardContent, { className: "flex justify-center pb-8", children: /* @__PURE__ */ jsx29(Button, { onClick: handleCreateCustomer, disabled: creatingCustomer, size: "lg", children: creatingCustomer ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
-        /* @__PURE__ */ jsx29(Loader23, { className: "mr-2 h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ jsx37(CardContent, { className: "flex justify-center pb-8", children: /* @__PURE__ */ jsx37(Button, { onClick: handleCreateCustomer, disabled: creatingCustomer, size: "lg", children: creatingCustomer ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
+        /* @__PURE__ */ jsx37(Loader22, { className: "mr-2 h-4 w-4 animate-spin" }),
         "Setting up..."
       ] }) : "Set Up Billing Account" }) }),
-      errors.customer && /* @__PURE__ */ jsx29(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsx29("p", { className: "text-center text-sm text-destructive", children: errors.customer }) })
+      errors.customer && /* @__PURE__ */ jsx37(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsx37("p", { className: "text-center text-sm text-destructive", children: errors.customer }) })
     ] }),
-    !noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs25(Fragment6, { children: [
-      criticalSubscriptions.map((subscription) => /* @__PURE__ */ jsx29(
+    !noCustomerExists && !isInitialLoading && /* @__PURE__ */ jsxs33(Fragment6, { children: [
+      criticalSubscriptions.map((subscription) => /* @__PURE__ */ jsx37(
         BillingAlertBanner,
         {
           subscription,
@@ -2583,17 +2716,23 @@ function BillingDashboardContainer() {
         },
         subscription.id
       )),
-      /* @__PURE__ */ jsxs25("div", { className: "grid gap-4 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsxs33("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx37(
           SubscriptionSummaryCard,
           {
             subscriptions: data.subscriptions,
             loading: loading.subscriptions,
             error: errors.subscriptions || void 0,
-            onManageClick: () => setActiveModal("subscriptions")
+            onManageClick: () => {
+              if (data.subscriptions.length === 0) {
+                setShowWizard(true);
+              } else {
+                setActiveModal("subscriptions");
+              }
+            }
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx37(
           PaymentMethodSummaryCard,
           {
             paymentMethods: data.paymentMethods,
@@ -2603,7 +2742,7 @@ function BillingDashboardContainer() {
             onManageClick: () => setActiveModal("payment-methods")
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx37(
           CustomerInfoCard,
           {
             customer: data.customer,
@@ -2611,7 +2750,7 @@ function BillingDashboardContainer() {
             error: errors.customer || void 0
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx37(
           InvoicesSummaryCard,
           {
             invoices: data.invoices,
@@ -2620,7 +2759,7 @@ function BillingDashboardContainer() {
             onViewAllClick: () => setActiveModal("invoices")
           }
         ),
-        hasMeteredSubscriptions() && /* @__PURE__ */ jsx29(
+        hasMeteredSubscriptions() && /* @__PURE__ */ jsx37(
           BillingUsageSummaryCard,
           {
             meters: data.meters,
@@ -2631,40 +2770,50 @@ function BillingDashboardContainer() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx37(
         BillingDetailModal,
         {
           open: activeModal === "subscriptions",
           onOpenChange: handleModalClose,
           title: getModalTitle("subscriptions"),
-          children: /* @__PURE__ */ jsx29(SubscriptionsContainer, {})
+          children: /* @__PURE__ */ jsx37(SubscriptionsContainer, { onOpenWizard: handleOpenWizard })
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx37(
         BillingDetailModal,
         {
           open: activeModal === "payment-methods",
           onOpenChange: handleModalClose,
           title: getModalTitle("payment-methods"),
-          children: /* @__PURE__ */ jsx29(PaymentMethodsContainer, {})
+          children: /* @__PURE__ */ jsx37(PaymentMethodsContainer, {})
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx37(
         BillingDetailModal,
         {
           open: activeModal === "invoices",
           onOpenChange: handleModalClose,
           title: getModalTitle("invoices"),
-          children: /* @__PURE__ */ jsx29(InvoicesContainer, {})
+          children: /* @__PURE__ */ jsx37(InvoicesContainer, {})
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx37(
         BillingDetailModal,
         {
           open: activeModal === "usage",
           onOpenChange: handleModalClose,
           title: getModalTitle("usage"),
-          children: /* @__PURE__ */ jsx29(UsageContainer, {})
+          children: /* @__PURE__ */ jsx37(UsageContainer, {})
+        }
+      ),
+      /* @__PURE__ */ jsx37(
+        SubscriptionWizard,
+        {
+          open: showWizard,
+          onOpenChange: (open) => !open && handleWizardClose(),
+          onSuccess: refreshData,
+          hasActiveRecurringSubscription,
+          subscription: editingSubscription ?? void 0
         }
       )
     ] })
@@ -2675,8 +2824,8 @@ __name(BillingDashboardContainer, "BillingDashboardContainer");
 // src/features/billing/components/providers/StripeProvider.tsx
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
-import { useMemo } from "react";
-import { Fragment as Fragment7, jsx as jsx30 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { Fragment as Fragment7, jsx as jsx38 } from "react/jsx-runtime";
 var stripePromiseCache = null;
 function getStripePromise(publishableKey) {
   if (!publishableKey) {
@@ -2692,12 +2841,12 @@ function getStripePromise(publishableKey) {
 __name(getStripePromise, "getStripePromise");
 function StripeProvider({ children }) {
   const publishableKey = getStripePublishableKey();
-  const stripePromise = useMemo(() => getStripePromise(publishableKey), [publishableKey]);
-  const options = useMemo(() => ({}), []);
+  const stripePromise = useMemo4(() => getStripePromise(publishableKey), [publishableKey]);
+  const options = useMemo4(() => ({}), []);
   if (!publishableKey) {
-    return /* @__PURE__ */ jsx30(Fragment7, { children });
+    return /* @__PURE__ */ jsx38(Fragment7, { children });
   }
-  return /* @__PURE__ */ jsx30(Elements, { stripe: stripePromise, options, children });
+  return /* @__PURE__ */ jsx38(Elements, { stripe: stripePromise, options, children });
 }
 __name(StripeProvider, "StripeProvider");
 function isStripeConfigured() {
@@ -2707,14 +2856,14 @@ __name(isStripeConfigured, "isStripeConfigured");
 
 // src/features/billing/stripe-price/components/forms/PriceEditor.tsx
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
-import { AlertCircle as AlertCircle2, PlusIcon, XIcon } from "lucide-react";
-import { useState as useState15 } from "react";
+import { AlertCircle as AlertCircle3, PlusIcon, XIcon } from "lucide-react";
+import { useEffect as useEffect10, useState as useState14 } from "react";
 import { useForm as useForm2 } from "react-hook-form";
-import { v4 as v43 } from "uuid";
+import { v4 } from "uuid";
 import { z as z2 } from "zod";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
-  const [isSubmitting, setIsSubmitting] = useState15(false);
+  const [isSubmitting, setIsSubmitting] = useState14(false);
   const formSchema2 = z2.object({
     unitAmount: z2.preprocess(
       (val) => typeof val === "string" ? parseFloat(val) : val,
@@ -2730,7 +2879,8 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
     nickname: z2.string().optional(),
     active: z2.boolean(),
     description: z2.string().optional(),
-    features: z2.array(z2.string())
+    features: z2.array(z2.string()),
+    token: z2.string()
   });
   const isEditMode = !!price;
   const defaultUnitAmount = price?.unitAmount ? price.unitAmount / 100 : 0;
@@ -2745,9 +2895,26 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
       nickname: price?.nickname || "",
       active: price?.active ?? true,
       description: price?.description || "",
-      features: price?.features || []
+      features: price?.features || [],
+      token: price?.token?.toString() ?? ""
     }
   });
+  useEffect10(() => {
+    if (open) {
+      form.reset({
+        unitAmount: price?.unitAmount ? price.unitAmount / 100 : 0,
+        currency: price?.currency || "usd",
+        interval: price?.priceType === "one_time" ? "one_time" : price?.recurring?.interval || "month",
+        intervalCount: price?.recurring?.intervalCount || 1,
+        usageType: price?.recurring?.usageType || "licensed",
+        nickname: price?.nickname || "",
+        active: price?.active ?? true,
+        description: price?.description || "",
+        features: price?.features || [],
+        token: price?.token?.toString() ?? ""
+      });
+    }
+  }, [open, price?.id]);
   const watchInterval = form.watch("interval");
   const isRecurring = watchInterval !== "one_time";
   const onSubmit = /* @__PURE__ */ __name(async (values) => {
@@ -2759,11 +2926,12 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
           id: price.id,
           nickname: values.nickname || void 0,
           description: values.description || void 0,
-          features: values.features.filter((f) => f.trim()) || void 0
+          features: values.features.filter((f) => f.trim()) || void 0,
+          token: values.token ? parseInt(values.token, 10) : void 0
         });
       } else {
         const createInput = {
-          id: v43(),
+          id: v4(),
           productId,
           currency: values.currency,
           unitAmount: unitAmountInCents
@@ -2785,6 +2953,9 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
         if (filteredFeatures.length > 0) {
           createInput.features = filteredFeatures;
         }
+        if (values.token) {
+          createInput.token = parseInt(values.token, 10);
+        }
         await StripePriceService.createPrice(createInput);
       }
       onSuccess();
@@ -2811,21 +2982,21 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
     { id: "licensed", text: "Licensed (per unit)" },
     { id: "metered", text: "Metered (usage-based)" }
   ];
-  return /* @__PURE__ */ jsx31(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs26(DialogContent, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ jsxs26(DialogHeader, { children: [
-      /* @__PURE__ */ jsx31(DialogTitle, { children: isEditMode ? "Edit Price" : "Create Price" }),
-      /* @__PURE__ */ jsx31(DialogDescription, { children: isEditMode ? "Update the price details. Note: Only nickname and active status can be changed." : "Create a new price for this product" })
+  return /* @__PURE__ */ jsx39(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs34(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs34(DialogHeader, { children: [
+      /* @__PURE__ */ jsx39(DialogTitle, { children: isEditMode ? "Edit Price" : "Create Price" }),
+      /* @__PURE__ */ jsx39(DialogDescription, { children: isEditMode ? "Update the price details. Note: Only nickname and active status can be changed." : "Create a new price for this product" })
     ] }),
-    isEditMode && /* @__PURE__ */ jsxs26("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 flex gap-x-3", children: [
-      /* @__PURE__ */ jsx31(AlertCircle2, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
-      /* @__PURE__ */ jsxs26("div", { className: "text-sm text-blue-800", children: [
-        /* @__PURE__ */ jsx31("p", { className: "font-semibold mb-1", children: "Stripe Price Immutability" }),
-        /* @__PURE__ */ jsx31("p", { children: "Due to Stripe's architecture, only the nickname and active status can be modified after creation. To change amount, currency, or billing interval, create a new price." })
+    isEditMode && /* @__PURE__ */ jsxs34("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 flex gap-x-3", children: [
+      /* @__PURE__ */ jsx39(AlertCircle3, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs34("div", { className: "text-sm text-blue-800", children: [
+        /* @__PURE__ */ jsx39("p", { className: "font-semibold mb-1", children: "Stripe Price Immutability" }),
+        /* @__PURE__ */ jsx39("p", { children: "Due to Stripe's architecture, only the nickname and active status can be modified after creation. To change amount, currency, or billing interval, create a new price." })
       ] })
     ] }),
-    /* @__PURE__ */ jsx31(Form, { ...form, children: /* @__PURE__ */ jsxs26("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "grid grid-cols-2 gap-x-4", children: [
-        /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx39(Form, { ...form, children: /* @__PURE__ */ jsxs34("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-2 gap-x-4", children: [
+        /* @__PURE__ */ jsx39(
           FormInput,
           {
             form,
@@ -2836,9 +3007,9 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
             isRequired: true
           }
         ),
-        /* @__PURE__ */ jsx31(FormSelect, { form, id: "currency", name: "Currency", values: currencyOptions, disabled: isEditMode })
+        /* @__PURE__ */ jsx39(FormSelect, { form, id: "currency", name: "Currency", values: currencyOptions, disabled: isEditMode })
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx39(
         FormSelect,
         {
           form,
@@ -2848,8 +3019,8 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
           disabled: isEditMode
         }
       ),
-      isRecurring && /* @__PURE__ */ jsxs26("div", { className: "grid grid-cols-2 gap-x-4", children: [
-        /* @__PURE__ */ jsx31(
+      isRecurring && /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-2 gap-x-4", children: [
+        /* @__PURE__ */ jsx39(
           FormInput,
           {
             form,
@@ -2860,7 +3031,7 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
             disabled: isEditMode
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx39(
           FormSelect,
           {
             form,
@@ -2871,7 +3042,7 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx39(
         FormInput,
         {
           form,
@@ -2880,7 +3051,7 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
           placeholder: "e.g., Standard Plan, Pro Tier"
         }
       ),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx39(
         FormTextarea,
         {
           form,
@@ -2890,11 +3061,12 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
           className: "min-h-24"
         }
       ),
-      /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx31(Label, { children: "Features (optional)" }),
-        /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
-          form.watch("features").map((_, index) => /* @__PURE__ */ jsxs26("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx39(FormInput, { form, id: "token", name: "Token (optional)", placeholder: "Enter token value" }),
+      /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx39(Label, { children: "Features (optional)" }),
+        /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+          form.watch("features").map((_, index) => /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx39(
               Input,
               {
                 ...form.register(`features.${index}`),
@@ -2902,7 +3074,7 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
                 className: "flex-1"
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx39(
               Button,
               {
                 type: "button",
@@ -2915,11 +3087,11 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
                     currentFeatures.filter((_2, i) => i !== index)
                   );
                 },
-                children: /* @__PURE__ */ jsx31(XIcon, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx39(XIcon, { className: "h-4 w-4" })
               }
             )
           ] }, index)),
-          /* @__PURE__ */ jsxs26(
+          /* @__PURE__ */ jsxs34(
             Button,
             {
               type: "button",
@@ -2931,15 +3103,15 @@ function PriceEditor({ productId, price, open, onOpenChange, onSuccess }) {
               },
               className: "mt-2",
               children: [
-                /* @__PURE__ */ jsx31(PlusIcon, { className: "h-4 w-4 mr-2" }),
+                /* @__PURE__ */ jsx39(PlusIcon, { className: "h-4 w-4 mr-2" }),
                 "Add Feature"
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx31(FormCheckbox, { form, id: "active", name: "Active" }),
-      /* @__PURE__ */ jsx31(CommonEditorButtons, { isEdit: isEditMode, form, disabled: isSubmitting, setOpen: onOpenChange })
+      /* @__PURE__ */ jsx39(FormCheckbox, { form, id: "active", name: "Active" }),
+      /* @__PURE__ */ jsx39(CommonEditorButtons, { isEdit: isEditMode, form, disabled: isSubmitting, setOpen: onOpenChange })
     ] }) })
   ] }) });
 }
@@ -2947,17 +3119,17 @@ __name(PriceEditor, "PriceEditor");
 
 // src/features/billing/stripe-price/components/lists/PricesList.tsx
 import { Archive, DollarSign, Edit, RotateCcw } from "lucide-react";
-import { useEffect as useEffect9, useState as useState16 } from "react";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useState as useState15 } from "react";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function PricesList({ productId, onPricesChange }) {
-  const [prices, setPrices] = useState16([]);
-  const [loading, setLoading] = useState16(true);
-  const [showCreatePrice, setShowCreatePrice] = useState16(false);
-  const [editingPrice, setEditingPrice] = useState16(null);
-  const [priceToArchive, setPriceToArchive] = useState16(null);
-  const [priceToReactivate, setPriceToReactivate] = useState16(null);
-  const [archivingPriceId, setArchivingPriceId] = useState16(null);
-  const [reactivatingPriceId, setReactivatingPriceId] = useState16(null);
+  const [prices, setPrices] = useState15([]);
+  const [loading, setLoading] = useState15(true);
+  const [showCreatePrice, setShowCreatePrice] = useState15(false);
+  const [editingPrice, setEditingPrice] = useState15(null);
+  const [priceToArchive, setPriceToArchive] = useState15(null);
+  const [priceToReactivate, setPriceToReactivate] = useState15(null);
+  const [archivingPriceId, setArchivingPriceId] = useState15(null);
+  const [reactivatingPriceId, setReactivatingPriceId] = useState15(null);
   const loadPrices = /* @__PURE__ */ __name(async () => {
     setLoading(true);
     try {
@@ -2969,7 +3141,7 @@ function PricesList({ productId, onPricesChange }) {
       setLoading(false);
     }
   }, "loadPrices");
-  useEffect9(() => {
+  useEffect11(() => {
     loadPrices();
   }, [productId]);
   const handleArchive = /* @__PURE__ */ __name(async () => {
@@ -3020,27 +3192,27 @@ function PricesList({ productId, onPricesChange }) {
     return "";
   }, "formatInterval");
   if (loading) {
-    return /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground", children: "Loading prices..." }) });
+    return /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx40("p", { className: "text-muted-foreground", children: "Loading prices..." }) });
   }
-  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-y-4", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx32("h4", { className: "text-lg font-semibold", children: "Prices" }),
-      /* @__PURE__ */ jsx32(Button, { size: "sm", onClick: () => setShowCreatePrice(true), children: "Add Price" })
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx40("h4", { className: "text-lg font-semibold", children: "Prices" }),
+      /* @__PURE__ */ jsx40(Button, { size: "sm", onClick: () => setShowCreatePrice(true), children: "Add Price" })
     ] }),
-    prices.length === 0 && /* @__PURE__ */ jsxs27("div", { className: "bg-background flex flex-col items-center justify-center gap-y-3 rounded-lg border border-dashed p-8", children: [
-      /* @__PURE__ */ jsx32(DollarSign, { className: "text-muted-foreground h-12 w-12" }),
-      /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground text-sm", children: "No prices yet. Add a price to enable subscriptions." }),
-      /* @__PURE__ */ jsx32(Button, { size: "sm", onClick: () => setShowCreatePrice(true), children: "Add Price" })
+    prices.length === 0 && /* @__PURE__ */ jsxs35("div", { className: "bg-background flex flex-col items-center justify-center gap-y-3 rounded-lg border border-dashed p-8", children: [
+      /* @__PURE__ */ jsx40(DollarSign, { className: "text-muted-foreground h-12 w-12" }),
+      /* @__PURE__ */ jsx40("p", { className: "text-muted-foreground text-sm", children: "No prices yet. Add a price to enable subscriptions." }),
+      /* @__PURE__ */ jsx40(Button, { size: "sm", onClick: () => setShowCreatePrice(true), children: "Add Price" })
     ] }),
-    prices.length > 0 && /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: prices.map((price) => {
+    prices.length > 0 && /* @__PURE__ */ jsx40("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: prices.map((price) => {
       const isArchiving = archivingPriceId === price.id;
       const isReactivating = reactivatingPriceId === price.id;
-      return /* @__PURE__ */ jsxs27("div", { className: "border rounded-lg bg-white p-4 hover:shadow-sm transition-shadow", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between mb-3", children: [
-          /* @__PURE__ */ jsx32(DollarSign, { className: "h-5 w-5 text-primary" }),
-          /* @__PURE__ */ jsxs27("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "sm", onClick: () => setEditingPrice(price), className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx32(Edit, { className: "h-4 w-4" }) }),
-            price.active ? /* @__PURE__ */ jsx32(
+      return /* @__PURE__ */ jsxs35("div", { className: "border rounded-lg bg-white p-4 hover:shadow-sm transition-shadow", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex items-start justify-between mb-3", children: [
+          /* @__PURE__ */ jsx40(DollarSign, { className: "h-5 w-5 text-primary" }),
+          /* @__PURE__ */ jsxs35("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx40(Button, { variant: "ghost", size: "sm", onClick: () => setEditingPrice(price), className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx40(Edit, { className: "h-4 w-4" }) }),
+            price.active ? /* @__PURE__ */ jsx40(
               Button,
               {
                 variant: "ghost",
@@ -3048,9 +3220,9 @@ function PricesList({ productId, onPricesChange }) {
                 onClick: () => setPriceToArchive(price),
                 className: "h-8 w-8 p-0",
                 disabled: isArchiving,
-                children: /* @__PURE__ */ jsx32(Archive, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx40(Archive, { className: "h-4 w-4" })
               }
-            ) : /* @__PURE__ */ jsx32(
+            ) : /* @__PURE__ */ jsx40(
               Button,
               {
                 variant: "ghost",
@@ -3058,25 +3230,25 @@ function PricesList({ productId, onPricesChange }) {
                 onClick: () => setPriceToReactivate(price),
                 className: "h-8 w-8 p-0",
                 disabled: isReactivating,
-                children: /* @__PURE__ */ jsx32(RotateCcw, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx40(RotateCcw, { className: "h-4 w-4" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx32("div", { className: "mb-2", children: /* @__PURE__ */ jsxs27("div", { className: "text-2xl font-bold", children: [
+        /* @__PURE__ */ jsx40("div", { className: "mb-2", children: /* @__PURE__ */ jsxs35("div", { className: "text-2xl font-bold", children: [
           formatCurrency(price.unitAmount, price.currency),
           " ",
-          /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground text-sm font-normal", children: formatInterval2(price) })
+          /* @__PURE__ */ jsx40("span", { className: "text-muted-foreground text-sm font-normal", children: formatInterval2(price) })
         ] }) }),
-        price.metadata?.nickname && /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium mb-2", children: price.metadata.nickname }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap gap-2", children: [
-          price.active ? /* @__PURE__ */ jsx32("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx32("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" }),
-          price.recurring?.usageType === "metered" && /* @__PURE__ */ jsx32("span", { className: "bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium", children: "Metered" }),
-          /* @__PURE__ */ jsx32("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase", children: price.currency })
+        price.metadata?.nickname && /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium mb-2", children: price.metadata.nickname }),
+        /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-2", children: [
+          price.active ? /* @__PURE__ */ jsx40("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx40("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" }),
+          price.recurring?.usageType === "metered" && /* @__PURE__ */ jsx40("span", { className: "bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium", children: "Metered" }),
+          /* @__PURE__ */ jsx40("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase", children: price.currency })
         ] })
       ] }, price.id);
     }) }),
-    showCreatePrice && /* @__PURE__ */ jsx32(
+    showCreatePrice && /* @__PURE__ */ jsx40(
       PriceEditor,
       {
         productId,
@@ -3088,7 +3260,7 @@ function PricesList({ productId, onPricesChange }) {
         }
       }
     ),
-    editingPrice && /* @__PURE__ */ jsx32(
+    editingPrice && /* @__PURE__ */ jsx40(
       PriceEditor,
       {
         productId,
@@ -3102,19 +3274,19 @@ function PricesList({ productId, onPricesChange }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx32(AlertDialog, { open: !!priceToArchive, onOpenChange: (open) => !open && setPriceToArchive(null), children: /* @__PURE__ */ jsxs27(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs27(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogTitle, { children: "Archive Price" }),
-        /* @__PURE__ */ jsxs27(AlertDialogDescription, { children: [
+    /* @__PURE__ */ jsx40(AlertDialog, { open: !!priceToArchive, onOpenChange: (open) => !open && setPriceToArchive(null), children: /* @__PURE__ */ jsxs35(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs35(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx40(AlertDialogTitle, { children: "Archive Price" }),
+        /* @__PURE__ */ jsxs35(AlertDialogDescription, { children: [
           "Are you sure you want to archive the price for",
           " ",
           priceToArchive && `${formatCurrency(priceToArchive.unitAmount, priceToArchive.currency)} ${formatInterval2(priceToArchive)}`,
           "? This will prevent new subscriptions but existing ones will continue."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs27(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogCancel, { disabled: !!archivingPriceId, children: "Cancel" }),
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs35(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx40(AlertDialogCancel, { disabled: !!archivingPriceId, children: "Cancel" }),
+        /* @__PURE__ */ jsx40(
           AlertDialogAction,
           {
             onClick: handleArchive,
@@ -3125,19 +3297,19 @@ function PricesList({ productId, onPricesChange }) {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx32(AlertDialog, { open: !!priceToReactivate, onOpenChange: (open) => !open && setPriceToReactivate(null), children: /* @__PURE__ */ jsxs27(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs27(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogTitle, { children: "Reactivate Price" }),
-        /* @__PURE__ */ jsxs27(AlertDialogDescription, { children: [
+    /* @__PURE__ */ jsx40(AlertDialog, { open: !!priceToReactivate, onOpenChange: (open) => !open && setPriceToReactivate(null), children: /* @__PURE__ */ jsxs35(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs35(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx40(AlertDialogTitle, { children: "Reactivate Price" }),
+        /* @__PURE__ */ jsxs35(AlertDialogDescription, { children: [
           "Are you sure you want to reactivate the price for",
           " ",
           priceToReactivate && `${formatCurrency(priceToReactivate.unitAmount, priceToReactivate.currency)} ${formatInterval2(priceToReactivate)}`,
           "? This will allow new subscriptions again."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs27(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogCancel, { disabled: !!reactivatingPriceId, children: "Cancel" }),
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs35(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx40(AlertDialogCancel, { disabled: !!reactivatingPriceId, children: "Cancel" }),
+        /* @__PURE__ */ jsx40(
           AlertDialogAction,
           {
             onClick: handleReactivate,
@@ -3154,20 +3326,20 @@ __name(PricesList, "PricesList");
 
 // src/features/billing/stripe-product/components/containers/ProductsAdminContainer.tsx
 import { Package as Package2 } from "lucide-react";
-import { useEffect as useEffect10, useState as useState19 } from "react";
+import { useEffect as useEffect12, useState as useState18 } from "react";
 
 // src/features/billing/stripe-product/components/forms/ProductEditor.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
-import { useState as useState17 } from "react";
+import { useState as useState16 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
-import { v4 as v44 } from "uuid";
+import { v4 as v42 } from "uuid";
 import { z as z3 } from "zod";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 function ProductEditor({ product, open, onOpenChange, onSuccess }) {
-  const [isSubmitting, setIsSubmitting] = useState17(false);
+  const [isSubmitting, setIsSubmitting] = useState16(false);
   const formSchema2 = z3.object({
     name: z3.string().min(1, { message: "Product name is required" }),
-    description: z3.string().optional(),
+    description: z3.string().min(1, { message: "Description is required" }),
     active: z3.boolean()
   });
   const form = useForm3({
@@ -3190,7 +3362,7 @@ function ProductEditor({ product, open, onOpenChange, onSuccess }) {
         });
       } else {
         await StripeProductService.createProduct({
-          id: v44(),
+          id: v42(),
           name: values.name,
           description: values.description,
           active: values.active
@@ -3204,25 +3376,25 @@ function ProductEditor({ product, open, onOpenChange, onSuccess }) {
       setIsSubmitting(false);
     }
   }, "onSubmit");
-  return /* @__PURE__ */ jsx33(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs28(DialogContent, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ jsxs28(DialogHeader, { children: [
-      /* @__PURE__ */ jsx33(DialogTitle, { children: product ? "Edit Product" : "Create Product" }),
-      /* @__PURE__ */ jsx33(DialogDescription, { children: product ? `Update the details for ${product.name}` : "Create a new product to offer to your customers" })
+  return /* @__PURE__ */ jsx41(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs36(DialogHeader, { children: [
+      /* @__PURE__ */ jsx41(DialogTitle, { children: product ? "Edit Product" : "Create Product" }),
+      /* @__PURE__ */ jsx41(DialogDescription, { children: product ? `Update the details for ${product.name}` : "Create a new product to offer to your customers" })
     ] }),
-    /* @__PURE__ */ jsx33(Form, { ...form, children: /* @__PURE__ */ jsxs28("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
-      /* @__PURE__ */ jsx33(FormInput, { form, id: "name", name: "Product Name", placeholder: "Enter product name", isRequired: true }),
-      /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx41(Form, { ...form, children: /* @__PURE__ */ jsxs36("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsx41(FormInput, { form, id: "name", name: "Product Name", placeholder: "Enter product name", isRequired: true }),
+      /* @__PURE__ */ jsx41(
         FormTextarea,
         {
           form,
           id: "description",
           name: "Description",
-          placeholder: "Enter product description (optional)",
+          placeholder: "Enter product description",
           className: "min-h-32"
         }
       ),
-      /* @__PURE__ */ jsx33(FormCheckbox, { form, id: "active", name: "Active" }),
-      /* @__PURE__ */ jsx33(CommonEditorButtons, { isEdit: !!product, form, disabled: isSubmitting, setOpen: onOpenChange })
+      /* @__PURE__ */ jsx41(FormCheckbox, { form, id: "active", name: "Active" }),
+      /* @__PURE__ */ jsx41(CommonEditorButtons, { isEdit: !!product, form, disabled: isSubmitting, setOpen: onOpenChange })
     ] }) })
   ] }) });
 }
@@ -3230,15 +3402,15 @@ __name(ProductEditor, "ProductEditor");
 
 // src/features/billing/stripe-product/components/lists/ProductsList.tsx
 import { Archive as Archive2, ChevronDown, ChevronUp, Edit as Edit2, Package, RefreshCw as RefreshCw2 } from "lucide-react";
-import { useState as useState18 } from "react";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function ProductsList({ products, onProductsChange }) {
-  const [expandedProductId, setExpandedProductId] = useState18(null);
-  const [editingProduct, setEditingProduct] = useState18(null);
-  const [archivingProductId, setArchivingProductId] = useState18(null);
-  const [reactivatingProductId, setReactivatingProductId] = useState18(null);
-  const [productToArchive, setProductToArchive] = useState18(null);
-  const [productToReactivate, setProductToReactivate] = useState18(null);
+  const [expandedProductId, setExpandedProductId] = useState17(null);
+  const [editingProduct, setEditingProduct] = useState17(null);
+  const [archivingProductId, setArchivingProductId] = useState17(null);
+  const [reactivatingProductId, setReactivatingProductId] = useState17(null);
+  const [productToArchive, setProductToArchive] = useState17(null);
+  const [productToReactivate, setProductToReactivate] = useState17(null);
   const handleArchive = /* @__PURE__ */ __name(async () => {
     if (!productToArchive) {
       return;
@@ -3271,29 +3443,29 @@ function ProductsList({ products, onProductsChange }) {
   const toggleExpand = /* @__PURE__ */ __name((productId) => {
     setExpandedProductId(expandedProductId === productId ? null : productId);
   }, "toggleExpand");
-  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-y-4", children: [
+  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-y-4", children: [
     products.map((product) => {
       const isExpanded = expandedProductId === product.id;
       const isArchiving = archivingProductId === product.id;
       const isReactivating = reactivatingProductId === product.id;
-      return /* @__PURE__ */ jsxs29("div", { className: "border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between p-6", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-x-4 flex-1", children: [
-            /* @__PURE__ */ jsx34(Package, { className: "h-6 w-6 text-primary" }),
-            /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-x-3", children: [
-                /* @__PURE__ */ jsx34("h3", { className: "text-lg font-semibold", children: product.name }),
-                product.active ? /* @__PURE__ */ jsx34("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx34("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" })
+      return /* @__PURE__ */ jsxs37("div", { className: "border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow", children: [
+        /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between p-6", children: [
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-x-4 flex-1", children: [
+            /* @__PURE__ */ jsx42(Package, { className: "h-6 w-6 text-primary" }),
+            /* @__PURE__ */ jsxs37("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-x-3", children: [
+                /* @__PURE__ */ jsx42("h3", { className: "text-lg font-semibold", children: product.name }),
+                product.active ? /* @__PURE__ */ jsx42("span", { className: "bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium", children: "Active" }) : /* @__PURE__ */ jsx42("span", { className: "bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium", children: "Inactive" })
               ] }),
-              product.description && /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground text-sm mt-1", children: product.description })
+              product.description && /* @__PURE__ */ jsx42("p", { className: "text-muted-foreground text-sm mt-1", children: product.description })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsxs29(Button, { variant: "outline", size: "sm", onClick: () => setEditingProduct(product), children: [
-              /* @__PURE__ */ jsx34(Edit2, { className: "h-4 w-4 mr-1" }),
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxs37(Button, { variant: "outline", size: "sm", onClick: () => setEditingProduct(product), children: [
+              /* @__PURE__ */ jsx42(Edit2, { className: "h-4 w-4 mr-1" }),
               "Edit"
             ] }),
-            product.active ? /* @__PURE__ */ jsxs29(
+            product.active ? /* @__PURE__ */ jsxs37(
               Button,
               {
                 variant: "outline",
@@ -3301,11 +3473,11 @@ function ProductsList({ products, onProductsChange }) {
                 onClick: () => setProductToArchive(product),
                 disabled: isArchiving,
                 children: [
-                  /* @__PURE__ */ jsx34(Archive2, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx42(Archive2, { className: "h-4 w-4 mr-1" }),
                   isArchiving ? "Archiving..." : "Archive"
                 ]
               }
-            ) : /* @__PURE__ */ jsxs29(
+            ) : /* @__PURE__ */ jsxs37(
               Button,
               {
                 variant: "outline",
@@ -3313,18 +3485,18 @@ function ProductsList({ products, onProductsChange }) {
                 onClick: () => setProductToReactivate(product),
                 disabled: isReactivating,
                 children: [
-                  /* @__PURE__ */ jsx34(RefreshCw2, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx42(RefreshCw2, { className: "h-4 w-4 mr-1" }),
                   isReactivating ? "Reactivating..." : "Reactivate"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx34(Button, { variant: "ghost", size: "sm", onClick: () => toggleExpand(product.id), children: isExpanded ? /* @__PURE__ */ jsx34(ChevronUp, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx34(ChevronDown, { className: "h-5 w-5" }) })
+            /* @__PURE__ */ jsx42(Button, { variant: "ghost", size: "sm", onClick: () => toggleExpand(product.id), children: isExpanded ? /* @__PURE__ */ jsx42(ChevronUp, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx42(ChevronDown, { className: "h-5 w-5" }) })
           ] })
         ] }),
-        isExpanded && /* @__PURE__ */ jsx34("div", { className: "border-t bg-muted/30 p-6", children: /* @__PURE__ */ jsx34(PricesList, { productId: product.id, onPricesChange: onProductsChange }) })
+        isExpanded && /* @__PURE__ */ jsx42("div", { className: "border-t bg-muted/30 p-6", children: /* @__PURE__ */ jsx42(PricesList, { productId: product.id, onPricesChange: onProductsChange }) })
       ] }, product.id);
     }),
-    editingProduct && /* @__PURE__ */ jsx34(
+    editingProduct && /* @__PURE__ */ jsx42(
       ProductEditor,
       {
         product: editingProduct,
@@ -3336,18 +3508,18 @@ function ProductsList({ products, onProductsChange }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx34(AlertDialog, { open: !!productToArchive, onOpenChange: (open) => !open && setProductToArchive(null), children: /* @__PURE__ */ jsxs29(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs29(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx34(AlertDialogTitle, { children: "Archive Product" }),
-        /* @__PURE__ */ jsxs29(AlertDialogDescription, { children: [
+    /* @__PURE__ */ jsx42(AlertDialog, { open: !!productToArchive, onOpenChange: (open) => !open && setProductToArchive(null), children: /* @__PURE__ */ jsxs37(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs37(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx42(AlertDialogTitle, { children: "Archive Product" }),
+        /* @__PURE__ */ jsxs37(AlertDialogDescription, { children: [
           'Are you sure you want to archive "',
           productToArchive?.name,
           '"? This will deactivate it and it will no longer be available for new subscriptions.'
         ] })
       ] }),
-      /* @__PURE__ */ jsxs29(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx34(AlertDialogCancel, { disabled: !!archivingProductId, children: "Cancel" }),
-        /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsxs37(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx42(AlertDialogCancel, { disabled: !!archivingProductId, children: "Cancel" }),
+        /* @__PURE__ */ jsx42(
           AlertDialogAction,
           {
             onClick: handleArchive,
@@ -3358,18 +3530,18 @@ function ProductsList({ products, onProductsChange }) {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx34(AlertDialog, { open: !!productToReactivate, onOpenChange: (open) => !open && setProductToReactivate(null), children: /* @__PURE__ */ jsxs29(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs29(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx34(AlertDialogTitle, { children: "Reactivate Product" }),
-        /* @__PURE__ */ jsxs29(AlertDialogDescription, { children: [
+    /* @__PURE__ */ jsx42(AlertDialog, { open: !!productToReactivate, onOpenChange: (open) => !open && setProductToReactivate(null), children: /* @__PURE__ */ jsxs37(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs37(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx42(AlertDialogTitle, { children: "Reactivate Product" }),
+        /* @__PURE__ */ jsxs37(AlertDialogDescription, { children: [
           'Are you sure you want to reactivate "',
           productToReactivate?.name,
           '"? This will make it available for new subscriptions again.'
         ] })
       ] }),
-      /* @__PURE__ */ jsxs29(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx34(AlertDialogCancel, { disabled: !!reactivatingProductId, children: "Cancel" }),
-        /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsxs37(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx42(AlertDialogCancel, { disabled: !!reactivatingProductId, children: "Cancel" }),
+        /* @__PURE__ */ jsx42(
           AlertDialogAction,
           {
             onClick: handleReactivate,
@@ -3385,14 +3557,14 @@ function ProductsList({ products, onProductsChange }) {
 __name(ProductsList, "ProductsList");
 
 // src/features/billing/stripe-product/components/containers/ProductsAdminContainer.tsx
-import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 function ProductsAdminContainer() {
   const { hasRole } = useCurrentUserContext();
-  const [products, setProducts] = useState19([]);
-  const [loading, setLoading] = useState19(true);
-  const [showCreateProduct, setShowCreateProduct] = useState19(false);
+  const [products, setProducts] = useState18([]);
+  const [loading, setLoading] = useState18(true);
+  const [showCreateProduct, setShowCreateProduct] = useState18(false);
   if (!hasRole(getRoleId().Administrator)) {
-    return /* @__PURE__ */ jsx35("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx35("p", { className: "text-red-600 font-semibold", children: "Permission denied. Administrator access required." }) });
+    return /* @__PURE__ */ jsx43("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx43("p", { className: "text-red-600 font-semibold", children: "Permission denied. Administrator access required." }) });
   }
   const loadProducts = /* @__PURE__ */ __name(async () => {
     setLoading(true);
@@ -3405,30 +3577,30 @@ function ProductsAdminContainer() {
       setLoading(false);
     }
   }, "loadProducts");
-  useEffect10(() => {
+  useEffect12(() => {
     loadProducts();
   }, []);
   if (loading) {
-    return /* @__PURE__ */ jsx35("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground", children: "Loading products..." }) });
+    return /* @__PURE__ */ jsx43("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx43("p", { className: "text-muted-foreground", children: "Loading products..." }) });
   }
-  return /* @__PURE__ */ jsxs30("div", { className: "flex w-full flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-x-3", children: [
-        /* @__PURE__ */ jsx35(Package2, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx35("h1", { className: "text-3xl font-bold", children: "Product & Price Management" })
+  return /* @__PURE__ */ jsxs38("div", { className: "flex w-full flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx43(Package2, { className: "h-8 w-8" }),
+        /* @__PURE__ */ jsx43("h1", { className: "text-3xl font-bold", children: "Product & Price Management" })
       ] }),
-      /* @__PURE__ */ jsx35(Button, { onClick: () => setShowCreateProduct(true), children: "Create Product" })
+      /* @__PURE__ */ jsx43(Button, { onClick: () => setShowCreateProduct(true), children: "Create Product" })
     ] }),
-    products.length === 0 && /* @__PURE__ */ jsxs30("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12", children: [
-      /* @__PURE__ */ jsx35(Package2, { className: "text-muted-foreground h-16 w-16" }),
-      /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx35("h3", { className: "mb-2 text-xl font-semibold", children: "No products yet" }),
-        /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground mb-4", children: "Create your first product to start offering subscriptions to your customers." }),
-        /* @__PURE__ */ jsx35(Button, { onClick: () => setShowCreateProduct(true), children: "Create Your First Product" })
+    products.length === 0 && /* @__PURE__ */ jsxs38("div", { className: "bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12", children: [
+      /* @__PURE__ */ jsx43(Package2, { className: "text-muted-foreground h-16 w-16" }),
+      /* @__PURE__ */ jsxs38("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx43("h3", { className: "mb-2 text-xl font-semibold", children: "No products yet" }),
+        /* @__PURE__ */ jsx43("p", { className: "text-muted-foreground mb-4", children: "Create your first product to start offering subscriptions to your customers." }),
+        /* @__PURE__ */ jsx43(Button, { onClick: () => setShowCreateProduct(true), children: "Create Your First Product" })
       ] })
     ] }),
-    products.length > 0 && /* @__PURE__ */ jsx35(ProductsList, { products, onProductsChange: loadProducts }),
-    showCreateProduct && /* @__PURE__ */ jsx35(ProductEditor, { open: showCreateProduct, onOpenChange: setShowCreateProduct, onSuccess: loadProducts })
+    products.length > 0 && /* @__PURE__ */ jsx43(ProductsList, { products, onProductsChange: loadProducts }),
+    showCreateProduct && /* @__PURE__ */ jsx43(ProductEditor, { open: showCreateProduct, onOpenChange: setShowCreateProduct, onSuccess: loadProducts })
   ] });
 }
 __name(ProductsAdminContainer, "ProductsAdminContainer");
@@ -3439,6 +3611,7 @@ export {
   BillingUsageSummaryCard,
   CancelSubscriptionDialog,
   CustomerInfoCard,
+  IntervalToggle,
   InvoiceDetails,
   InvoiceStatusBadge,
   InvoicesContainer,
@@ -3446,20 +3619,22 @@ export {
   InvoicesSummaryCard,
   PaymentMethodCard,
   PaymentMethodEditor,
+  PaymentMethodForm,
   PaymentMethodSummaryCard,
   PaymentMethodsContainer,
   PaymentMethodsList,
   PriceEditor,
   PricesList,
   PricingCard,
-  PricingCardsGrid,
   ProductEditor,
+  ProductPricingList,
+  ProductPricingRow,
   ProductsAdminContainer,
   ProductsList,
   ProrationPreview,
   StripeProvider,
+  SubscriptionConfirmation,
   SubscriptionDetails,
-  SubscriptionEditor,
   SubscriptionStatusBadge,
   SubscriptionSummaryCard,
   SubscriptionsContainer,