@blocklet/payment-react 1.18.41 → 1.18.43

package/es/payment/form/address.js

@@ -100,7 +100,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
   }
   if (stripe) {
     return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
-      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
       /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
         FormInput,
         {

package/es/payment/form/index.js

@@ -61,7 +61,7 @@ export const hasDidWallet = (user) => {
   return connected.some((x) => x.provider === "wallet");
 };
 const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
-  const { preferExisting = true } = options;
+  const { preferExisting = true, shouldValidate = false } = options;
   const basicFields = {
     customer_name: userInfo.name || userInfo.fullName,
     customer_email: userInfo.email,
@@ -81,7 +81,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
   const allFields = { ...addressFields, ...basicFields };
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split(".")[0]]) {
-      setValue(field, value);
+      setValue(field, value, { shouldValidate });
     }
   });
 };
@@ -112,7 +112,8 @@ export default function PaymentForm({
     getValues,
     setValue,
     handleSubmit,
-    formState: { errors }
+    formState: { errors },
+    trigger
   } = useFormContext();
   const errorRef = useRef(null);
   const quantityInventoryStatus = useMemo(() => {
@@ -150,8 +151,8 @@ export default function PaymentForm({
   const mergeUserInfo = (customerInfo, userInfo) => {
     return {
       ...userInfo || {},
-      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
-      fullName: customerInfo?.name || userInfo?.fullName,
+      name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
       email: customerInfo?.email || userInfo?.email,
       phone: customerInfo?.phone || userInfo?.phone,
       address: {
@@ -209,20 +210,15 @@ export default function PaymentForm({
         );
       }
     };
+    if (state.submitting) {
+      return;
+    }
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
   const afterUserLoggedIn = useMemoizedFn(() => {
-    if (hasDidWallet(session.user) || skipBindWallet) {
-      handleSubmit(onFormSubmit, onFormError)();
-    } else {
-      session.bindWallet(() => {
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2e3);
-      });
-    }
+    handleSubmit(onFormSubmit, onFormError)();
   });
   const payee = getStatementDescriptor(checkoutSession.line_items);
   let buttonText = "";
@@ -241,7 +237,6 @@ 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 skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     setState({ paying: true });
     try {
@@ -268,8 +263,10 @@ export default function PaymentForm({
       const userInfo = mergeUserInfo(profile, session?.user);
       setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled
+        showPhone: checkoutSession.phone_number_collection?.enabled,
+        shouldValidate: true
       });
+      await trigger();
     }
   };
   const handleFastCheckoutConfirm = async () => {
@@ -414,19 +411,7 @@ export default function PaymentForm({
       errorRef.current.scrollIntoView({ behavior: "smooth" });
     }
     if (session?.user) {
-      if (skipBindWallet) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      if (hasDidWallet(session.user)) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      session.bindWallet(() => {
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2e3);
-      });
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();

package/lib/payment/form/address.js

@@ -133,7 +133,7 @@ function AddressForm({
         sx,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
           className: "base-label",
-          children: t(`payment.checkout.billing.${mode}`)
+          children: t("payment.checkout.billing.postal_code")
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",

package/lib/payment/form/index.js

@@ -66,7 +66,8 @@ const hasDidWallet = user => {
 exports.hasDidWallet = hasDidWallet;
 const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
   const {
-    preferExisting = true
+    preferExisting = true,
+    shouldValidate = false
   } = options;
   const basicFields = {
     customer_name: userInfo.name || userInfo.fullName,
@@ -90,7 +91,9 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
   };
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split(".")[0]]) {
-      setValue(field, value);
+      setValue(field, value, {
+        shouldValidate
+      });
     }
   });
 };
@@ -132,7 +135,8 @@ function PaymentForm({
     handleSubmit,
     formState: {
       errors
-    }
+    },
+    trigger
   } = (0, _reactHookForm.useFormContext)();
   const errorRef = (0, _react.useRef)(null);
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
@@ -172,8 +176,8 @@ function PaymentForm({
   const mergeUserInfo = (customerInfo, userInfo) => {
     return {
       ...(userInfo || {}),
-      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
-      fullName: customerInfo?.name || userInfo?.fullName,
+      name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
       email: customerInfo?.email || userInfo?.email,
       phone: customerInfo?.phone || userInfo?.phone,
       address: {
@@ -231,6 +235,9 @@ function PaymentForm({
         });
       }
     };
+    if (state.submitting) {
+      return;
+    }
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = (0, _reactHookForm.useWatch)({
@@ -242,15 +249,7 @@ function PaymentForm({
     name: "payment_currency"
   });
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
-    if (hasDidWallet(session.user) || skipBindWallet) {
-      handleSubmit(onFormSubmit, onFormError)();
-    } else {
-      session.bindWallet(() => {
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2e3);
-      });
-    }
+    handleSubmit(onFormSubmit, onFormError)();
   });
   const payee = (0, _util2.getStatementDescriptor)(checkoutSession.line_items);
   let buttonText = "";
@@ -271,7 +270,6 @@ function PaymentForm({
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
   const showForm = !!session?.user;
-  const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     setState({
       paying: true
@@ -309,8 +307,10 @@ function PaymentForm({
       const userInfo = mergeUserInfo(profile, session?.user);
       setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled
+        showPhone: checkoutSession.phone_number_collection?.enabled,
+        shouldValidate: true
       });
+      await trigger();
     }
   };
   const handleFastCheckoutConfirm = async () => {
@@ -483,19 +483,7 @@ function PaymentForm({
       });
     }
     if (session?.user) {
-      if (skipBindWallet) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      if (hasDidWallet(session.user)) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      session.bindWallet(() => {
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2e3);
-      });
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.41",
+  "version": "1.18.43",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.29",
-    "@arcblock/ux": "^2.13.29",
-    "@arcblock/ws": "^1.20.8",
-    "@blocklet/theme": "^2.13.29",
-    "@blocklet/ui-react": "^2.13.29",
+    "@arcblock/did-connect": "^2.13.32",
+    "@arcblock/ux": "^2.13.32",
+    "@arcblock/ws": "^1.20.10",
+    "@blocklet/theme": "^2.13.32",
+    "@blocklet/ui-react": "^2.13.32",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.20.8",
+    "@ocap/util": "^1.20.10",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.41",
+    "@blocklet/payment-types": "1.18.43",
     "@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.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "4232e09576dd8aa8dcfb0e4dd5a1bbbb50480b7f"
+  "gitHead": "278c503efd49cab6413b324a4b38bf37a3456468"
 }

package/src/payment/form/address.tsx

@@ -107,7 +107,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
     return (
       <Fade in>
         <Stack className="cko-payment-address cko-payment-form" sx={sx}>
-          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
+          <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <Stack direction="row" spacing={0}>
               <FormInput

package/src/payment/form/index.tsx

@@ -119,9 +119,9 @@ const setUserFormValues = (
   userInfo: UserInfo,
   currentValues: any,
   setValue: Function,
-  options: { preferExisting?: boolean; showPhone?: boolean } = {}
+  options: { preferExisting?: boolean; showPhone?: boolean; shouldValidate?: boolean } = {}
 ) => {
-  const { preferExisting = true } = options;
+  const { preferExisting = true, shouldValidate = false } = options;
   const basicFields = {
     customer_name: userInfo.name || userInfo.fullName,
     customer_email: userInfo.email,
@@ -144,7 +144,7 @@ const setUserFormValues = (
 
   Object.entries(allFields).forEach(([field, value]) => {
     if (!preferExisting || !currentValues[field.split('.')[0]]) {
-      setValue(field, value);
+      setValue(field, value, { shouldValidate });
     }
   });
 };
@@ -184,6 +184,7 @@ export default function PaymentForm({
     setValue,
     handleSubmit,
     formState: { errors },
+    trigger,
   } = useFormContext();
   const errorRef = useRef<HTMLDivElement | null>(null);
   const quantityInventoryStatus = useMemo(() => {
@@ -236,11 +237,14 @@ export default function PaymentForm({
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const mergeUserInfo = (customerInfo: TCustomer, userInfo?: UserInfo): UserInfo => {
+  const mergeUserInfo = (
+    customerInfo: UserInfo | (TCustomer & { fullName?: string }),
+    userInfo?: UserInfo
+  ): UserInfo => {
     return {
       ...(userInfo || {}),
-      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
-      fullName: customerInfo?.name || userInfo?.fullName,
+      name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
       email: customerInfo?.email || userInfo?.email,
       phone: customerInfo?.phone || userInfo?.phone,
       address: {
@@ -300,6 +304,9 @@ export default function PaymentForm({
         );
       }
     };
+    if (state.submitting) {
+      return;
+    }
     initUserInfo();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
@@ -319,16 +326,7 @@ export default function PaymentForm({
   // }, [domSize, theme]);
 
   const afterUserLoggedIn = useMemoizedFn(() => {
-    if (hasDidWallet(session.user) || skipBindWallet) {
-      handleSubmit(onFormSubmit, onFormError)();
-    } else {
-      session.bindWallet(() => {
-        // timeout required because https://github.com/ArcBlock/ux/issues/1241
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2000);
-      });
-    }
+    handleSubmit(onFormSubmit, onFormError)();
   });
 
   const payee = getStatementDescriptor(checkoutSession.line_items);
@@ -350,7 +348,6 @@ export default function PaymentForm({
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
   const showForm = !!session?.user;
-  const skipBindWallet = method.type === 'stripe';
 
   const handleConnected = async () => {
     setState({ paying: true });
@@ -381,7 +378,9 @@ export default function PaymentForm({
       setUserFormValues(userInfo, values, setValue, {
         preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled,
+        shouldValidate: true,
       });
+      await trigger();
     }
   };
 
@@ -539,20 +538,7 @@ export default function PaymentForm({
       errorRef.current.scrollIntoView({ behavior: 'smooth' });
     }
     if (session?.user) {
-      if (skipBindWallet) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      if (hasDidWallet(session.user)) {
-        handleSubmit(onFormSubmit, onFormError)();
-        return;
-      }
-      session.bindWallet(() => {
-        // timeout required because https://github.com/ArcBlock/ux/issues/1241
-        setTimeout(() => {
-          handleSubmit(onFormSubmit, onFormError)();
-        }, 2000);
-      });
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();