@omnikit-js/ui 0.9.45 → 0.9.47

package/dist/{chunk-3AQCVPQI.js → chunk-SRPYYSJZ.js}

@@ -7,14 +7,24 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/navigation';
 
 // src/components/client/AddPaymentMethodForm/index.tsx
-function PaymentForm({ customerId, businessName, onSuccess, onCancel, onSubmit }) {
+function PaymentForm({
+  customerId,
+  businessName,
+  onSuccess,
+  onCancel,
+  onSubmit,
+  onGuestCheckout,
+  isGuestMode = false,
+  submitButtonText,
+  isProcessing: externalIsProcessing = false
+}) {
   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();
+  const [setAsDefault, setSetAsDefault] = useState(true);
+  const processing = externalIsProcessing || isProcessing;
+  const handleSubmit = async () => {
     if (!stripe || !elements) {
       return;
     }
@@ -35,6 +45,13 @@ function PaymentForm({ customerId, businessName, onSuccess, onCancel, onSubmit }
         setIsProcessing(false);
         return;
       }
+      if (isGuestMode && onGuestCheckout) {
+        const result2 = await onGuestCheckout(paymentMethod.id);
+        if (!result2.success) {
+          throw new Error(result2.error || "Payment failed");
+        }
+        return;
+      }
       const result = await onSubmit(paymentMethod.id, setAsDefault);
       if (!result.success) {
         throw new Error(result.error || "Failed to add payment method");
@@ -50,10 +67,11 @@ function PaymentForm({ customerId, businessName, onSuccess, onCancel, onSubmit }
       business: { name: businessName }
     }
   }), [businessName]);
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+  const buttonText = submitButtonText || (isGuestMode ? "Pay Now" : "Add Payment Method");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(PaymentElement, { options: paymentElementOptions }),
     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: [
+    !isGuestMode && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -73,19 +91,33 @@ function PaymentForm({ customerId, businessName, onSuccess, onCancel, onSubmit }
         }
       )
     ] }),
-    /* @__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" })
-    ] })
+    isGuestMode ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "primary",
+        className: "w-full",
+        size: "lg",
+        disabled: !stripe || processing,
+        onClick: handleSubmit,
+        children: processing ? "Processing..." : buttonText
+      }
+    ) : (
+      /* Regular mode: cancel + add buttons */
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+        onCancel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: onCancel,
+            disabled: processing,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", disabled: !stripe || processing, onClick: handleSubmit, children: processing ? "Processing..." : buttonText })
+      ] })
+    )
   ] });
 }
 function AddPaymentMethodForm({
@@ -94,7 +126,12 @@ function AddPaymentMethodForm({
   businessName,
   onSuccess,
   onCancel,
-  onSubmit
+  onSubmit,
+  onGuestCheckout,
+  isGuestMode = false,
+  guestEmail,
+  submitButtonText,
+  isProcessing
 }) {
   const [stripePromise, setStripePromise] = useState(null);
   const [theme, setTheme] = useState("light");
@@ -171,7 +208,11 @@ function AddPaymentMethodForm({
       businessName,
       onSuccess,
       onCancel,
-      onSubmit
+      onSubmit,
+      onGuestCheckout,
+      isGuestMode,
+      submitButtonText,
+      isProcessing
     }
   ) });
 }
@@ -637,32 +678,47 @@ function BillingContent({
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Current Usage" }),
           /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.values(featureUsage).sort((a, b) => {
             const getPriority = (usage) => {
-              if (usage.limit > 0 && usage.current_usage > 0) return 0;
-              if (usage.limit > 0) return 1;
-              if (usage.feature_type === "string") return 2;
-              return 3;
+              if (usage.display_mode === "balance_based") return 0;
+              if ((usage.limit ?? 0) > 0 && (usage.current_usage ?? 0) > 0) return 1;
+              if ((usage.limit ?? 0) > 0) return 2;
+              if (usage.feature_type === "string") return 3;
+              return 4;
             };
             return getPriority(a) - getPriority(b);
           }).map((usage) => {
             const featureName = usage.feature_name || usage.feature_key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-            if (usage.limit > 0) {
-              const percentage = usage.current_usage / usage.limit * 100;
+            if (usage.display_mode === "balance_based") {
+              const unit = usage.unit ? ` ${usage.unit}` : "";
+              const isLow = usage.remaining < 1e3;
+              return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-neutral-300", children: featureName }),
+                /* @__PURE__ */ jsxs("span", { className: `font-medium ${isLow ? "text-amber-600 dark:text-amber-400" : "text-gray-900 dark:text-gray-100"}`, children: [
+                  usage.remaining.toLocaleString(),
+                  unit,
+                  " remaining"
+                ] })
+              ] }, usage.feature_key);
+            }
+            if ((usage.limit ?? 0) > 0) {
+              const limit = usage.limit ?? 0;
+              const currentUsage = usage.current_usage ?? 0;
+              const percentage = currentUsage / limit * 100;
               const unit = usage.unit ? ` ${usage.unit}` : "";
               return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-neutral-300", children: featureName }),
                   /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
-                    usage.current_usage.toLocaleString(),
+                    currentUsage.toLocaleString(),
                     " / ",
-                    usage.limit.toLocaleString(),
+                    limit.toLocaleString(),
                     unit
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx(
                   ProgressBar,
                   {
-                    value: usage.current_usage,
-                    max: usage.limit,
+                    value: currentUsage,
+                    max: limit,
                     variant: percentage > 80 ? "warning" : "default"
                   }
                 )
@@ -1313,7 +1369,611 @@ function BillingContent({
     )
   ] });
 }
+var STORAGE_KEY = "omnikit_customer";
+function getStoredCustomer(projectId) {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return null;
+    const customer = JSON.parse(stored);
+    if (customer.projectId === projectId) {
+      return customer;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function storeCustomer(customer) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(customer));
+  } catch {
+  }
+}
+function clearStoredCustomer() {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+  }
+}
+function PaymentForm2({
+  products,
+  customerId: initialCustomerId,
+  paymentMethods: initialPaymentMethods = [],
+  stripePublishableKey,
+  actionConfig,
+  quantity = 1,
+  currencySymbol = "$",
+  successUrl = "/success",
+  cancelUrl,
+  allowPromoCode = true,
+  termsUrl,
+  privacyUrl,
+  onSuccess,
+  onError,
+  onCustomerCreated
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingCustomer, setIsLoadingCustomer] = useState(false);
+  const [error, setError] = useState(null);
+  const [email, setEmail] = useState("");
+  const [customerId, setCustomerId] = useState(initialCustomerId ?? null);
+  const [paymentMethods, setPaymentMethods] = useState(initialPaymentMethods);
+  const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState(null);
+  const [showNewCardForm, setShowNewCardForm] = useState(false);
+  const [promoCode, setPromoCode] = useState("");
+  const [showPromoInput, setShowPromoInput] = useState(false);
+  const [customerEmail, setCustomerEmail] = useState(null);
+  useEffect(() => {
+    if (initialCustomerId) {
+      setCustomerId(initialCustomerId);
+      return;
+    }
+    const stored = getStoredCustomer(actionConfig.projectId || 0);
+    if (stored) {
+      setCustomerId(stored.id);
+      setCustomerEmail(stored.email);
+      setEmail(stored.email);
+      fetchPaymentMethods(stored.id);
+    }
+  }, [initialCustomerId, actionConfig.projectId]);
+  useEffect(() => {
+    if (initialPaymentMethods.length > 0) {
+      setPaymentMethods(initialPaymentMethods);
+    }
+  }, [initialPaymentMethods]);
+  useEffect(() => {
+    if (paymentMethods.length > 0 && !selectedPaymentMethodId) {
+      const defaultMethod = paymentMethods.find((pm) => pm.is_default);
+      setSelectedPaymentMethodId(defaultMethod?.id || paymentMethods[0].id);
+      setShowNewCardForm(false);
+    } else if (paymentMethods.length === 0 && customerId) {
+      setShowNewCardForm(true);
+    }
+  }, [paymentMethods, selectedPaymentMethodId, customerId]);
+  const subtotal = products.reduce((sum, p) => sum + p.price * quantity, 0);
+  const total = subtotal;
+  const isMultiProduct = products.length > 1;
+  const primaryProduct = products[0];
+  const isSubscription = primaryProduct?.type === "subscription";
+  const buttonText = isSubscription && !isMultiProduct ? `Subscribe ${currencySymbol}${primaryProduct.price.toFixed(2)}/${primaryProduct.interval}` : `Pay ${currencySymbol}${total.toFixed(2)}`;
+  const fetchPaymentMethods = async (custId) => {
+    try {
+      const response = await fetch(
+        `${actionConfig.baseUrl}/billing/customers/${custId}/payment-methods?project_id=${actionConfig.projectId}&status=active`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+            ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+          }
+        }
+      );
+      const result = await response.json();
+      if (result.success && result.data) {
+        setPaymentMethods(result.data);
+      }
+    } catch (err) {
+      console.error("Failed to fetch payment methods:", err);
+    }
+  };
+  const getOrCreateCustomer = async (emailAddress) => {
+    setIsLoadingCustomer(true);
+    setError(null);
+    try {
+      const filter = JSON.stringify({
+        email: emailAddress,
+        project_id: actionConfig.projectId
+      });
+      const searchResponse = await fetch(
+        `${actionConfig.baseUrl}/data/customers?filter=${encodeURIComponent(filter)}&limit=1`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+            ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+          }
+        }
+      );
+      if (searchResponse.ok) {
+        const searchResult = await searchResponse.json();
+        if (searchResult.success && searchResult.data && searchResult.data.length > 0) {
+          const customer = searchResult.data[0];
+          return { id: customer.id, email: customer.email };
+        }
+      }
+      const createResponse = await fetch(`${actionConfig.baseUrl}/billing/customers`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+          ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+        },
+        body: JSON.stringify({
+          project_id: actionConfig.projectId,
+          email: emailAddress,
+          sync_to_stripe: true,
+          test_mode: true
+        })
+      });
+      const createResult = await createResponse.json();
+      if (createResult.success && createResult.data) {
+        return { id: createResult.data.id, email: createResult.data.email };
+      }
+      throw new Error(createResult.error || "Failed to create customer");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to create customer";
+      setError(message);
+      return null;
+    } finally {
+      setIsLoadingCustomer(false);
+    }
+  };
+  const handleEmailSubmit = async () => {
+    if (!email || !email.includes("@")) {
+      setError("Please enter a valid email address");
+      return;
+    }
+    const customer = await getOrCreateCustomer(email);
+    if (customer) {
+      setCustomerId(customer.id);
+      setCustomerEmail(customer.email);
+      storeCustomer({
+        id: customer.id,
+        email: customer.email,
+        projectId: actionConfig.projectId || 0
+      });
+      await fetchPaymentMethods(customer.id);
+      onCustomerCreated?.(customer.id, customer.email);
+    }
+  };
+  const handleChangeEmail = () => {
+    clearStoredCustomer();
+    setCustomerId(null);
+    setCustomerEmail(null);
+    setPaymentMethods([]);
+    setSelectedPaymentMethodId(null);
+    setShowNewCardForm(false);
+  };
+  const processPayment = async (custId, paymentMethodId) => {
+    const response = await fetch(`${actionConfig.baseUrl}/billing/payments/intents`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+        ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+      },
+      body: JSON.stringify({
+        project_id: actionConfig.projectId,
+        customer_id: custId,
+        amount: total,
+        currency: "usd",
+        payment_method_id: paymentMethodId,
+        description: isMultiProduct ? `Purchase of ${products.length} products` : `Purchase of ${primaryProduct.name}`,
+        metadata: {
+          product_ids: products.map((p) => p.id)
+        },
+        confirm: true,
+        sync_to_stripe: true,
+        test_mode: true
+      })
+    });
+    const result = await response.json();
+    if (!result.success) {
+      throw new Error(result.error || "Payment failed");
+    }
+    return result;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (customerId && selectedPaymentMethodId && !showNewCardForm) {
+      setIsLoading(true);
+      setError(null);
+      try {
+        await processPayment(customerId, selectedPaymentMethodId);
+        onSuccess?.();
+        window.location.href = successUrl;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Payment failed";
+        setError(errorMessage);
+        onError?.(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+      return;
+    }
+    if (!customerId && !selectedPaymentMethodId) {
+      if (!email || !email.includes("@")) {
+        setError("Please enter a valid email address");
+        return;
+      }
+      setError('Please enter your card details and click "Add Card & Pay"');
+      return;
+    }
+    if (showNewCardForm) {
+      setError("Please add a payment method first");
+      return;
+    }
+  };
+  const handleGuestCheckout = async (stripePaymentMethodId) => {
+    if (!email || !email.includes("@")) {
+      return { success: false, error: "Please enter a valid email address" };
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const customer = await getOrCreateCustomer(email);
+      if (!customer) {
+        throw new Error("Failed to create customer");
+      }
+      storeCustomer({
+        id: customer.id,
+        email: customer.email,
+        projectId: actionConfig.projectId || 0
+      });
+      const pmResponse = await fetch(`${actionConfig.baseUrl}/billing/customers/${customer.id}/payment-methods`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+          ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+        },
+        body: JSON.stringify({
+          project_id: actionConfig.projectId,
+          type: "card",
+          stripe_payment_method_id: stripePaymentMethodId,
+          set_as_default: true
+        })
+      });
+      const pmResult = await pmResponse.json();
+      if (!pmResult.success || !pmResult.data) {
+        throw new Error(pmResult.error || "Failed to add payment method");
+      }
+      await processPayment(customer.id, pmResult.data.id);
+      onCustomerCreated?.(customer.id, customer.email);
+      onSuccess?.();
+      window.location.href = successUrl;
+      return { success: true };
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Payment failed";
+      setError(errorMessage);
+      onError?.(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleAddPaymentMethod = async (stripePaymentMethodId, setAsDefault) => {
+    if (!customerId) {
+      return { success: false, error: "Customer not found" };
+    }
+    try {
+      const response = await fetch(`${actionConfig.baseUrl}/billing/customers/${customerId}/payment-methods`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...actionConfig.apiKey && { "X-API-Key": actionConfig.apiKey },
+          ...actionConfig.accessToken && { "Authorization": `Bearer ${actionConfig.accessToken}` }
+        },
+        body: JSON.stringify({
+          project_id: actionConfig.projectId,
+          type: "card",
+          stripe_payment_method_id: stripePaymentMethodId,
+          set_as_default: setAsDefault
+        })
+      });
+      const result = await response.json();
+      return result;
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : "Failed to add payment method" };
+    }
+  };
+  const handlePaymentMethodAdded = async () => {
+    setShowNewCardForm(false);
+    if (customerId) {
+      await fetchPaymentMethods(customerId);
+    }
+  };
+  const needsEmail = !customerId && !initialCustomerId;
+  const isGuestMode = needsEmail && stripePublishableKey;
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    isGuestMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: "email",
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "you@example.com",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Card Information" }),
+        /* @__PURE__ */ jsx(
+          AddPaymentMethodForm,
+          {
+            customerId: 0,
+            stripePublishableKey,
+            onSuccess: () => {
+            },
+            onSubmit: async () => ({ success: false, error: "Use guest checkout" }),
+            onGuestCheckout: handleGuestCheckout,
+            isGuestMode: true,
+            guestEmail: email,
+            submitButtonText: `Pay ${currencySymbol}${total.toFixed(2)}`,
+            isProcessing: isLoading
+          }
+        )
+      ] }),
+      (isMultiProduct || quantity > 1) && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-neutral-700 space-y-2", children: [
+        products.map((product) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+            product.name,
+            " ",
+            quantity > 1 && `x ${quantity}`
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            (product.price * quantity).toFixed(2)
+          ] })
+        ] }, product.id)),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-semibold pt-2 border-t border-gray-200 dark:border-neutral-700", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white", children: "Total" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            total.toFixed(2)
+          ] })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
+      (termsUrl || privacyUrl) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: [
+        "By confirming, you agree to our",
+        " ",
+        termsUrl && /* @__PURE__ */ jsx("a", { href: termsUrl, className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300", children: "Terms of Service" }),
+        termsUrl && privacyUrl && " and ",
+        privacyUrl && /* @__PURE__ */ jsx("a", { href: privacyUrl, className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300", children: "Privacy Policy" }),
+        "."
+      ] }),
+      cancelUrl && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("a", { href: cancelUrl, className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Cancel" }) })
+    ] }) : needsEmail && !stripePublishableKey ? (
+      /* No Stripe key - show email only with continue button */
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: "email",
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "you@example.com",
+            required: true,
+            disabled: isLoadingCustomer
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: handleEmailSubmit,
+            disabled: isLoadingCustomer || !email,
+            className: "w-full",
+            children: isLoadingCustomer ? "Loading..." : "Continue"
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      customerEmail && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Email" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: customerEmail })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleChangeEmail,
+            className: "text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: "Change"
+          }
+        )
+      ] }),
+      paymentMethods.length > 0 && !showNewCardForm && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Payment Method" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: paymentMethods.map((method) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all ${selectedPaymentMethodId === method.id ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30" : "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: selectedPaymentMethodId === method.id,
+                  onChange: () => setSelectedPaymentMethodId(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 px-2 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-200", children: "Default" })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                  "**** ",
+                  method.card_last4 || "XXXX",
+                  method.card_exp_month && method.card_exp_year && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+                    "Exp ",
+                    method.card_exp_month,
+                    "/",
+                    method.card_exp_year
+                  ] })
+                ] })
+              ] })
+            ]
+          },
+          method.id
+        )) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowNewCardForm(true),
+            className: "text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: "+ Add new card"
+          }
+        )
+      ] }),
+      showNewCardForm && stripePublishableKey && customerId && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Card Information" }),
+        /* @__PURE__ */ jsx(
+          AddPaymentMethodForm,
+          {
+            customerId,
+            stripePublishableKey,
+            onSuccess: handlePaymentMethodAdded,
+            onCancel: paymentMethods.length > 0 ? () => setShowNewCardForm(false) : void 0,
+            onSubmit: handleAddPaymentMethod
+          }
+        )
+      ] }),
+      showNewCardForm && !stripePublishableKey && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Card Information" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "text",
+            name: "card_number",
+            placeholder: "1234 1234 1234 1234",
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "text",
+              name: "card_expiry",
+              placeholder: "MM / YY",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "text",
+              name: "card_cvc",
+              placeholder: "CVC",
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "text",
+            name: "cardholder_name",
+            placeholder: "Name on card",
+            required: true
+          }
+        )
+      ] }),
+      allowPromoCode && /* @__PURE__ */ jsx("div", { children: !showPromoInput ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPromoInput(true),
+          className: "text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+          children: "Add promotion code"
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "text",
+            value: promoCode,
+            onChange: (e) => setPromoCode(e.target.value),
+            placeholder: "Enter promo code",
+            className: "flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", children: "Apply" })
+      ] }) }),
+      (isMultiProduct || quantity > 1) && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-neutral-700 space-y-2", children: [
+        products.map((product) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+            product.name,
+            " ",
+            quantity > 1 && `x ${quantity}`
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            (product.price * quantity).toFixed(2)
+          ] })
+        ] }, product.id)),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-semibold pt-2 border-t border-gray-200 dark:border-neutral-700", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-white", children: "Total" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            total.toFixed(2)
+          ] })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          className: "w-full",
+          size: "lg",
+          disabled: isLoading || showNewCardForm && !!stripePublishableKey,
+          children: isLoading ? "Processing..." : buttonText
+        }
+      ),
+      (termsUrl || privacyUrl) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: [
+        "By confirming, you agree to our",
+        " ",
+        termsUrl && /* @__PURE__ */ jsx("a", { href: termsUrl, className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300", children: "Terms of Service" }),
+        termsUrl && privacyUrl && " and ",
+        privacyUrl && /* @__PURE__ */ jsx("a", { href: privacyUrl, className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300", children: "Privacy Policy" }),
+        "."
+      ] }),
+      cancelUrl && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("a", { href: cancelUrl, className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Cancel" }) })
+    ] }),
+    needsEmail && !stripePublishableKey && error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error })
+  ] });
+}
 
-export { AddPaymentMethodForm, BillingContent };
-//# sourceMappingURL=chunk-3AQCVPQI.js.map
-//# sourceMappingURL=chunk-3AQCVPQI.js.map
+export { AddPaymentMethodForm, BillingContent, PaymentForm2 as PaymentForm };
+//# sourceMappingURL=chunk-SRPYYSJZ.js.map
+//# sourceMappingURL=chunk-SRPYYSJZ.js.map