@omnikit-js/ui 0.9.7 → 0.9.9

package/dist/chunk-2SK6OTCD.js

@@ -0,0 +1,1049 @@
+"use client";
+import { useEffect, useState, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { Card, Button, Tabs } from '@marcoschwartz/lite-ui';
+import { useRouter } from 'next/navigation';
+
+// src/components/client/Modal/index.tsx
+function Modal({ isOpen, onClose, title, children, className = "" }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-6", children })
+        ]
+      }
+    )
+  ] });
+}
+function PaymentForm({ customerId, onSuccess, onCancel, onSubmit }) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [setAsDefault, setSetAsDefault] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    setIsProcessing(true);
+    setErrorMessage(null);
+    try {
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        setErrorMessage(submitError.message || "Failed to validate payment details");
+        setIsProcessing(false);
+        return;
+      }
+      const { error, paymentMethod } = await stripe.createPaymentMethod({
+        elements
+      });
+      if (error) {
+        setErrorMessage(error.message || "Failed to create payment method");
+        setIsProcessing(false);
+        return;
+      }
+      const result = await onSubmit(paymentMethod.id, setAsDefault);
+      if (!result.success) {
+        throw new Error(result.error || "Failed to add payment method");
+      }
+      onSuccess();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : String(error) || "An error occurred");
+      setIsProcessing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(PaymentElement, {}),
+    errorMessage && /* @__PURE__ */ jsx("div", { className: "text-red-600 dark:text-red-400 text-sm", children: errorMessage }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: "setDefault",
+          checked: setAsDefault,
+          onChange: (e) => setSetAsDefault(e.target.checked),
+          className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "setDefault",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: "Set as default payment method"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: onCancel,
+          disabled: isProcessing,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", disabled: !stripe || isProcessing, children: isProcessing ? "Processing..." : "Add Payment Method" })
+    ] })
+  ] });
+}
+function AddPaymentMethodForm({
+  customerId,
+  stripePublishableKey,
+  onSuccess,
+  onCancel,
+  onSubmit
+}) {
+  const [stripePromise, setStripePromise] = useState(null);
+  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    if (stripePublishableKey) {
+      setStripePromise(loadStripe(stripePublishableKey));
+    }
+  }, [stripePublishableKey]);
+  useEffect(() => {
+    const isDark = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+    setTheme(isDark ? "dark" : "light");
+    const observer = new MutationObserver(() => {
+      const isDark2 = document.documentElement.classList.contains("dark");
+      setTheme(isDark2 ? "dark" : "light");
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  const stripeOptions = useMemo(() => ({
+    mode: "setup",
+    currency: "usd",
+    paymentMethodCreation: "manual",
+    appearance: {
+      theme: theme === "dark" ? "night" : "stripe",
+      variables: {
+        colorPrimary: "#3b82f6",
+        colorBackground: theme === "dark" ? "#1f2937" : "#ffffff",
+        colorText: theme === "dark" ? "#f9fafb" : "#1f2937",
+        colorDanger: "#ef4444",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        spacingUnit: "4px",
+        borderRadius: "6px"
+      }
+    }
+  }), [theme]);
+  if (!stripePromise) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Loading..." }) });
+  }
+  return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: stripeOptions, children: /* @__PURE__ */ jsx(
+    PaymentForm,
+    {
+      customerId,
+      onSuccess,
+      onCancel,
+      onSubmit
+    }
+  ) });
+}
+
+// src/components/server/Billing/actions.ts
+function createHeaders(config) {
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (config.accessToken) {
+    headers["Authorization"] = `Bearer ${config.accessToken}`;
+  }
+  if (config.apiKey) {
+    headers["X-API-Key"] = config.apiKey;
+  }
+  return headers;
+}
+async function fetchAPI(config, url, options = {}) {
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        ...createHeaders(config),
+        ...options.headers
+      }
+    });
+    return await response.json();
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "API request failed"
+    };
+  }
+}
+async function addPaymentMethod(config, customerId, stripePaymentMethodId, setAsDefault = false) {
+  const { baseUrl, projectId } = config;
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/customers/${customerId}/payment-methods`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        project_id: projectId,
+        type: "card",
+        stripe_payment_method_id: stripePaymentMethodId,
+        set_as_default: setAsDefault
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to add payment method" };
+  }
+  return { success: true, data: result.data };
+}
+async function removePaymentMethod(config, customerId, paymentMethodId) {
+  const { baseUrl, projectId } = config;
+  const isStripeId = paymentMethodId.startsWith("pm_");
+  const idType = isStripeId ? "stripe" : "database";
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/payment-methods/${paymentMethodId}`,
+    {
+      method: "DELETE",
+      body: JSON.stringify({
+        customer_id: customerId,
+        project_id: projectId,
+        id_type: idType,
+        test_mode: true
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to remove payment method" };
+  }
+  return { success: true };
+}
+async function setDefaultPaymentMethod(config, customerId, paymentMethodId) {
+  const { baseUrl, projectId } = config;
+  const isStripeId = paymentMethodId.startsWith("pm_");
+  const idType = isStripeId ? "stripe" : "database";
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/payment-methods/${paymentMethodId}`,
+    {
+      method: "PUT",
+      body: JSON.stringify({
+        customer_id: customerId,
+        project_id: projectId,
+        id_type: idType,
+        is_default: true,
+        test_mode: true
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to set default payment method" };
+  }
+  return { success: true };
+}
+async function createSubscription(config, customerId, priceId, paymentMethodId) {
+  const { baseUrl, projectId } = config;
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/subscriptions`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        customer_id: customerId,
+        price_id: priceId,
+        payment_method_id: paymentMethodId || void 0,
+        project_id: projectId,
+        sync_to_stripe: true,
+        test_mode: true
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to create subscription" };
+  }
+  return { success: true, data: result.data };
+}
+async function cancelSubscription(config, subscriptionId, cancelAtPeriodEnd = true) {
+  const { baseUrl, projectId } = config;
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/subscriptions/${subscriptionId}/cancel`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        project_id: projectId,
+        cancel_at_period_end: cancelAtPeriodEnd,
+        cancellation_reason: "requested"
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to cancel subscription" };
+  }
+  return { success: true };
+}
+async function updateSubscription(config, subscriptionId, newPriceId) {
+  const { baseUrl, projectId } = config;
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/subscriptions/${subscriptionId}`,
+    {
+      method: "PUT",
+      body: JSON.stringify({
+        project_id: projectId,
+        price_id: newPriceId,
+        sync_to_stripe: true
+      })
+    }
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to update subscription" };
+  }
+  return { success: true, data: result.data };
+}
+async function fetchPaymentConfig(config) {
+  const { baseUrl, projectId } = config;
+  const result = await fetchAPI(
+    config,
+    `${baseUrl}/billing/payment-config?project_id=${projectId}&test_mode=true`
+  );
+  if (!result.success) {
+    return { success: false, error: result.error || "Failed to fetch payment configuration" };
+  }
+  return { success: true, data: result.data };
+}
+function UsageBar({ label, used, limit, unit = "" }) {
+  const percentage = limit > 0 ? used / limit * 100 : 0;
+  const isWarning = percentage > 80;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+        used.toLocaleString(),
+        unit,
+        " / ",
+        limit.toLocaleString(),
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `h-2 rounded-full transition-all ${isWarning ? "bg-yellow-500" : "bg-blue-600"}`,
+        style: { width: `${Math.min(percentage, 100)}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      percentage.toFixed(1),
+      "% used"
+    ] })
+  ] });
+}
+function BillingContent({
+  subscription,
+  invoices,
+  paymentMethods,
+  plans,
+  customer,
+  entitlements,
+  actionConfig,
+  className = ""
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false);
+  const [isRemovePaymentModalOpen, setIsRemovePaymentModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);
+  const [selectedPlan, setSelectedPlan] = useState(null);
+  const [selectedUpgradePaymentMethod, setSelectedUpgradePaymentMethod] = useState(null);
+  const [stripePublishableKey, setStripePublishableKey] = useState(null);
+  const [stripeLoading, setStripeLoading] = useState(false);
+  const [isUpgrading, setIsUpgrading] = useState(false);
+  const [upgradeSuccess, setUpgradeSuccess] = useState(false);
+  useEffect(() => {
+    async function loadStripeConfig() {
+      setStripeLoading(true);
+      try {
+        const result = await fetchPaymentConfig(actionConfig);
+        if (result.success && result.data?.public_key) {
+          setStripePublishableKey(result.data.public_key);
+        }
+      } catch (err) {
+        console.error("Failed to load Stripe config:", err);
+      } finally {
+        setStripeLoading(false);
+      }
+    }
+    loadStripeConfig();
+  }, [actionConfig]);
+  const handleCancelSubscription = async () => {
+    if (!subscription) return;
+    setIsLoading(true);
+    setError(null);
+    const result = await cancelSubscription(actionConfig, subscription.id);
+    if (!result.success) {
+      setError(result.error || "Failed to cancel subscription");
+    } else {
+      setSuccess("Subscription will be canceled at the end of the billing period");
+      setIsCancelModalOpen(false);
+    }
+    setIsLoading(false);
+  };
+  const handleAddPaymentMethod = async (stripePaymentMethodId, setAsDefault) => {
+    const result = await addPaymentMethod(actionConfig, customer.id, stripePaymentMethodId, setAsDefault);
+    return result;
+  };
+  const handleAddPaymentSuccess = () => {
+    setIsAddPaymentModalOpen(false);
+    setSuccess("Payment method added successfully");
+    router.refresh();
+  };
+  const handleRemovePaymentClick = (pm) => {
+    setSelectedPaymentMethod(pm);
+    setIsRemovePaymentModalOpen(true);
+  };
+  const handleConfirmRemovePayment = async () => {
+    if (!selectedPaymentMethod) return;
+    setIsLoading(true);
+    setError(null);
+    const paymentMethodId = selectedPaymentMethod.provider_payment_method_id || String(selectedPaymentMethod.id);
+    const result = await removePaymentMethod(actionConfig, customer.id, paymentMethodId);
+    if (!result.success) {
+      setError(result.error || "Failed to remove payment method");
+    } else {
+      setSuccess("Payment method removed");
+      setIsRemovePaymentModalOpen(false);
+      setSelectedPaymentMethod(null);
+      router.refresh();
+    }
+    setIsLoading(false);
+  };
+  const handleSelectPlan = (plan) => {
+    if (plan.current || !plan.priceId) return;
+    setSelectedPlan(plan);
+    setIsUpgradeModalOpen(true);
+    setError(null);
+    const priceNum = parseFloat(plan.price.replace(/[^0-9.]/g, "")) || 0;
+    if (priceNum > 0) {
+      const defaultPaymentMethod = paymentMethods.find((pm) => pm.is_default);
+      setSelectedUpgradePaymentMethod(defaultPaymentMethod?.id || null);
+    } else {
+      setSelectedUpgradePaymentMethod(null);
+    }
+  };
+  const handleConfirmUpgrade = async () => {
+    if (!selectedPlan) return;
+    const priceNum = parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) || 0;
+    if (priceNum > 0 && !selectedUpgradePaymentMethod && paymentMethods.length > 0) {
+      setError("Please select a payment method");
+      return;
+    }
+    setIsUpgrading(true);
+    setError(null);
+    try {
+      if (subscription) {
+        const result = await updateSubscription(actionConfig, subscription.id, selectedPlan.priceId);
+        if (!result.success) {
+          setError(result.error || "Failed to update subscription");
+          setIsUpgrading(false);
+          return;
+        }
+      } else {
+        const paymentMethodId = selectedUpgradePaymentMethod ? paymentMethods.find((pm) => pm.id === selectedUpgradePaymentMethod)?.provider_payment_method_id || String(selectedUpgradePaymentMethod) : void 0;
+        const result = await createSubscription(actionConfig, customer.id, selectedPlan.priceId, paymentMethodId);
+        if (!result.success) {
+          setError(result.error || "Failed to create subscription");
+          setIsUpgrading(false);
+          return;
+        }
+      }
+      setIsUpgradeModalOpen(false);
+      setUpgradeSuccess(true);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsUpgrading(false);
+    }
+  };
+  const handleCloseSuccessModal = () => {
+    setUpgradeSuccess(false);
+    setSelectedPlan(null);
+    setSelectedUpgradePaymentMethod(null);
+  };
+  const handleSetDefaultPaymentMethod = async (pm) => {
+    setIsLoading(true);
+    setError(null);
+    const paymentMethodId = pm.provider_payment_method_id || String(pm.id);
+    const result = await setDefaultPaymentMethod(actionConfig, customer.id, paymentMethodId);
+    if (!result.success) {
+      setError(result.error || "Failed to set default payment method");
+    } else {
+      setSuccess("Default payment method updated");
+      router.refresh();
+    }
+    setIsLoading(false);
+  };
+  const handleChangePlanClick = () => {
+    setActiveTabIndex(1);
+  };
+  const tabs = [
+    {
+      id: "subscription",
+      label: "Subscription",
+      content: /* @__PURE__ */ jsxs("div", { className: "space-y-6 mt-6", children: [
+        error && /* @__PURE__ */ jsx("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded-lg", children: error }),
+        success && /* @__PURE__ */ jsx("div", { className: "p-4 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 rounded-lg", children: success }),
+        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Current Plan" }),
+              subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: subscription.price }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+                    "/ ",
+                    subscription.period
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: subscription.plan })
+              ] }) : /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "No active subscription" })
+            ] }),
+            subscription && /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${subscription.status === "active" ? "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300" : subscription.status === "canceled" ? "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300" : "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300"}`, children: subscription.cancelAtPeriodEnd ? "Canceling" : subscription.status })
+          ] }),
+          subscription && /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Next billing date" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(Button, { className: "flex-1", disabled: isLoading, onClick: handleChangePlanClick, children: subscription ? "Change Plan" : "Choose a Plan" }),
+            subscription && !subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => setIsCancelModalOpen(true),
+                disabled: isLoading,
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) }),
+        entitlements.length > 0 && /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Current Usage" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: entitlements.map((ent) => {
+            const featureName = ent.feature_key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+            const entValue = typeof ent.value === "object" && ent.value?.value !== void 0 ? ent.value.value : ent.value;
+            const limit = typeof entValue === "number" ? entValue : 0;
+            const used = ent.usage_count || 0;
+            if (typeof entValue === "number" && entValue > 0) {
+              return /* @__PURE__ */ jsx(
+                UsageBar,
+                {
+                  label: featureName,
+                  used,
+                  limit
+                },
+                ent.id
+              );
+            }
+            const isEnabled = entValue === true || entValue === "true" || entValue === "Enabled";
+            const isDisabled = entValue === false || entValue === "false";
+            return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: featureName }),
+              isEnabled || !isDisabled && entValue === void 0 ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-green-600 dark:text-green-400", children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                "Included"
+              ] }) : isDisabled ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+                "Not included"
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: String(entValue) })
+            ] }, ent.id);
+          }) })
+        ] })
+      ] })
+    },
+    {
+      id: "plans",
+      label: "Plans",
+      content: /* @__PURE__ */ jsxs("div", { className: "space-y-6 mt-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Choose Your Plan" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Select the plan that best fits your needs. You can upgrade or downgrade at any time." })
+        ] }),
+        plans.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No plans available." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative rounded-lg border-2 p-6 flex flex-col ${plan.current ? "border-blue-600 dark:border-blue-500" : "border-gray-200 dark:border-neutral-700"} ${plan.popular ? "shadow-lg" : ""}`,
+            children: [
+              plan.popular && !plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Most Popular" }) }),
+              plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Current Plan" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-xl font-bold mb-2", children: plan.name }),
+                plan.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2", children: plan.description }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: plan.price }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+                    "/ ",
+                    plan.period
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-6 flex-1", children: plan.features.map((feature, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M5 13l4 4L19 7"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: feature })
+              ] }, idx)) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "w-full",
+                  disabled: plan.current || isLoading,
+                  variant: plan.current ? "secondary" : "primary",
+                  onClick: () => handleSelectPlan(plan),
+                  children: plan.current ? "Current Plan" : subscription ? "Switch Plan" : "Select Plan"
+                }
+              )
+            ]
+          },
+          plan.id
+        )) })
+      ] })
+    },
+    {
+      id: "invoices",
+      label: "Invoices",
+      content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Invoice History" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "View and download your past invoices" }),
+        invoices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No invoices yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.map((invoice) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border border-gray-200 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: invoice.id }),
+                /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${invoice.status === "paid" ? "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300" : invoice.status === "open" ? "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300" : "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300"}`, children: invoice.status })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: invoice.date })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold", children: invoice.amount }),
+            invoice.url && invoice.url !== "#" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => window.open(invoice.url, "_blank"),
+                children: "Download"
+              }
+            )
+          ] })
+        ] }, invoice.id)) })
+      ] }) })
+    },
+    {
+      id: "payment",
+      label: "Payment Method",
+      content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Payment Methods" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Manage your payment methods" }),
+        paymentMethods.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 border border-dashed border-gray-300 dark:border-neutral-700 rounded-lg", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 mb-4", children: "No payment methods on file" }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsAddPaymentModalOpen(true), disabled: stripeLoading, children: stripeLoading ? "Loading..." : "Add Payment Method" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          paymentMethods.map((pm) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border border-gray-200 dark:border-neutral-700 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("p", { className: "font-medium text-sm", children: [
+                    pm.card_brand || pm.type,
+                    " \u2022\u2022\u2022\u2022 ",
+                    pm.card_last4 || pm.bank_last4 || "****"
+                  ] }),
+                  pm.is_default && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-2 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-300", children: "Default" })
+                ] }),
+                pm.card_exp_month && pm.card_exp_year && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                  "Expires ",
+                  pm.card_exp_month,
+                  "/",
+                  pm.card_exp_year
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              !pm.is_default && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: () => handleSetDefaultPaymentMethod(pm),
+                  disabled: isLoading,
+                  children: "Set Default"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: () => handleRemovePaymentClick(pm),
+                  disabled: isLoading,
+                  children: "Remove"
+                }
+              )
+            ] })
+          ] }, pm.id)),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              className: "w-full mt-4",
+              onClick: () => setIsAddPaymentModalOpen(true),
+              disabled: stripeLoading,
+              children: stripeLoading ? "Loading..." : "Add Payment Method"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(Tabs, { tabs, defaultIndex: activeTabIndex, onChange: setActiveTabIndex }, activeTabIndex),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isAddPaymentModalOpen,
+        onClose: () => setIsAddPaymentModalOpen(false),
+        title: "Add Payment Method",
+        children: stripePublishableKey ? /* @__PURE__ */ jsx(
+          AddPaymentMethodForm,
+          {
+            customerId: customer.id,
+            stripePublishableKey,
+            onSuccess: handleAddPaymentSuccess,
+            onCancel: () => setIsAddPaymentModalOpen(false),
+            onSubmit: handleAddPaymentMethod
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: stripeLoading ? "Loading payment form..." : "Payment configuration not available" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isRemovePaymentModalOpen,
+        onClose: () => {
+          setIsRemovePaymentModalOpen(false);
+          setSelectedPaymentMethod(null);
+        },
+        title: "Remove Payment Method",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Are you sure you want to remove this payment method?" }),
+          selectedPaymentMethod && /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900 dark:text-white", children: selectedPaymentMethod.card_brand || "Card" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+                "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
+                selectedPaymentMethod.card_last4 || "****"
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "This action cannot be undone." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setIsRemovePaymentModalOpen(false);
+                  setSelectedPaymentMethod(null);
+                },
+                disabled: isLoading,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                onClick: handleConfirmRemovePayment,
+                disabled: isLoading,
+                children: isLoading ? "Removing..." : "Remove Payment Method"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isCancelModalOpen,
+        onClose: () => setIsCancelModalOpen(false),
+        title: "Cancel Subscription",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-yellow-600 dark:text-yellow-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-yellow-900 dark:text-yellow-100 mb-1", children: "Are you sure you want to cancel?" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "You'll lose access to premium features when your current billing period ends." })
+            ] })
+          ] }),
+          subscription && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Current Plan:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.plan })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mt-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Access Until:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => setIsCancelModalOpen(false),
+                disabled: isLoading,
+                children: "Keep Subscription"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                onClick: handleCancelSubscription,
+                disabled: isLoading,
+                children: isLoading ? "Canceling..." : "Yes, Cancel Subscription"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isUpgradeModalOpen,
+        onClose: () => {
+          setIsUpgradeModalOpen(false);
+          setError(null);
+        },
+        title: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Start Free Plan" : subscription ? "Confirm Plan Change" : "Confirm Subscription",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Start your free ",
+            /* @__PURE__ */ jsx("strong", { children: selectedPlan?.name }),
+            " plan"
+          ] }) : subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Switch to the ",
+            /* @__PURE__ */ jsx("strong", { children: selectedPlan?.name }),
+            " plan"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Subscribe to the ",
+            /* @__PURE__ */ jsx("strong", { children: selectedPlan?.name }),
+            " plan"
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: "Billing Summary" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Plan:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: selectedPlan?.name })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Billing Cycle:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
+                selectedPlan?.period || "month",
+                "ly"
+              ] })
+            ] }),
+            selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Price:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
+                selectedPlan.price,
+                "/",
+                selectedPlan.period || "month"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 mt-3 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Total:" : "Charged Today:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-lg text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? /* @__PURE__ */ jsx("span", { className: "text-green-600 dark:text-green-400", children: "FREE" }) : selectedPlan?.price || "$0" })
+            ] }) })
+          ] }),
+          selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-white text-sm", children: "Select Payment Method" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-2", children: paymentMethods.map((method) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: `flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${selectedUpgradePaymentMethod === method.id ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-neutral-700 hover:border-gray-300 dark:hover:border-neutral-600"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "radio",
+                      name: "paymentMethod",
+                      value: method.id,
+                      checked: selectedUpgradePaymentMethod === method.id,
+                      onChange: () => setSelectedUpgradePaymentMethod(method.id),
+                      className: "w-4 h-4 text-blue-600"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white text-sm", children: method.card_brand ? method.card_brand.charAt(0).toUpperCase() + method.card_brand.slice(1) : "Card" }),
+                      method.is_default && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-2 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-300", children: "Default" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                      "\u2022\u2022\u2022\u2022 ",
+                      method.card_last4 || "XXXX"
+                    ] })
+                  ] })
+                ]
+              },
+              method.id
+            )) })
+          ] }),
+          selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length === 0 && /* @__PURE__ */ jsx("div", { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "Please add a payment method before subscribing to a paid plan." }) }),
+          selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 && /* @__PURE__ */ jsx("div", { className: "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-green-800 dark:text-green-200", children: "This is a free plan. No payment method required!" }) }),
+          selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Your payment method will be charged immediately. You can cancel anytime." }),
+          error && /* @__PURE__ */ jsx("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800 dark:text-red-200", children: error })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setIsUpgradeModalOpen(false);
+                  setError(null);
+                },
+                disabled: isUpgrading,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                onClick: handleConfirmUpgrade,
+                disabled: isUpgrading || !!(selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length === 0),
+                children: isUpgrading ? "Processing..." : selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Start Free Plan" : subscription ? "Confirm Change" : "Confirm Subscription"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: upgradeSuccess,
+        onClose: handleCloseSuccessModal,
+        title: "Subscription Successful!",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxs("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: [
+              "Welcome to ",
+              selectedPlan?.name,
+              "!"
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Your free plan is now active. Start exploring all the features!" : "Your subscription has been activated and your payment method has been charged." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Plan:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: selectedPlan?.name })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Billing:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Free" : `${selectedPlan?.price}/${selectedPlan?.period}` })
+            ] }),
+            selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm pt-2 border-t border-gray-200 dark:border-gray-700", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Status:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-green-600 dark:text-green-400", children: "Active" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              onClick: handleCloseSuccessModal,
+              className: "px-8",
+              children: "Get Started"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
+
+export { AddPaymentMethodForm, BillingContent, Modal };
+//# sourceMappingURL=chunk-2SK6OTCD.js.map
+//# sourceMappingURL=chunk-2SK6OTCD.js.map