@doujins/payments-ui 0.0.10 → 0.0.11

package/dist/index.cjs

@@ -2685,6 +2685,245 @@ var PaymentExperience = ({
     )
   ] });
 };
+var SubscriptionSuccessDialog = ({
+  open,
+  planName = "Premium Plan",
+  amountLabel = "$0.00",
+  billingPeriodLabel = "billing period",
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
+    if (!value) onClose();
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-sm text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex flex-col items-center gap-3 text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }),
+        "Subscription activated"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { className: "text-base text-muted-foreground", children: [
+        "You now have access to ",
+        planName,
+        ". Billing: ",
+        amountLabel,
+        " / ",
+        billingPeriodLabel,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "mt-6 w-full", onClick: onClose, children: "Continue" })
+  ] }) });
+};
+var useSubscriptionActions = () => {
+  const { services } = usePaymentContext();
+  const ensurePrice = (priceId) => {
+    if (!priceId) {
+      throw new Error("payments-ui: priceId is required for subscription actions");
+    }
+    return priceId;
+  };
+  const subscribeWithCard = React3.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentToken,
+      billing
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentToken,
+        processor,
+        provider,
+        email: billing.email,
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        address1: billing.address1,
+        city: billing.city,
+        state: billing.stateRegion,
+        zipCode: billing.postalCode,
+        country: billing.country
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithSavedMethod = React3.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentMethodId,
+      email
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentMethodId,
+        processor,
+        provider,
+        email
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithCCBill = React3.useCallback(
+    async ({
+      priceId,
+      email,
+      firstName,
+      lastName,
+      zipCode,
+      country,
+      processor = "ccbill"
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        email,
+        firstName,
+        lastName,
+        zipCode,
+        country,
+        processor
+      };
+      return services.subscriptions.subscribe("ccbill", payload);
+    },
+    [services]
+  );
+  const generateFlexFormUrl = React3.useCallback(
+    async ({
+      priceId,
+      firstName,
+      lastName,
+      address1,
+      city,
+      state,
+      zipCode,
+      country
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        first_name: firstName,
+        last_name: lastName,
+        address1,
+        city,
+        state,
+        zip_code: zipCode,
+        country
+      };
+      return services.subscriptions.generateFlexFormUrl(payload);
+    },
+    [services]
+  );
+  return {
+    subscribeWithCard,
+    subscribeWithSavedMethod,
+    subscribeWithCCBill,
+    generateFlexFormUrl
+  };
+};
+var SubscriptionCheckoutModal = ({
+  open,
+  onOpenChange,
+  priceId,
+  usdAmount = 0,
+  planName,
+  amountLabel,
+  billingPeriodLabel,
+  userEmail,
+  provider = "mobius",
+  onSuccess,
+  enableSolanaPay = true
+}) => {
+  const [showSuccess, setShowSuccess] = React3.useState(false);
+  const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
+  const handleClose = React3.useCallback(
+    (nextOpen) => {
+      onOpenChange(nextOpen);
+      if (!nextOpen) {
+        setShowSuccess(false);
+      }
+    },
+    [onOpenChange]
+  );
+  const ensurePrice = () => {
+    if (!priceId) {
+      throw new Error("Select a plan before subscribing.");
+    }
+    return priceId;
+  };
+  const notifySuccess = (result) => {
+    setShowSuccess(true);
+    onSuccess?.();
+    if (result && typeof window !== "undefined") {
+      console.debug("[payments-ui] subscription success", result);
+    }
+  };
+  const handleNewCardPayment = async ({ token, billing }) => {
+    await subscribeWithCard({
+      priceId: ensurePrice(),
+      provider,
+      paymentToken: token,
+      billing
+    });
+    notifySuccess();
+  };
+  const handleSavedMethodPayment = async ({ paymentMethodId }) => {
+    await subscribeWithSavedMethod({
+      priceId: ensurePrice(),
+      provider,
+      paymentMethodId,
+      email: userEmail ?? ""
+    });
+    notifySuccess();
+  };
+  const solanaSuccess = (result) => {
+    notifySuccess(result);
+    onOpenChange(false);
+  };
+  const summary = React3.useMemo(() => {
+    if (!planName && !amountLabel) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-muted/10 p-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-foreground", children: planName ?? "Selected plan" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        amountLabel ?? `$${usdAmount.toFixed(2)}`,
+        " ",
+        billingPeriodLabel ? `/ ${billingPeriodLabel}` : ""
+      ] })
+    ] });
+  }, [planName, amountLabel, billingPeriodLabel, usdAmount]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-3xl", children: [
+      !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
+        " Select a subscription plan to continue."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PaymentExperience,
+        {
+          priceId: priceId ?? "",
+          usdAmount,
+          checkoutSummary: summary,
+          onNewCardPayment: priceId ? handleNewCardPayment : void 0,
+          onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
+          enableNewCard: Boolean(priceId),
+          enableStoredMethods: Boolean(priceId),
+          enableSolanaPay: enableSolanaPay && Boolean(priceId),
+          onSolanaSuccess: solanaSuccess
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionSuccessDialog,
+      {
+        open: showSuccess,
+        onClose: () => setShowSuccess(false),
+        planName,
+        amountLabel: amountLabel ?? `$${usdAmount.toFixed(2)}`,
+        billingPeriodLabel
+      }
+    )
+  ] });
+};
 var useTokenBalance = (tokens) => {
   const { publicKey } = walletAdapterReact.useWallet();
   const { connection } = walletAdapterReact.useConnection();
@@ -3176,113 +3415,32 @@ var usePaymentStatus = (options = {}) => {
     isPending: getConfirmationStatus() === "pending"
   };
 };
-var useSubscriptionActions = () => {
-  const { services } = usePaymentContext();
-  const ensurePrice = (priceId) => {
-    if (!priceId) {
-      throw new Error("payments-ui: priceId is required for subscription actions");
-    }
-    return priceId;
-  };
-  const subscribeWithCard = React3.useCallback(
-    async ({
-      priceId,
-      processor = "nmi",
-      provider,
-      paymentToken,
-      billing
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        paymentToken,
-        processor,
-        provider,
-        email: billing.email,
-        firstName: billing.firstName,
-        lastName: billing.lastName,
-        address1: billing.address1,
-        city: billing.city,
-        state: billing.stateRegion,
-        zipCode: billing.postalCode,
-        country: billing.country
-      };
-      return services.subscriptions.subscribe("nmi", payload);
-    },
-    [services]
-  );
-  const subscribeWithSavedMethod = React3.useCallback(
-    async ({
-      priceId,
-      processor = "nmi",
-      provider,
-      paymentMethodId,
-      email
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        paymentMethodId,
-        processor,
-        provider,
-        email
-      };
-      return services.subscriptions.subscribe("nmi", payload);
-    },
-    [services]
-  );
-  const subscribeWithCCBill = React3.useCallback(
-    async ({
-      priceId,
-      email,
-      firstName,
-      lastName,
-      zipCode,
-      country,
-      processor = "ccbill"
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        email,
-        firstName,
-        lastName,
-        zipCode,
-        country,
-        processor
-      };
-      return services.subscriptions.subscribe("ccbill", payload);
-    },
-    [services]
-  );
-  const generateFlexFormUrl = React3.useCallback(
-    async ({
-      priceId,
-      firstName,
-      lastName,
-      address1,
-      city,
-      state,
-      zipCode,
-      country
-    }) => {
-      const payload = {
-        price_id: ensurePrice(priceId),
-        first_name: firstName,
-        last_name: lastName,
-        address1,
-        city,
-        state,
-        zip_code: zipCode,
-        country
-      };
-      return services.subscriptions.generateFlexFormUrl(payload);
+var useAlternativePaymentProvider = () => {
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const { generateFlexFormUrl } = useSubscriptionActions();
+  const openFlexForm = React3.useCallback(
+    async (payload) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await generateFlexFormUrl(payload);
+        if (response?.iframe_url) {
+          window.location.href = response.iframe_url;
+        } else {
+          throw new Error("Unable to launch payment provider.");
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to open payment provider.";
+        setError(message);
+        console.error("[payments-ui] failed to open alternative payment provider", err);
+      } finally {
+        setIsLoading(false);
+      }
     },
-    [services]
+    [generateFlexFormUrl]
   );
-  return {
-    subscribeWithCard,
-    subscribeWithSavedMethod,
-    subscribeWithCCBill,
-    generateFlexFormUrl
-  };
+  return { openFlexForm, isLoading, error };
 };
 
 exports.CardDetailsForm = CardDetailsForm;
@@ -3294,10 +3452,13 @@ exports.PaymentProvider = PaymentProvider;
 exports.SolanaPaymentSelector = SolanaPaymentSelector;
 exports.SolanaPaymentService = SolanaPaymentService;
 exports.StoredPaymentMethods = StoredPaymentMethods;
+exports.SubscriptionCheckoutModal = SubscriptionCheckoutModal;
 exports.SubscriptionService = SubscriptionService;
+exports.SubscriptionSuccessDialog = SubscriptionSuccessDialog;
 exports.TokenCatalog = TokenCatalog;
 exports.WalletGateway = WalletGateway;
 exports.createPaymentStore = createPaymentStore;
+exports.useAlternativePaymentProvider = useAlternativePaymentProvider;
 exports.useDirectWalletPayment = useDirectWalletPayment;
 exports.usePaymentContext = usePaymentContext;
 exports.usePaymentMethodService = usePaymentMethodService;