@blocklet/payment-react 1.19.2 → 1.19.4

package/es/components/payment-beneficiaries.d.ts

@@ -12,6 +12,7 @@ interface BenefitsProps {
     currency: {
         symbol: string;
         decimal: number;
+        maximum_precision?: number;
     };
     totalAmount?: string;
 }

package/es/components/payment-beneficiaries.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Stack, Typography } from "@mui/material";
-import { BN, fromUnitToToken } from "@ocap/util";
+import { BN } from "@ocap/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import DID from "@arcblock/ux/lib/DID";
+import { formatBNStr } from "../libs/util.js";
 export default function PaymentBeneficiaries({ data, currency, totalAmount = "0" }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
@@ -20,7 +22,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
       return /* @__PURE__ */ jsxs(
         Stack,
         {
-          direction: { xs: "column", sm: "row" },
+          direction: "row",
           sx: {
             alignItems: "center",
             justifyContent: "space-between",
@@ -42,7 +44,15 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                   width: { xs: "100%", sm: "auto" }
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Avatar, { src: item.avatar, alt: item.name, sx: { width: 32, height: 32 }, variant: "square" }),
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      src: item.avatar,
+                      alt: item.name,
+                      sx: { width: 32, height: 32 },
+                      variant: item.type === "dapp" ? "square" : "circular"
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(Box, { children: [
                     /* @__PURE__ */ jsx(
                       Typography,
@@ -63,14 +73,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Typography,
+                      DID,
                       {
-                        variant: "caption",
-                        sx: {
-                          color: "text.secondary",
-                          cursor: "pointer"
-                        },
-                        children: item.address
+                        did: item.address,
+                        compact: true,
+                        responsive: false,
+                        sx: { whiteSpace: "nowrap", fontSize: "0.875rem !important" },
+                        copyable: false
                       }
                     )
                   ] })
@@ -87,7 +96,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                 },
                 children: [
                   /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
-                    fromUnitToToken(amount, currency.decimal),
+                    formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6),
                     " ",
                     currency.symbol
                   ] }),
@@ -96,7 +105,8 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                     {
                       variant: "caption",
                       sx: {
-                        color: "text.secondary"
+                        color: "text.secondary",
+                        fontSize: "0.875rem"
                       },
                       children: [
                         Number(item.percent),

package/es/payment/form/index.js

@@ -215,6 +215,8 @@ export default function PaymentForm({
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
+  const customerName = useWatch({ control, name: "customer_name" });
+  const customerEmail = useWatch({ control, name: "customer_email" });
   const afterUserLoggedIn = useMemoizedFn(() => {
     handleSubmit(onFormSubmit, onFormError)();
   });
@@ -234,7 +236,25 @@ export default function PaymentForm({
   const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = !!session?.user;
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === "stripe") {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === "required") {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
   const handleConnected = async () => {
     setState({ paying: true });
     try {
@@ -427,6 +447,9 @@ export default function PaymentForm({
     setState({ submitting: false });
   };
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
       errorRef.current.scrollIntoView({ behavior: "smooth" });
     }

package/lib/components/payment-beneficiaries.d.ts

@@ -12,6 +12,7 @@ interface BenefitsProps {
     currency: {
         symbol: string;
         decimal: number;
+        maximum_precision?: number;
     };
     totalAmount?: string;
 }

package/lib/components/payment-beneficiaries.js

@@ -8,6 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _util2 = require("../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PaymentBeneficiaries({
   data,
   currency,
@@ -29,10 +32,7 @@ function PaymentBeneficiaries({
     }), data.map(item => {
       const amount = item.amount || (totalAmount ? new _util.BN(totalAmount).mul(new _util.BN(Number(item.percent))).div(new _util.BN(100)).toString() : "0");
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: {
-          xs: "column",
-          sm: "row"
-        },
+        direction: "row",
         sx: {
           alignItems: "center",
           justifyContent: "space-between",
@@ -60,7 +60,7 @@ function PaymentBeneficiaries({
               width: 32,
               height: 32
             },
-            variant: "square"
+            variant: item.type === "dapp" ? "square" : "circular"
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               variant: "subtitle2",
@@ -76,13 +76,15 @@ function PaymentBeneficiaries({
                 }
               },
               children: item.name
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              variant: "caption",
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              did: item.address,
+              compact: true,
+              responsive: false,
               sx: {
-                color: "text.secondary",
-                cursor: "pointer"
+                whiteSpace: "nowrap",
+                fontSize: "0.875rem !important"
               },
-              children: item.address
+              copyable: false
             })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -99,11 +101,12 @@ function PaymentBeneficiaries({
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "subtitle2",
-            children: [(0, _util.fromUnitToToken)(amount, currency.decimal), " ", currency.symbol]
+            children: [(0, _util2.formatBNStr)(amount, currency.decimal, currency?.maximum_precision ?? 6), " ", currency.symbol]
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "caption",
             sx: {
-              color: "text.secondary"
+              color: "text.secondary",
+              fontSize: "0.875rem"
             },
             children: [Number(item.percent), "%"]
           })]

package/lib/payment/form/index.js

@@ -246,6 +246,14 @@ function PaymentForm({
     control,
     name: "payment_currency"
   });
+  const customerName = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_name"
+  });
+  const customerEmail = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_email"
+  });
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
     handleSubmit(onFormSubmit, onFormError)();
   });
@@ -267,7 +275,25 @@ function PaymentForm({
   const paymentCurrency = currencies.find(x => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = !!session?.user;
+  const showForm = (0, _react.useMemo)(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === "stripe") {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === "required") {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
   const handleConnected = async () => {
     setState({
       paying: true
@@ -500,6 +526,9 @@ function PaymentForm({
     });
   };
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !(0, _isEmpty.default)(errors) && isMobile) {
       errorRef.current.scrollIntoView({
         behavior: "smooth"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.2",
+  "version": "1.19.4",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^3.0.1",
-    "@arcblock/ux": "^3.0.1",
-    "@arcblock/ws": "^1.20.14",
-    "@blocklet/theme": "^3.0.1",
-    "@blocklet/ui-react": "^3.0.1",
+    "@arcblock/did-connect": "^3.0.24",
+    "@arcblock/ux": "^3.0.24",
+    "@arcblock/ws": "^1.20.15",
+    "@blocklet/theme": "^3.0.24",
+    "@blocklet/ui-react": "^3.0.24",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.20.14",
+    "@ocap/util": "^1.20.15",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.2",
+    "@blocklet/payment-types": "1.19.4",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "741c897204afc412721a942201516932bff59235"
+  "gitHead": "ced79cc9e205a344b6fdce2f43ac8d27bb37f5f4"
 }

package/src/components/payment-beneficiaries.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/indent */
 import { Avatar, Box, Stack, Typography } from '@mui/material';
-import { BN, fromUnitToToken } from '@ocap/util';
+import { BN } from '@ocap/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DID from '@arcblock/ux/lib/DID';
+import { formatBNStr } from '../libs/util';
 
 export interface TBeneficiary {
   name: string;
@@ -18,6 +20,7 @@ interface BenefitsProps {
   currency: {
     symbol: string;
     decimal: number;
+    maximum_precision?: number;
   };
   totalAmount?: string;
 }
@@ -45,7 +48,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
         return (
           <Stack
             key={item.address}
-            direction={{ xs: 'column', sm: 'row' }}
+            direction="row"
             sx={{
               alignItems: 'center',
               justifyContent: 'space-between',
@@ -64,7 +67,12 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                 alignItems: 'center',
                 width: { xs: '100%', sm: 'auto' },
               }}>
-              <Avatar src={item.avatar} alt={item.name} sx={{ width: 32, height: 32 }} variant="square" />
+              <Avatar
+                src={item.avatar}
+                alt={item.name}
+                sx={{ width: 32, height: 32 }}
+                variant={item.type === 'dapp' ? 'square' : 'circular'}
+              />
               <Box>
                 <Typography
                   variant="subtitle2"
@@ -81,14 +89,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                   }}>
                   {item.name}
                 </Typography>
-                <Typography
-                  variant="caption"
-                  sx={{
-                    color: 'text.secondary',
-                    cursor: 'pointer',
-                  }}>
-                  {item.address}
-                </Typography>
+                <DID
+                  did={item.address}
+                  compact
+                  responsive={false}
+                  sx={{ whiteSpace: 'nowrap', fontSize: '0.875rem !important' }}
+                  copyable={false}
+                />
               </Box>
             </Stack>
             <Stack
@@ -98,12 +105,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                 mt: { xs: 1, sm: 0 },
               }}>
               <Typography variant="subtitle2">
-                {fromUnitToToken(amount, currency.decimal)} {currency.symbol}
+                {formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6)} {currency.symbol}
               </Typography>
               <Typography
                 variant="caption"
                 sx={{
                   color: 'text.secondary',
+                  fontSize: '0.875rem',
                 }}>
                 {Number(item.percent)}%
               </Typography>

package/src/payment/form/index.tsx

@@ -315,6 +315,8 @@ export default function PaymentForm({
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
   const paymentCurrencyId = useWatch({ control, name: 'payment_currency' });
+  const customerName = useWatch({ control, name: 'customer_name' });
+  const customerEmail = useWatch({ control, name: 'customer_email' });
 
   // const domSize = useSize(document.body);
 
@@ -349,7 +351,25 @@ export default function PaymentForm({
   const showStake = method.type === 'arcblock' && !checkoutSession.subscription_data?.no_stake;
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
-  const showForm = !!session?.user;
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === 'stripe') {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === 'required') {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
 
   const handleConnected = async () => {
     setState({ paying: true });
@@ -563,6 +583,9 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
       errorRef.current.scrollIntoView({ behavior: 'smooth' });
     }