@omnikit-js/ui 0.9.7 → 0.9.8

package/dist/{chunk-IKBW2JFX.js → chunk-2KDIPVL3.js}

@@ -1,9 +1,189 @@
 "use client";
-import { useState } from 'react';
-import { Card, Button, Tabs } from '@marcoschwartz/lite-ui';
+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';
 
-// src/components/client/BillingContent/index.tsx
+// 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) {
@@ -35,6 +215,26 @@ async function fetchAPI(config, url, options = {}) {
     };
   }
 }
+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_");
@@ -140,6 +340,17 @@ async function updateSubscription(config, subscriptionId, newPriceId) {
   }
   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;
@@ -180,6 +391,28 @@ function BillingContent({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
+  const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false);
+  const [isRemovePaymentModalOpen, setIsRemovePaymentModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);
+  const [stripePublishableKey, setStripePublishableKey] = useState(null);
+  const [stripeLoading, setStripeLoading] = useState(false);
+  useEffect(() => {
+    async function loadStripeConfig() {
+      setStripeLoading(true);
+      try {
+        const result = await fetchPaymentConfig(actionConfig);
+        if (result.success && result.data?.publishable_key) {
+          setStripePublishableKey(result.data.publishable_key);
+        }
+      } catch (err) {
+        console.error("Failed to load Stripe config:", err);
+      } finally {
+        setStripeLoading(false);
+      }
+    }
+    loadStripeConfig();
+  }, [actionConfig]);
   const handleCancelSubscription = async () => {
     if (!subscription) return;
     setIsLoading(true);
@@ -189,6 +422,33 @@ function BillingContent({
       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");
+  };
+  const handleRemovePaymentClick = (pm) => {
+    setSelectedPaymentMethod(pm);
+    setIsRemovePaymentModalOpen(true);
+  };
+  const handleConfirmRemovePayment = async () => {
+    if (!selectedPaymentMethod) return;
+    setIsLoading(true);
+    setError(null);
+    const result = await removePaymentMethod(actionConfig, customer.id, String(selectedPaymentMethod.id));
+    if (!result.success) {
+      setError(result.error || "Failed to remove payment method");
+    } else {
+      setSuccess("Payment method removed");
+      setIsRemovePaymentModalOpen(false);
+      setSelectedPaymentMethod(null);
     }
     setIsLoading(false);
   };
@@ -213,17 +473,6 @@ function BillingContent({
     }
     setIsLoading(false);
   };
-  const handleRemovePaymentMethod = async (pmId) => {
-    setIsLoading(true);
-    setError(null);
-    const result = await removePaymentMethod(actionConfig, customer.id, String(pmId));
-    if (!result.success) {
-      setError(result.error || "Failed to remove payment method");
-    } else {
-      setSuccess("Payment method removed");
-    }
-    setIsLoading(false);
-  };
   const handleSetDefaultPaymentMethod = async (pmId) => {
     setIsLoading(true);
     setError(null);
@@ -269,7 +518,7 @@ function BillingContent({
               Button,
               {
                 variant: "secondary",
-                onClick: handleCancelSubscription,
+                onClick: () => setIsCancelModalOpen(true),
                 disabled: isLoading,
                 children: "Cancel"
               }
@@ -413,7 +662,7 @@ function BillingContent({
         /* @__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, { children: "Add Payment Method" })
+          /* @__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: [
@@ -451,21 +700,145 @@ function BillingContent({
                 {
                   variant: "secondary",
                   size: "sm",
-                  onClick: () => handleRemovePaymentMethod(pm.id),
+                  onClick: () => handleRemovePaymentClick(pm),
                   disabled: isLoading,
                   children: "Remove"
                 }
               )
             ] })
           ] }, pm.id)),
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "w-full mt-4", children: "Add Payment Method" })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              className: "w-full mt-4",
+              onClick: () => setIsAddPaymentModalOpen(true),
+              disabled: stripeLoading,
+              children: stripeLoading ? "Loading..." : "Add Payment Method"
+            }
+          )
         ] })
       ] }) })
     }
   ];
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Tabs, { tabs, defaultIndex: 0 }) });
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(Tabs, { tabs, defaultIndex: 0 }),
+    /* @__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"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 
-export { BillingContent };
-//# sourceMappingURL=chunk-IKBW2JFX.js.map
-//# sourceMappingURL=chunk-IKBW2JFX.js.map
+export { AddPaymentMethodForm, BillingContent, Modal };
+//# sourceMappingURL=chunk-2KDIPVL3.js.map
+//# sourceMappingURL=chunk-2KDIPVL3.js.map