azirid-react 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -513,6 +513,86 @@ function removeStyles() {
   document.getElementById(STYLE_ID)?.remove();
   injected = false;
 }
+function useAuthMutations(deps) {
+  const {
+    client,
+    props,
+    setUser,
+    setError,
+    updateAccessToken,
+    saveSessionTokens,
+    normalizeToken,
+    withAppContext,
+    clearSession
+  } = deps;
+  const queryClient = reactQuery.useQueryClient();
+  const loginMutation = reactQuery.useMutation({
+    mutationFn: (data) => client.post(client.paths.login, withAppContext(data)),
+    onSuccess: (data) => {
+      setUser(data.user);
+      updateAccessToken(normalizeToken(data));
+      saveSessionTokens(data);
+      setError(null);
+      props.onLoginSuccess?.(data);
+    },
+    onError: (err) => {
+      setError(err.message);
+      props.onError?.(err.message);
+    }
+  });
+  const signupMutation = reactQuery.useMutation({
+    mutationFn: (data) => {
+      const { confirmPassword: _, ...payload } = data;
+      return client.post(client.paths.signup, withAppContext({ ...payload }));
+    },
+    onSuccess: (data) => {
+      setUser(data.user);
+      updateAccessToken(normalizeToken(data));
+      saveSessionTokens(data);
+      setError(null);
+      props.onSignupSuccess?.(data);
+    },
+    onError: (err) => {
+      setError(err.message);
+      props.onError?.(err.message);
+    }
+  });
+  const logoutMutation = reactQuery.useMutation({
+    mutationFn: () => client.post(client.paths.logout),
+    onSettled: () => {
+      clearSession();
+      setError(null);
+      queryClient.clear();
+      props.onLogoutSuccess?.();
+    }
+  });
+  const refreshFn = react.useCallback(async () => {
+    try {
+      await client.refreshSession();
+      updateAccessToken(client.getAccessToken());
+    } catch (err) {
+      clearSession();
+      queryClient.clear();
+      props.onSessionExpired?.();
+      throw err;
+    }
+  }, [client, queryClient, props, updateAccessToken, clearSession]);
+  const switchTenantFn = react.useCallback(
+    async (tenantId) => {
+      await client.refreshSession({ tenantId });
+      updateAccessToken(client.getAccessToken());
+      await queryClient.invalidateQueries({ queryKey: ["azirid-access"] });
+    },
+    [client, queryClient, updateAccessToken]
+  );
+  return {
+    loginMutation,
+    signupMutation,
+    logoutMutation,
+    refreshFn,
+    switchTenantFn
+  };
+}
 var AziridContext = react.createContext(null);
 AziridContext.displayName = "AziridContext";
 var ClientContext = react.createContext(null);
@@ -545,7 +625,6 @@ function AziridProviderInner({
   client,
   props
 }) {
-  const queryClient = reactQuery.useQueryClient();
   const [user, setUser] = react.useState(null);
   const [accessToken, setAccessToken] = react.useState(null);
   const [error, setError] = react.useState(null);
@@ -683,65 +762,23 @@ function AziridProviderInner({
     (data) => data.at ?? data.accessToken,
     []
   );
-  const loginMutation = reactQuery.useMutation({
-    mutationFn: (data) => client.post(client.paths.login, withAppContext(data)),
-    onSuccess: (data) => {
-      setUser(data.user);
-      updateAccessToken(normalizeToken(data));
-      saveSessionTokens(data);
-      setError(null);
-      props.onLoginSuccess?.(data);
-    },
-    onError: (err) => {
-      setError(err.message);
-      props.onError?.(err.message);
-    }
-  });
-  const signupMutation = reactQuery.useMutation({
-    mutationFn: (data) => {
-      const { confirmPassword: _, ...payload } = data;
-      return client.post(client.paths.signup, withAppContext({ ...payload }));
-    },
-    onSuccess: (data) => {
-      setUser(data.user);
-      updateAccessToken(normalizeToken(data));
-      saveSessionTokens(data);
-      setError(null);
-      props.onSignupSuccess?.(data);
-    },
-    onError: (err) => {
-      setError(err.message);
-      props.onError?.(err.message);
-    }
-  });
-  const logoutMutation = reactQuery.useMutation({
-    mutationFn: () => client.post(client.paths.logout),
-    onSettled: () => {
-      clearSession();
-      setError(null);
-      queryClient.clear();
-      props.onLogoutSuccess?.();
-    }
+  const {
+    loginMutation,
+    signupMutation,
+    logoutMutation,
+    refreshFn,
+    switchTenantFn
+  } = useAuthMutations({
+    client,
+    props,
+    setUser,
+    setError,
+    updateAccessToken,
+    saveSessionTokens,
+    normalizeToken,
+    withAppContext,
+    clearSession
   });
-  const refreshFn = react.useCallback(async () => {
-    try {
-      await client.refreshSession();
-      updateAccessToken(client.getAccessToken());
-    } catch (err) {
-      clearSession();
-      queryClient.clear();
-      props.onSessionExpired?.();
-      throw err;
-    }
-  }, [client, queryClient, props, updateAccessToken, clearSession]);
-  const switchTenantFn = react.useCallback(
-    async (tenantId) => {
-      await client.refreshSession({ tenantId });
-      updateAccessToken(client.getAccessToken());
-      await queryClient.invalidateQueries({ queryKey: ["azirid-access"] });
-    },
-    [client, queryClient, updateAccessToken]
-  );
   const login = react.useCallback(
     (data) => loginMutation.mutate(data),
     [loginMutation]
@@ -1716,6 +1753,20 @@ function ReferralStats({ className, style }) {
   ] });
 }
 ReferralStats.displayName = "ReferralStats";
+
+// ../shared/dist/index.js
+function formatAmount(amount, currency) {
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }).format(amount / 100);
+  } catch {
+    return `${currency} ${(amount / 100).toFixed(2)}`;
+  }
+}
 function usePlans() {
   const client = useAccessClient();
   return reactQuery.useQuery({
@@ -1881,30 +1932,42 @@ var cancelStyle = {
   cursor: "pointer",
   fontFamily: "inherit"
 };
+var styles3 = {
+  featuresList: {
+    listStyle: "none",
+    padding: 0,
+    margin: "0 0 24px 0",
+    flex: 1
+  },
+  featureItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "6px 0",
+    fontSize: "14px",
+    color: "#374151"
+  },
+  checkmark: {
+    color: "#10b981",
+    fontSize: "16px",
+    fontWeight: 700,
+    flexShrink: 0
+  }
+};
+function PricingFeatureList({ features }) {
+  if (!features || features.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { style: styles3.featuresList, children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: styles3.featureItem, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.checkmark, "aria-hidden": "true", children: "\u2713" }),
+    feature
+  ] }, i)) });
+}
+PricingFeatureList.displayName = "PricingFeatureList";
 var intervalLabels = {
   MONTHLY: "/mo",
   YEARLY: "/yr",
   ONE_TIME: ""
 };
-function formatAmount(amount, currency) {
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    }).format(amount / 100);
-  } catch {
-    return `${currency} ${(amount / 100).toFixed(2)}`;
-  }
-}
-var styles3 = {
-  grid: (columns) => ({
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    gap: "24px",
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-  }),
+var styles4 = {
   card: (isCurrentPlan) => ({
     border: isCurrentPlan ? "2px solid #6366f1" : "1px solid #e5e7eb",
     borderRadius: "12px",
@@ -1955,26 +2018,6 @@ var styles3 = {
     fontSize: "16px",
     color: "#6b7280"
   },
-  featuresList: {
-    listStyle: "none",
-    padding: 0,
-    margin: "0 0 24px 0",
-    flex: 1
-  },
-  featureItem: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    padding: "6px 0",
-    fontSize: "14px",
-    color: "#374151"
-  },
-  checkmark: {
-    color: "#10b981",
-    fontSize: "16px",
-    fontWeight: 700,
-    flexShrink: 0
-  },
   selectButton: (isCurrentPlan) => ({
     width: "100%",
     padding: "12px 24px",
@@ -1986,11 +2029,46 @@ var styles3 = {
     fontWeight: 600,
     cursor: isCurrentPlan ? "default" : "pointer",
     transition: "background-color 0.15s"
+  })
+};
+function PricingCard({
+  plan,
+  isCurrentPlan,
+  isCheckoutPending,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles4.card(isCurrentPlan), children: [
+    isCurrentPlan && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.currentBadge, children: "Current Plan" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles4.planName, children: plan.name }),
+    plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles4.planDescription, children: plan.description }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles4.priceRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.priceAmount, children: formatAmount(plan.amount, plan.currency) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.priceInterval, children: intervalLabels[plan.interval] })
+    ] }),
+    plan.features && plan.features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(PricingFeatureList, { features: plan.features }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(plan),
+        disabled: isCurrentPlan || isCheckoutPending,
+        style: {
+          ...styles4.selectButton(isCurrentPlan),
+          ...isCheckoutPending && !isCurrentPlan ? { opacity: 0.6 } : {}
+        },
+        children: isCurrentPlan ? "Current Plan" : "Subscribe"
+      }
+    )
+  ] });
+}
+PricingCard.displayName = "PricingCard";
+var styles5 = {
+  grid: (columns) => ({
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: "24px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
   }),
-  skeleton: {
-    backgroundColor: "#f3f4f6",
-    borderRadius: "12px"
-  },
   skeletonCard: {
     border: "1px solid #e5e7eb",
     borderRadius: "12px",
@@ -2092,8 +2170,8 @@ function ProviderSelectModal({
   onSelect,
   onClose
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles3.modalTitle, children: "Select payment method" }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Select payment method" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2121,17 +2199,22 @@ function ProviderSelectModal({
       },
       p.provider
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles3.closeButton, onClick: onClose, children: "Cancel" })
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles5.closeButton, onClick: onClose, children: "Cancel" })
   ] }) });
 }
+var intervalLabels2 = {
+  MONTHLY: "/mo",
+  YEARLY: "/yr",
+  ONE_TIME: ""
+};
 function TransferModal({
   data,
   onClose
 }) {
   const bankDetails = data.bankDetails;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles3.modalTitle, children: "Manual Transfer" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles3.modalSubtitle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Manual Transfer" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles5.modalSubtitle, children: [
       "Transfer the amount below to subscribe to",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: data.plan?.name })
@@ -2148,7 +2231,7 @@ function TransferModal({
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: data.plan ? formatAmount(data.plan.amount, data.plan.currency) : "" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: data.plan?.interval ? intervalLabels[data.plan.interval] ?? "" : "" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: data.plan?.interval ? intervalLabels2[data.plan.interval] ?? "" : "" })
         ]
       }
     ),
@@ -2165,12 +2248,12 @@ function TransferModal({
           children: "Bank Details"
         }
       ),
-      Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.bankDetailRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.bankDetailLabel, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.bankDetailValue, children: value })
+      Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.bankDetailRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.bankDetailLabel, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.bankDetailValue, children: value })
       ] }, key))
     ] }),
-    data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles3.instructions, children: data.transferInstructions }),
+    data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.instructions, children: data.transferInstructions }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
@@ -2182,7 +2265,7 @@ function TransferModal({
         children: "After completing the transfer, submit your proof of payment. Your subscription will be activated once the transfer is verified."
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles3.closeButton, onClick: onClose, children: "Close" })
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles5.closeButton, onClick: onClose, children: "Close" })
   ] }) });
 }
 function PricingTable({
@@ -2233,12 +2316,12 @@ function PricingTable({
     checkout({ planId: plan.id, provider, successUrl, cancelUrl });
   };
   if (plansLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles3.grid(columns), ...style }, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.skeletonCard, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles5.grid(columns), ...style }, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.skeletonCard, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           style: {
-            ...styles3.skeletonLine,
+            ...styles5.skeletonLine,
             width: "60%",
             height: "20px"
           }
@@ -2248,7 +2331,7 @@ function PricingTable({
         "div",
         {
           style: {
-            ...styles3.skeletonLine,
+            ...styles5.skeletonLine,
             width: "80%",
             height: "14px"
           }
@@ -2258,7 +2341,7 @@ function PricingTable({
         "div",
         {
           style: {
-            ...styles3.skeletonLine,
+            ...styles5.skeletonLine,
             width: "40%",
             height: "36px",
             marginTop: "8px"
@@ -2269,7 +2352,7 @@ function PricingTable({
         "div",
         {
           style: {
-            ...styles3.skeletonLine,
+            ...styles5.skeletonLine,
             width: "90%",
             height: "14px"
           }
@@ -2280,7 +2363,7 @@ function PricingTable({
         "div",
         {
           style: {
-            ...styles3.skeletonLine,
+            ...styles5.skeletonLine,
             width: "100%",
             height: "44px",
             marginTop: "16px"
@@ -2295,35 +2378,19 @@ function PricingTable({
       "div",
       {
         className,
-        style: { ...styles3.grid(columns), ...style },
+        style: { ...styles5.grid(columns), ...style },
         children: sortedPlans.map((plan) => {
           const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.card(isCurrentPlan), children: [
-            isCurrentPlan && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.currentBadge, children: "Current Plan" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles3.planName, children: plan.name }),
-            plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles3.planDescription, children: plan.description }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.priceRow, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.priceAmount, children: formatAmount(plan.amount, plan.currency) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.priceInterval, children: intervalLabels[plan.interval] })
-            ] }),
-            plan.features && plan.features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { style: styles3.featuresList, children: plan.features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: styles3.featureItem, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.checkmark, "aria-hidden": "true", children: "\u2713" }),
-              feature
-            ] }, i)) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => handleSelect(plan),
-                disabled: isCurrentPlan || checkoutPending,
-                style: {
-                  ...styles3.selectButton(isCurrentPlan),
-                  ...checkoutPending && !isCurrentPlan ? { opacity: 0.6 } : {}
-                },
-                children: isCurrentPlan ? "Current Plan" : "Subscribe"
-              }
-            )
-          ] }, plan.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PricingCard,
+            {
+              plan,
+              isCurrentPlan,
+              isCheckoutPending: checkoutPending,
+              onSelect: handleSelect
+            },
+            plan.id
+          );
         })
       }
     ),
@@ -2409,126 +2476,62 @@ var PROVIDER_ICONS2 = {
   NUVEI: "\u{1F4B3}",
   MANUAL_TRANSFER: "\u{1F3E6}"
 };
-function formatAmount2(amount, currency) {
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    }).format(amount / 100);
-  } catch {
-    return `${currency} ${(amount / 100).toFixed(2)}`;
-  }
-}
-function PayButton({
-  planId,
-  intentId,
-  successUrl,
-  cancelUrl,
-  className,
-  style,
-  children,
-  disabled,
-  onSuccess,
-  onError,
-  onProviderSelect
-}) {
-  const messages = useMessages();
-  const billing = messages?.billing;
-  const [showProviderModal, setShowProviderModal] = react.useState(false);
-  const [showTransferModal, setShowTransferModal] = react.useState(false);
-  const [transferData, setTransferData] = react.useState(null);
-  const [payphoneData, setPayphoneData] = react.useState(null);
-  const { data: providers, isLoading: providersLoading } = usePaymentProviders();
-  const { checkout, isPending } = useCheckout({
-    redirectOnSuccess: true,
-    onSuccess: (data) => {
-      if (data.provider === "MANUAL_TRANSFER") {
-        setTransferData(data);
-        setShowTransferModal(true);
-        setShowProviderModal(false);
-      } else if (data.provider === "PAYPHONE" && data.widgetConfig) {
-        setPayphoneData(data);
-        setShowProviderModal(false);
-      }
-      onSuccess?.(data);
-    },
-    onError
-  });
-  const handleClick = () => {
-    if (!providers || providers.length === 0) return;
-    if (providers.length === 1) {
-      doCheckout(providers[0].provider);
-    } else {
-      setShowProviderModal(true);
-    }
-  };
-  const doCheckout = (provider) => {
-    onProviderSelect?.(provider);
-    checkout({
-      planId,
-      intentId,
-      provider,
-      successUrl,
-      cancelUrl
-    });
-  };
-  const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className,
-        style: {
-          padding: "10px 24px",
-          fontSize: "14px",
-          fontWeight: 600,
-          color: "#fff",
-          backgroundColor: isDisabled ? "#9ca3af" : "#111827",
-          border: "none",
-          borderRadius: "8px",
-          cursor: isDisabled ? "not-allowed" : "pointer",
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          ...style
-        },
-        onClick: handleClick,
-        disabled: isDisabled,
-        children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
-      }
-    ),
-    showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-      ProviderModal,
-      {
-        providers,
-        isPending,
-        onSelect: doCheckout,
-        onClose: () => setShowProviderModal(false),
-        labels: billing
-      }
-    ),
-    showTransferModal && transferData && /* @__PURE__ */ jsxRuntime.jsx(
-      TransferModal2,
-      {
-        data: transferData,
-        onClose: () => {
-          setShowTransferModal(false);
-          setTransferData(null);
-        },
-        labels: billing
-      }
-    ),
-    payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
-      PayphoneModal,
-      {
-        config: payphoneData.widgetConfig,
-        successUrl,
-        onClose: () => setPayphoneData(null)
-      }
-    )
-  ] });
-}
+var modalStyles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  card: {
+    backgroundColor: "#fff",
+    borderRadius: "12px",
+    padding: "24px",
+    maxWidth: "420px",
+    width: "90%",
+    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: 700,
+    color: "#111827",
+    margin: "0 0 20px 0",
+    textAlign: "center"
+  },
+  providerButton: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    padding: "12px 16px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    backgroundColor: "#fff",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#111827",
+    transition: "background-color 0.15s",
+    fontFamily: "inherit"
+  },
+  cancelButton: {
+    display: "block",
+    width: "100%",
+    marginTop: "16px",
+    padding: "10px",
+    border: "none",
+    borderRadius: "8px",
+    backgroundColor: "#f3f4f6",
+    color: "#6b7280",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  }
+};
 function ProviderModal({
   providers,
   isPending,
@@ -2566,7 +2569,7 @@ function TransferModal2({
   const bankDetails = data.bankDetails;
   const plan = data.plan;
   const intent = data.intent;
-  const displayAmount = plan ? formatAmount2(plan.amount, plan.currency) : intent ? formatAmount2(intent.amount, intent.currency) : "";
+  const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: modalStyles.title, children: labels?.bankTransfer ?? "Bank Transfer" }),
     displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2646,62 +2649,114 @@ function TransferModal2({
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: "Close" })
   ] }) });
 }
-var modalStyles = {
-  overlay: {
-    position: "fixed",
-    inset: 0,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 9999,
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  },
-  card: {
-    backgroundColor: "#fff",
-    borderRadius: "12px",
-    padding: "24px",
-    maxWidth: "420px",
-    width: "90%",
-    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
-  },
-  title: {
-    fontSize: "18px",
-    fontWeight: 700,
-    color: "#111827",
-    margin: "0 0 20px 0",
-    textAlign: "center"
-  },
-  providerButton: {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    padding: "12px 16px",
-    border: "1px solid #e5e7eb",
-    borderRadius: "8px",
-    backgroundColor: "#fff",
-    cursor: "pointer",
-    fontSize: "14px",
-    fontWeight: 500,
-    color: "#111827",
-    transition: "background-color 0.15s",
-    fontFamily: "inherit"
-  },
-  cancelButton: {
-    display: "block",
-    width: "100%",
-    marginTop: "16px",
-    padding: "10px",
-    border: "none",
-    borderRadius: "8px",
-    backgroundColor: "#f3f4f6",
-    color: "#6b7280",
-    fontSize: "14px",
-    fontWeight: 500,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  }
-};
+function PayButton({
+  planId,
+  intentId,
+  successUrl,
+  cancelUrl,
+  className,
+  style,
+  children,
+  disabled,
+  onSuccess,
+  onError,
+  onProviderSelect
+}) {
+  const messages = useMessages();
+  const billing = messages?.billing;
+  const [showProviderModal, setShowProviderModal] = react.useState(false);
+  const [showTransferModal, setShowTransferModal] = react.useState(false);
+  const [transferData, setTransferData] = react.useState(null);
+  const [payphoneData, setPayphoneData] = react.useState(null);
+  const { data: providers, isLoading: providersLoading } = usePaymentProviders();
+  const { checkout, isPending } = useCheckout({
+    redirectOnSuccess: true,
+    onSuccess: (data) => {
+      if (data.provider === "MANUAL_TRANSFER") {
+        setTransferData(data);
+        setShowTransferModal(true);
+        setShowProviderModal(false);
+      } else if (data.provider === "PAYPHONE" && data.widgetConfig) {
+        setPayphoneData(data);
+        setShowProviderModal(false);
+      }
+      onSuccess?.(data);
+    },
+    onError
+  });
+  const handleClick = () => {
+    if (!providers || providers.length === 0) return;
+    if (providers.length === 1) {
+      doCheckout(providers[0].provider);
+    } else {
+      setShowProviderModal(true);
+    }
+  };
+  const doCheckout = (provider) => {
+    onProviderSelect?.(provider);
+    checkout({
+      planId,
+      intentId,
+      provider,
+      successUrl,
+      cancelUrl
+    });
+  };
+  const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className,
+        style: {
+          padding: "10px 24px",
+          fontSize: "14px",
+          fontWeight: 600,
+          color: "#fff",
+          backgroundColor: isDisabled ? "#9ca3af" : "#111827",
+          border: "none",
+          borderRadius: "8px",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          ...style
+        },
+        onClick: handleClick,
+        disabled: isDisabled,
+        children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
+      }
+    ),
+    showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      ProviderModal,
+      {
+        providers,
+        isPending,
+        onSelect: doCheckout,
+        onClose: () => setShowProviderModal(false),
+        labels: billing
+      }
+    ),
+    showTransferModal && transferData && /* @__PURE__ */ jsxRuntime.jsx(
+      TransferModal2,
+      {
+        data: transferData,
+        onClose: () => {
+          setShowTransferModal(false);
+          setTransferData(null);
+        },
+        labels: billing
+      }
+    ),
+    payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
+      PayphoneModal,
+      {
+        config: payphoneData.widgetConfig,
+        successUrl,
+        onClose: () => setPayphoneData(null)
+      }
+    )
+  ] });
+}
 function usePayphoneConfirm(options) {
   const client = useAccessClient();
   return reactQuery.useMutation({
@@ -2767,7 +2822,7 @@ var statusConfig = {
   UNPAID: { bg: "#fee2e2", color: "#991b1b", label: "Unpaid" },
   INCOMPLETE: { bg: "#f3f4f6", color: "#6b7280", label: "Incomplete" }
 };
-var styles4 = {
+var styles6 = {
   badge: {
     display: "inline-flex",
     alignItems: "center",
@@ -2796,7 +2851,7 @@ var styles4 = {
 function SubscriptionBadge({ className, style }) {
   const { data: subscription, isLoading } = useSubscription();
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { ...styles4.skeleton, ...style } });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { ...styles6.skeleton, ...style } });
   }
   if (!subscription) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2804,7 +2859,7 @@ function SubscriptionBadge({ className, style }) {
       {
         className,
         style: {
-          ...styles4.badge,
+          ...styles6.badge,
           backgroundColor: "#f3f4f6",
           color: "#6b7280",
           ...style
@@ -2819,13 +2874,13 @@ function SubscriptionBadge({ className, style }) {
     {
       className,
       style: {
-        ...styles4.badge,
+        ...styles6.badge,
         backgroundColor: config.bg,
         color: config.color,
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.dot(config.color), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles6.dot(config.color), "aria-hidden": "true" }),
         subscription.plan.name,
         " \xB7 ",
         config.label
@@ -2859,19 +2914,7 @@ function formatDate2(dateStr) {
     return dateStr;
   }
 }
-function formatAmount3(amount, currency) {
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    }).format(amount / 100);
-  } catch {
-    return `${currency} ${(amount / 100).toFixed(2)}`;
-  }
-}
-var styles5 = {
+var styles7 = {
   container: {
     border: "1px solid #e5e7eb",
     borderRadius: "12px",
@@ -2940,41 +2983,41 @@ var styles5 = {
 function InvoiceList({ className, style }) {
   const { data: invoices, isLoading } = useInvoices();
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles5.container, ...style }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.header, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles5.skeleton, width: "100px", height: "18px" } }) }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles7.container, ...style }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles7.header, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles7.skeleton, width: "100px", height: "18px" } }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: { ...styles5.skeleton, width: "100%", height: "16px", marginBottom: "16px" }
+          style: { ...styles7.skeleton, width: "100%", height: "16px", marginBottom: "16px" }
         },
         i
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles5.container, ...style }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.header, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles5.title, children: "Invoices" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: styles5.table, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles7.container, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles7.header, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles7.title, children: "Invoices" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: styles7.table, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles5.th, children: "Date" }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles5.th, children: "Amount" }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles5.th, children: "Status" }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles5.th, children: "Invoice" })
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Date" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Amount" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Invoice" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-        (!invoices || invoices.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style: styles5.emptyRow, children: "No invoices yet." }) }),
+        (!invoices || invoices.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style: styles7.emptyRow, children: "No invoices yet." }) }),
         invoices?.map((invoice) => {
           const sc = statusColors2[invoice.status];
           return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles5.td, children: formatDate2(invoice.createdAt) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles5.td, children: formatAmount3(invoice.amount, invoice.currency) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles5.td, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.badge(sc.bg, sc.color), children: invoice.status }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles5.td, children: invoice.invoiceUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: formatDate2(invoice.createdAt) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: formatAmount(invoice.amount, invoice.currency) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles7.badge(sc.bg, sc.color), children: invoice.status }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: invoice.invoiceUrl ? /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
                 href: invoice.invoiceUrl,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                style: styles5.link,
+                style: styles7.link,
                 children: "View"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d1d5db" }, children: "\u2014" }) })
@@ -3257,6 +3300,17 @@ function useSwitchTenant() {
   };
   return { switchTenant };
 }
+function createMutationHook(config) {
+  return function useGeneratedMutation(options) {
+    const client = useAccessClient();
+    return reactQuery.useMutation({
+      mutationKey: config.mutationKey,
+      mutationFn: (input) => config.mutationFn(client, input),
+      onSuccess: options?.onSuccess,
+      onError: options?.onError
+    });
+  };
+}
 function zodToFieldErrors(zodError) {
   return zodError.issues.map((issue) => ({
     field: issue.path.join("."),
@@ -3313,7 +3367,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.7.0";
+var SDK_VERSION = "0.8.0";
 
 exports.AziridProvider = AziridProvider;
 exports.BASE_PATHS = BASE_PATHS;
@@ -3334,6 +3388,7 @@ exports.changePasswordSchema = changePasswordSchema;
 exports.cn = cn;
 exports.createAccessClient = createAccessClient;
 exports.createLoginSchema = createLoginSchema;
+exports.createMutationHook = createMutationHook;
 exports.createSignupSchema = createSignupSchema;
 exports.en = en;
 exports.es = es;