@blocklet/payment-react 1.18.22 → 1.18.23

package/es/payment/form/index.js

@@ -66,7 +66,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     "billing_address.line2": userInfo.address?.line2,
     "billing_address.city": userInfo.address?.city,
     "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
-    "billing_address.country": userInfo.address?.country
+    "billing_address.country": userInfo.address?.country || "us"
   };
   if (options.showPhone) {
     addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
@@ -151,33 +151,70 @@ export default function PaymentForm({
       subscription.on("invoice.paid", onInvoicePaid);
     }
   }, [subscription]);
+  const mergeUserInfo = (customerInfo, userInfo) => {
+    return {
+      ...userInfo || {},
+      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || userInfo?.fullName,
+      email: customerInfo?.email || userInfo?.email,
+      phone: customerInfo?.phone || userInfo?.phone,
+      address: {
+        ...userInfo?.address || {},
+        ...customerInfo?.address || {},
+        country: customerInfo?.address?.country || userInfo?.address?.country,
+        state: customerInfo?.address?.state || userInfo?.address?.province,
+        line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
+        line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
+        city: customerInfo?.address?.city || userInfo?.address?.city,
+        postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode
+      },
+      metadata: {
+        ...userInfo?.metadata || {},
+        phone: {
+          country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
+          phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber
+        }
+      }
+    };
+  };
   useEffect(() => {
-    if (session?.user) {
-      const values = getValues();
-      setUserFormValues(session.user, values, setValue, {
-        preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled
-      });
-    } else {
-      setUserFormValues(
-        {
-          name: "",
-          email: "",
-          phone: "",
-          address: {
-            state: "",
-            line1: "",
-            line2: "",
-            city: "",
-            postal_code: ""
-          }
-        },
-        {},
-        setValue,
-        { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
-      );
-    }
-  }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
+    const initUserInfo = async () => {
+      if (session?.user) {
+        const values = getValues();
+        let userInfo = session.user;
+        try {
+          const { data: customerInfo } = await api.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
+          userInfo = mergeUserInfo(customerInfo, userInfo);
+        } catch (err) {
+          userInfo = mergeUserInfo(customer || {}, userInfo);
+          console.error(err);
+        }
+        setUserFormValues(userInfo, values, setValue, {
+          preferExisting: false,
+          showPhone: checkoutSession.phone_number_collection?.enabled
+        });
+      } else {
+        setUserFormValues(
+          {
+            name: "",
+            email: "",
+            phone: "",
+            address: {
+              state: "",
+              line1: "",
+              line2: "",
+              city: "",
+              postal_code: ""
+            }
+          },
+          {},
+          setValue,
+          { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
+        );
+      }
+    };
+    initUserInfo();
+  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   useEffect(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
     setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -229,10 +266,12 @@ export default function PaymentForm({
     }
   }, [errors, isMobile]);
   const onUserLoggedIn = async () => {
-    const { data: profile } = await api.get("/api/customers/me?fallback=1");
+    const { data: profile } = await api.get("/api/customers/me?fallback=1&skipSummary=1");
     if (profile) {
       const values = getValues();
-      setUserFormValues(profile, values, setValue, {
+      const userInfo = mergeUserInfo(profile, session?.user);
+      setUserFormValues(userInfo, values, setValue, {
+        preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled
       });
     }

package/lib/payment/form/index.js

@@ -73,7 +73,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     "billing_address.line2": userInfo.address?.line2,
     "billing_address.city": userInfo.address?.city,
     "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
-    "billing_address.country": userInfo.address?.country
+    "billing_address.country": userInfo.address?.country || "us"
   };
   if (options.showPhone) {
     addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
@@ -175,31 +175,70 @@ function PaymentForm({
       subscription.on("invoice.paid", onInvoicePaid);
     }
   }, [subscription]);
+  const mergeUserInfo = (customerInfo, userInfo) => {
+    return {
+      ...(userInfo || {}),
+      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || userInfo?.fullName,
+      email: customerInfo?.email || userInfo?.email,
+      phone: customerInfo?.phone || userInfo?.phone,
+      address: {
+        ...(userInfo?.address || {}),
+        ...(customerInfo?.address || {}),
+        country: customerInfo?.address?.country || userInfo?.address?.country,
+        state: customerInfo?.address?.state || userInfo?.address?.province,
+        line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
+        line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
+        city: customerInfo?.address?.city || userInfo?.address?.city,
+        postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode
+      },
+      metadata: {
+        ...(userInfo?.metadata || {}),
+        phone: {
+          country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
+          phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber
+        }
+      }
+    };
+  };
   (0, _react.useEffect)(() => {
-    if (session?.user) {
-      const values = getValues();
-      setUserFormValues(session.user, values, setValue, {
-        preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled
-      });
-    } else {
-      setUserFormValues({
-        name: "",
-        email: "",
-        phone: "",
-        address: {
-          state: "",
-          line1: "",
-          line2: "",
-          city: "",
-          postal_code: ""
+    const initUserInfo = async () => {
+      if (session?.user) {
+        const values = getValues();
+        let userInfo = session.user;
+        try {
+          const {
+            data: customerInfo
+          } = await _api.default.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
+          userInfo = mergeUserInfo(customerInfo, userInfo);
+        } catch (err) {
+          userInfo = mergeUserInfo(customer || {}, userInfo);
+          console.error(err);
         }
-      }, {}, setValue, {
-        preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled
-      });
-    }
-  }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
+        setUserFormValues(userInfo, values, setValue, {
+          preferExisting: false,
+          showPhone: checkoutSession.phone_number_collection?.enabled
+        });
+      } else {
+        setUserFormValues({
+          name: "",
+          email: "",
+          phone: "",
+          address: {
+            state: "",
+            line1: "",
+            line2: "",
+            city: "",
+            postal_code: ""
+          }
+        }, {}, setValue, {
+          preferExisting: false,
+          showPhone: checkoutSession.phone_number_collection?.enabled
+        });
+      }
+    };
+    initUserInfo();
+  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   (0, _react.useEffect)(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
     setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -265,10 +304,12 @@ function PaymentForm({
   const onUserLoggedIn = async () => {
     const {
       data: profile
-    } = await _api.default.get("/api/customers/me?fallback=1");
+    } = await _api.default.get("/api/customers/me?fallback=1&skipSummary=1");
     if (profile) {
       const values = getValues();
-      setUserFormValues(profile, values, setValue, {
+      const userInfo = mergeUserInfo(profile, session?.user);
+      setUserFormValues(userInfo, values, setValue, {
+        preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.22",
+  "version": "1.18.23",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.43",
-    "@arcblock/ux": "^2.12.43",
+    "@arcblock/did-connect": "^2.12.44",
+    "@arcblock/ux": "^2.12.44",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.43",
+    "@blocklet/ui-react": "^2.12.44",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.22",
+    "@blocklet/payment-types": "1.18.23",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "844883f56da79c1222fc5aa1b445abb2859e3230"
+  "gitHead": "4ffd236baa345ecd8facab1e71a6ed2491332fd4"
 }

package/src/payment/form/index.tsx

@@ -124,7 +124,7 @@ const setUserFormValues = (
     'billing_address.line2': userInfo.address?.line2,
     'billing_address.city': userInfo.address?.city,
     'billing_address.postal_code': userInfo.address?.postal_code || userInfo.address?.postalCode,
-    'billing_address.country': userInfo.address?.country,
+    'billing_address.country': userInfo.address?.country || 'us',
   };
 
   if (options.showPhone) {
@@ -239,33 +239,73 @@ export default function PaymentForm({
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const mergeUserInfo = (customerInfo: TCustomer, userInfo?: UserInfo): UserInfo => {
+    return {
+      ...(userInfo || {}),
+      name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
+      fullName: customerInfo?.name || userInfo?.fullName,
+      email: customerInfo?.email || userInfo?.email,
+      phone: customerInfo?.phone || userInfo?.phone,
+      address: {
+        ...(userInfo?.address || {}),
+        ...(customerInfo?.address || {}),
+        country: customerInfo?.address?.country || userInfo?.address?.country,
+        state: customerInfo?.address?.state || userInfo?.address?.province,
+        line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
+        line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
+        city: customerInfo?.address?.city || userInfo?.address?.city,
+        postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode,
+      },
+      metadata: {
+        ...(userInfo?.metadata || {}),
+        phone: {
+          country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
+          phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber,
+        },
+      },
+    };
+  };
+
   useEffect(() => {
-    if (session?.user) {
-      const values = getValues();
-      setUserFormValues(session.user, values, setValue, {
-        preferExisting: false,
-        showPhone: checkoutSession.phone_number_collection?.enabled,
-      });
-    } else {
-      setUserFormValues(
-        {
-          name: '',
-          email: '',
-          phone: '',
-          address: {
-            state: '',
-            line1: '',
-            line2: '',
-            city: '',
-            postal_code: '',
+    const initUserInfo = async () => {
+      if (session?.user) {
+        const values = getValues();
+        let userInfo = session.user;
+        try {
+          const { data: customerInfo } = await api.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
+          userInfo = mergeUserInfo(customerInfo, userInfo);
+        } catch (err) {
+          // @ts-ignore
+          userInfo = mergeUserInfo(customer || {}, userInfo);
+          console.error(err);
+        }
+        setUserFormValues(userInfo, values, setValue, {
+          preferExisting: false,
+          showPhone: checkoutSession.phone_number_collection?.enabled,
+        });
+      } else {
+        setUserFormValues(
+          {
+            name: '',
+            email: '',
+            phone: '',
+            address: {
+              state: '',
+              line1: '',
+              line2: '',
+              city: '',
+              postal_code: '',
+            },
           },
-        },
-        {},
-        setValue,
-        { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
-      );
-    }
-  }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
+          {},
+          setValue,
+          { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
+        );
+      }
+    };
+    initUserInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
 
   useEffect(() => {
     setValue('payment_method', (currencies[paymentCurrencyIndex] as any)?.method?.id);
@@ -337,10 +377,12 @@ export default function PaymentForm({
   }, [errors, isMobile]);
 
   const onUserLoggedIn = async () => {
-    const { data: profile } = await api.get('/api/customers/me?fallback=1');
+    const { data: profile } = await api.get('/api/customers/me?fallback=1&skipSummary=1');
     if (profile) {
       const values = getValues();
-      setUserFormValues(profile, values, setValue, {
+      const userInfo = mergeUserInfo(profile, session?.user);
+      setUserFormValues(userInfo, values, setValue, {
+        preferExisting: false,
         showPhone: checkoutSession.phone_number_collection?.enabled,
       });
     }