@blocklet/payment-react 1.19.17 → 1.19.19

package/es/payment/product-item.js

@@ -33,7 +33,7 @@ export default function ProductItem({
   }
 }) {
   const { t, locale } = useLocaleContext();
-  const { settings } = usePaymentContext();
+  const { settings, setPayable } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
@@ -48,27 +48,34 @@ export default function ProductItem({
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
   const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+  const localQuantityNum = localQuantity || 0;
   const handleQuantityChange = (newQuantity) => {
+    if (!newQuantity) {
+      setLocalQuantity(void 0);
+      setPayable(false);
+      return;
+    }
+    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
-      setLocalQuantity(newQuantity);
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+      setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
     }
   };
   const handleQuantityIncrease = () => {
-    if (localQuantity < maxQuantity) {
-      handleQuantityChange(localQuantity + 1);
+    if (localQuantityNum < maxQuantity) {
+      handleQuantityChange(localQuantityNum + 1);
     }
   };
   const handleQuantityDecrease = () => {
-    if (localQuantity > minQuantity) {
-      handleQuantityChange(localQuantity - 1);
+    if (localQuantityNum > minQuantity) {
+      handleQuantityChange(localQuantityNum - 1);
     }
   };
   const handleQuantityInputChange = (event) => {
-    const value = parseInt(event.target.value, 10);
+    const value = parseInt(event.target.value || "0", 10);
     if (!Number.isNaN(value)) {
       handleQuantityChange(value);
     }
@@ -76,7 +83,7 @@ export default function ProductItem({
   const formatCreditInfo = () => {
     if (!isCreditProduct) return null;
     const isRecurring = item.price.type === "recurring";
-    const totalCredit = formatNumber(creditAmount * localQuantity);
+    const totalCredit = formatNumber(creditAmount * (localQuantity || 0));
     let message = "";
     if (isRecurring) {
       message = t("payment.checkout.credit.recurringInfo", {
@@ -106,7 +113,7 @@ export default function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
-  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantityNum, locale);
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -215,7 +222,7 @@ export default function ProductItem({
                       {
                         size: "small",
                         onClick: handleQuantityDecrease,
-                        disabled: localQuantity <= minQuantity,
+                        disabled: localQuantityNum <= minQuantity,
                         sx: { minWidth: 32, width: 32, height: 32 },
                         children: /* @__PURE__ */ jsx(Remove, { fontSize: "small" })
                       }
@@ -231,7 +238,7 @@ export default function ProductItem({
                           htmlInput: {
                             min: minQuantity,
                             max: maxQuantity,
-                            style: { textAlign: "center", padding: "4px" }
+                            style: { textAlign: "center", padding: "4px", minWidth: 80 }
                           }
                         }
                       }
@@ -241,7 +248,7 @@ export default function ProductItem({
                       {
                         size: "small",
                         onClick: handleQuantityIncrease,
-                        disabled: localQuantity >= maxQuantity,
+                        disabled: localQuantityNum >= maxQuantity,
                         sx: { minWidth: 32, width: 32, height: 32 },
                         children: /* @__PURE__ */ jsx(Add, { fontSize: "small" })
                       }

package/lib/checkout/form.js

@@ -62,11 +62,11 @@ function CheckoutForm({
       window.history.replaceState(null, "", (0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}?${(0, _util.mergeExtraParams)(extraParams)}`));
     }
   }, [type, mode, data, extraParams]);
-  const handlePaid = () => {
+  const handlePaid = result => {
     setState({
       completed: true
     });
-    onPaid?.(data);
+    onPaid?.(result);
   };
   const handleError = err => {
     console.error(err);

package/lib/components/auto-topup/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import type { AutoRechargeConfig } from '@blocklet/payment-types';
+export interface AutoTopupCardProps {
+    currencyId: string;
+    onConfigChange?: (config: AutoRechargeConfig) => void;
+    sx?: SxProps;
+    mode?: 'default' | 'simple' | 'custom';
+    children?: (openModal: () => void, config: AutoRechargeConfig | null, paymentData: {
+        paymentInfo: any;
+        balanceInfo: any;
+    } | null, loading: boolean) => React.ReactNode;
+}
+export default function AutoTopupCard({ currencyId, onConfigChange, sx, mode, children, }: AutoTopupCardProps): JSX.Element | null;

package/lib/components/auto-topup/index.js

@@ -0,0 +1,451 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = AutoTopupCard;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _reactRouterDom = require("react-router-dom");
+var _ufo = require("ufo");
+var _ahooks = require("ahooks");
+var _util = require("../../libs/util");
+var _navigation = require("../../libs/navigation");
+var _payment = require("../../contexts/payment");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _modal = _interopRequireDefault(require("./modal"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const fetchConfig = async (customerId, currencyId) => {
+  const {
+    data
+  } = await _api.default.get(`/api/auto-recharge-configs/customer/${customerId}`, {
+    params: {
+      currency_id: currencyId
+    }
+  });
+  return data;
+};
+const fetchCurrencyBalance = async (currencyId, payerAddress) => {
+  const {
+    data
+  } = await _api.default.get("/api/customers/payer-token", {
+    params: {
+      currencyId,
+      payerAddress
+    }
+  });
+  return data;
+};
+const cardStyle = {
+  height: "100%",
+  width: "100%",
+  border: "1px solid",
+  borderColor: "divider",
+  boxShadow: 1,
+  borderRadius: 1,
+  backgroundColor: "background.default"
+};
+function AutoTopupCard({
+  currencyId,
+  onConfigChange = () => {},
+  sx = {},
+  mode = "default",
+  children = void 0
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    session
+  } = (0, _payment.usePaymentContext)();
+  const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+  const [paymentData, setPaymentData] = (0, _react.useState)(null);
+  const [quickSetupMode, setQuickSetupMode] = (0, _react.useState)(false);
+  const [expanded, setExpanded] = (0, _react.useState)(mode === "default");
+  const customerId = session?.user?.did || "";
+  const {
+    data: config,
+    loading,
+    refresh
+  } = (0, _ahooks.useRequest)(() => fetchConfig(customerId, currencyId), {
+    refreshDeps: [customerId, currencyId],
+    ready: !!customerId && !!currencyId,
+    onSuccess: data => {
+      loadPaymentInfo(data);
+    }
+  });
+  const loadPaymentInfo = (0, _react.useCallback)(async data => {
+    if (!data?.recharge_currency_id) return;
+    try {
+      const paymentMethodType = data?.paymentMethod?.type;
+      const paymentInfo = data?.payment_settings?.payment_method_options?.[paymentMethodType];
+      const balanceInfo = paymentInfo?.payer && paymentMethodType !== "stripe" ? await fetchCurrencyBalance(data.recharge_currency_id, paymentInfo.payer) : null;
+      setPaymentData({
+        paymentInfo,
+        balanceInfo
+      });
+    } catch (error) {
+      console.error("Failed to load payment info:", error);
+    }
+  }, []);
+  const handleRecharge = e => {
+    if (!paymentData?.paymentInfo?.payer) return;
+    const url = (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/recharge/${config?.recharge_currency_id}?rechargeAddress=${paymentData.paymentInfo.payer}`);
+    const link = (0, _navigation.createLink)(url, true);
+    (0, _navigation.handleNavigation)(e, link, navigate);
+  };
+  const handleConfigSuccess = newConfig => {
+    refresh();
+    onConfigChange?.(newConfig);
+    setModalOpen(false);
+    setQuickSetupMode(false);
+  };
+  const handleToggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+      sx: {
+        ...cardStyle,
+        ...sx
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardContent, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: 80
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 24
+          })
+        })
+      })
+    });
+  }
+  if (!config) {
+    return null;
+  }
+  const renderPurchaseDetails = () => {
+    const {
+      paymentInfo,
+      balanceInfo
+    } = paymentData || {};
+    if (!paymentInfo) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        sx: {
+          color: "text.secondary"
+        },
+        children: t("payment.autoTopup.notConfigured")
+      });
+    }
+    const purchaseAmount = (0, _util.formatPrice)(config.price, config.rechargeCurrency, config.price.product?.unit_label, config.quantity, true);
+    if (config?.paymentMethod?.type === "stripe") {
+      const cardBrand = (paymentInfo?.card_brand || "Card").charAt(0).toUpperCase() + (paymentInfo?.card_brand || "Card").slice(1).toLowerCase();
+      const last4 = paymentInfo?.card_last4;
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary"
+            },
+            children: [t("payment.autoTopup.purchaseAmount"), "\uFF1A"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              fontWeight: 600,
+              color: "text.primary"
+            },
+            children: purchaseAmount
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary"
+            },
+            children: [t("payment.autoTopup.paymentMethod"), "\uFF1A"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 1,
+            sx: {
+              alignItems: "center"
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CreditCard, {
+              fontSize: "small",
+              sx: {
+                color: "text.secondary"
+              }
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: "text.primary",
+                fontWeight: 500
+              },
+              children: [cardBrand, "(", last4, ")"]
+            })]
+          })]
+        })]
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      spacing: 1,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary"
+          },
+          children: [t("payment.autoTopup.purchaseAmount"), "\uFF1A"]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "text.primary"
+          },
+          children: purchaseAmount
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary"
+            },
+            children: [t("payment.autoTopup.walletBalance"), "\uFF1A"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
+            placement: "top",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.AccountBalanceWalletOutlined, {
+                sx: {
+                  fontSize: 16,
+                  color: "text.secondary"
+                }
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body2",
+                sx: {
+                  fontWeight: 600,
+                  color: "text.primary"
+                },
+                children: balanceInfo ? `${(0, _util.formatBNStr)(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--"
+              })]
+            })
+          }), balanceInfo && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+            size: "small",
+            variant: "text",
+            onClick: handleRecharge,
+            sx: {
+              color: "primary.main",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.AddOutlined, {
+              fontSize: "small"
+            }), t("payment.autoTopup.addFunds")]
+          })]
+        })
+      })]
+    });
+  };
+  const openModal = () => setModalOpen(true);
+  const renderInnerView = () => {
+    if (mode === "custom") {
+      return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: children(openModal, config, paymentData, loading)
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: ["Please provide a valid render function", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
+          children: "(openModal, config, paymentData, loading) => ReactNode"
+        })]
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+      sx: {
+        ...cardStyle,
+        ...sx
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.CardContent, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          className: "auto-topup-header",
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            borderBottom: "1px solid",
+            borderColor: "divider",
+            pb: 1.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "subtitle2",
+            sx: {
+              fontWeight: 600,
+              color: "text.primary"
+            },
+            children: t("payment.autoTopup.title")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+              size: "small",
+              onClick: openModal,
+              sx: {
+                p: 0.5,
+                color: "text.secondary",
+                "&:hover": {
+                  bgcolor: "grey.50",
+                  color: "text.primary"
+                }
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.SettingsOutlined, {
+                fontSize: "small"
+              })
+            })
+          })]
+        }), config?.enabled ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 1.5,
+          className: "auto-topup-content",
+          sx: {
+            pt: 1.5
+          },
+          children: [(() => {
+            const threshold = `${(0, _util.formatNumber)(config.threshold)} ${config.currency?.symbol || ""}`;
+            const credits = `${(0, _util.formatNumber)(Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity))} ${config.currency?.name || ""}`;
+            return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              variant: "body2",
+              sx: {
+                color: "text.secondary"
+              },
+              children: [t("payment.autoTopup.activeDescriptionWithCredits", {
+                threshold,
+                credits
+              }), mode === "simple" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                component: "span",
+                size: "small",
+                variant: "text",
+                onClick: handleToggleExpanded,
+                sx: {
+                  color: "primary.main",
+                  minWidth: "auto",
+                  ml: 1,
+                  p: 0,
+                  fontSize: "inherit",
+                  textTransform: "none",
+                  "&:hover": {
+                    backgroundColor: "transparent",
+                    textDecoration: "underline"
+                  }
+                },
+                children: expanded ? t("payment.autoTopup.hideDetails") : t("payment.autoTopup.showDetails")
+              })]
+            });
+          })(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
+            in: mode === "default" || expanded,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                bgcolor: "grey.50",
+                borderRadius: 1,
+                p: 1.5
+              },
+              children: renderPurchaseDetails()
+            })
+          })]
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "auto-topup-content",
+          sx: {
+            minHeight: 80,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            pt: 1.5,
+            gap: 2
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              textAlign: "left"
+            },
+            children: [t("payment.autoTopup.inactiveDescription", {
+              name: config?.currency?.name
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              component: "span",
+              variant: "text",
+              size: "small",
+              onClick: () => {
+                setQuickSetupMode(true);
+                setModalOpen(true);
+              },
+              sx: {
+                color: "primary.main",
+                minWidth: "auto",
+                ml: 1,
+                p: 0,
+                fontSize: "inherit",
+                textTransform: "none",
+                "&:hover": {
+                  backgroundColor: "transparent",
+                  textDecoration: "underline"
+                }
+              },
+              children: t("payment.autoTopup.setup")
+            })]
+          })
+        })]
+      })
+    });
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [renderInnerView(), modalOpen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_modal.default, {
+      open: modalOpen,
+      onClose: () => {
+        setModalOpen(false);
+        setQuickSetupMode(false);
+      },
+      currencyId,
+      onSuccess: handleConfigSuccess,
+      defaultEnabled: quickSetupMode
+    })]
+  });
+}

package/lib/components/auto-topup/modal.d.ts

@@ -0,0 +1,35 @@
+import type { AutoRechargeConfig } from '@blocklet/payment-types';
+export interface AutoTopupFormData {
+    enabled: boolean;
+    threshold: string;
+    quantity: number;
+    payment_method_id: string;
+    recharge_currency_id: string;
+    price_id: string;
+    change_payment_method?: boolean;
+    customer_name?: string;
+    customer_email?: string;
+    daily_limits: {
+        max_attempts: number;
+        max_amount: number;
+    };
+    billing_address?: {
+        country?: string;
+        state?: string;
+        line1?: string;
+        line2?: string;
+        city?: string;
+        postal_code?: string;
+    };
+}
+export interface AutoTopupModalProps {
+    open: boolean;
+    onClose: () => void;
+    customerId?: string;
+    currencyId: string;
+    onSuccess?: (config: AutoRechargeConfig) => void;
+    onError?: (error: any) => void;
+    defaultEnabled?: boolean;
+}
+export declare const waitForAutoRechargeComplete: (configId: string) => Promise<any>;
+export default function AutoTopup({ open, onClose, currencyId, onSuccess, onError, defaultEnabled, }: AutoTopupModalProps): JSX.Element;