@blocklet/payment-react 1.18.24 → 1.18.25

package/es/hooks/keyboard.js

@@ -39,6 +39,9 @@ export const useTabNavigation = (items, onSelect, options) => {
           return i;
         }
       }
+      if (includeCustom && navigableElements.length > 0) {
+        return navigableElements.length - 1;
+      }
     }
     return -1;
   }, [items, includeCustom, isCustomSelected, currentValue, valueType, compareValue, findNavigableElements]);

package/es/libs/util.d.ts

@@ -10,8 +10,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/es/libs/util.js

@@ -85,16 +85,19 @@ export const formatError = (err) => {
   }
   return err.message;
 };
-export function formatBNStr(str = "", decimals = 18, precision = 6, trim = true) {
-  return formatNumber(fromUnitToToken(str, decimals), precision, trim);
+export function formatBNStr(str = "", decimals = 18, precision = 6, trim = true, thousandSeparated = true) {
+  if (!str) {
+    return "0";
+  }
+  return formatNumber(fromUnitToToken(str, decimals), precision, trim, thousandSeparated);
 }
-export function formatNumber(n, precision = 6, trim = true) {
+export function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";
   }
   const num = numbro(n);
   const options = {
-    thousandSeparated: true,
+    thousandSeparated,
     ...(precision || precision === 0) && { mantissa: precision }
   };
   const result = num.format(options);

package/es/payment/form/stripe/form.js

@@ -9,6 +9,13 @@ import { useEffect, useCallback } from "react";
 import { useMobile } from "../../../hooks/mobile.js";
 import LoadingButton from "../../../components/loading-button.js";
 const { Elements, PaymentElement, useElements, useStripe, loadStripe, LinkAuthenticationElement } = globalThis.__STRIPE_COMPONENTS__;
+const PaymentElementContainer = styled("div")`
+  opacity: 0;
+  transition: opacity 300ms ease;
+  &.visible {
+    opacity: 1;
+  }
+`;
 function StripeCheckoutForm({
   clientSecret,
   intentType,
@@ -23,8 +30,32 @@ function StripeCheckoutForm({
   const [state, setState] = useSetState({
     message: "",
     confirming: false,
-    loaded: false
+    loaded: false,
+    showBillingForm: false,
+    isTransitioning: false
   });
+  const handlePaymentMethodChange = (event) => {
+    const method = event.value?.type;
+    const needsBillingInfo = method === "google_pay" || method === "apple_pay";
+    const shouldShowForm = needsBillingInfo && !isCompleteBillingAddress(customer.address);
+    if (shouldShowForm && !state.showBillingForm) {
+      setState({ isTransitioning: true });
+      setTimeout(() => {
+        setState({
+          isTransitioning: false,
+          showBillingForm: true
+        });
+      }, 300);
+    } else {
+      setState({
+        showBillingForm: false,
+        isTransitioning: false
+      });
+    }
+  };
+  const isCompleteBillingAddress = (address) => {
+    return address && address.line1 && address.city && address.state && address.postal_code && address.country;
+  };
   useEffect(() => {
     if (!stripe) {
       return;
@@ -57,19 +88,33 @@ function StripeCheckoutForm({
       try {
         setState({ confirming: true });
         const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
+        const { error: submitError } = await elements.submit();
+        if (submitError) {
+          return;
+        }
         const { error } = await stripe[method]({
           elements,
           redirect: "if_required",
           confirmParams: {
             return_url: returnUrl || window.location.href,
-            payment_method_data: {
-              billing_details: {
-                name: customer.name,
-                phone: customer.phone,
-                email: customer.email,
-                address: customer.address
+            ...!state.showBillingForm ? {
+              payment_method_data: {
+                billing_details: {
+                  name: customer.name,
+                  phone: customer.phone,
+                  email: customer.email,
+                  address: {
+                    ...customer.address || {},
+                    country: customer.address?.country || "us",
+                    line1: customer.address?.line1 || "",
+                    line2: customer.address?.line2 || "",
+                    city: customer.address?.city || "",
+                    state: customer.address?.state || "",
+                    postal_code: customer.address?.postal_code || "00000"
+                  }
+                }
               }
-            }
+            } : {}
           }
         });
         setState({ confirming: false });
@@ -98,12 +143,14 @@ function StripeCheckoutForm({
         }
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PaymentElementContainer, { className: !state.isTransitioning ? "visible" : "", children: /* @__PURE__ */ jsx(
       PaymentElement,
       {
         options: {
           layout: "auto",
-          fields: { billingDetails: "never" },
+          fields: {
+            billingDetails: state.showBillingForm ? "auto" : "never"
+          },
           readOnly: state.confirming,
           defaultValues: {
             billingDetails: {
@@ -114,9 +161,10 @@ function StripeCheckoutForm({
             }
           }
         },
+        onChange: handlePaymentMethodChange,
         onReady: () => setState({ loaded: true })
       }
-    ),
+    ) }),
     (!stripe || !elements || !state.loaded) && /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
     stripe && elements && state.loaded && /* @__PURE__ */ jsx(
       LoadingButton,

package/lib/hooks/keyboard.js

@@ -44,6 +44,9 @@ const useTabNavigation = (items, onSelect, options) => {
           return i;
         }
       }
+      if (includeCustom && navigableElements.length > 0) {
+        return navigableElements.length - 1;
+      }
     }
     return -1;
   }, [items, includeCustom, isCustomSelected, currentValue, valueType, compareValue, findNavigableElements]);

package/lib/libs/util.d.ts

@@ -10,8 +10,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/lib/libs/util.js

@@ -156,16 +156,19 @@ const formatError = err => {
   return err.message;
 };
 exports.formatError = formatError;
-function formatBNStr(str = "", decimals = 18, precision = 6, trim = true) {
-  return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision, trim);
+function formatBNStr(str = "", decimals = 18, precision = 6, trim = true, thousandSeparated = true) {
+  if (!str) {
+    return "0";
+  }
+  return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision, trim, thousandSeparated);
 }
-function formatNumber(n, precision = 6, trim = true) {
+function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";
   }
   const num = (0, _numbro.default)(n);
   const options = {
-    thousandSeparated: true,
+    thousandSeparated,
     ...((precision || precision === 0) && {
       mantissa: precision
     })

package/lib/payment/form/stripe/form.js

@@ -23,6 +23,13 @@ const {
   loadStripe,
   LinkAuthenticationElement
 } = globalThis.__STRIPE_COMPONENTS__;
+const PaymentElementContainer = (0, _system.styled)("div")`
+  opacity: 0;
+  transition: opacity 300ms ease;
+  &.visible {
+    opacity: 1;
+  }
+`;
 function StripeCheckoutForm({
   clientSecret,
   intentType,
@@ -39,8 +46,34 @@ function StripeCheckoutForm({
   const [state, setState] = (0, _ahooks.useSetState)({
     message: "",
     confirming: false,
-    loaded: false
+    loaded: false,
+    showBillingForm: false,
+    isTransitioning: false
   });
+  const handlePaymentMethodChange = event => {
+    const method = event.value?.type;
+    const needsBillingInfo = method === "google_pay" || method === "apple_pay";
+    const shouldShowForm = needsBillingInfo && !isCompleteBillingAddress(customer.address);
+    if (shouldShowForm && !state.showBillingForm) {
+      setState({
+        isTransitioning: true
+      });
+      setTimeout(() => {
+        setState({
+          isTransitioning: false,
+          showBillingForm: true
+        });
+      }, 300);
+    } else {
+      setState({
+        showBillingForm: false,
+        isTransitioning: false
+      });
+    }
+  };
+  const isCompleteBillingAddress = address => {
+    return address && address.line1 && address.city && address.state && address.postal_code && address.country;
+  };
   (0, _react.useEffect)(() => {
     if (!stripe) {
       return;
@@ -81,6 +114,12 @@ function StripeCheckoutForm({
         confirming: true
       });
       const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
+      const {
+        error: submitError
+      } = await elements.submit();
+      if (submitError) {
+        return;
+      }
       const {
         error
       } = await stripe[method]({
@@ -88,14 +127,24 @@ function StripeCheckoutForm({
         redirect: "if_required",
         confirmParams: {
           return_url: returnUrl || window.location.href,
-          payment_method_data: {
-            billing_details: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address
+          ...(!state.showBillingForm ? {
+            payment_method_data: {
+              billing_details: {
+                name: customer.name,
+                phone: customer.phone,
+                email: customer.email,
+                address: {
+                  ...(customer.address || {}),
+                  country: customer.address?.country || "us",
+                  line1: customer.address?.line1 || "",
+                  line2: customer.address?.line2 || "",
+                  city: customer.address?.city || "",
+                  state: customer.address?.state || "",
+                  postal_code: customer.address?.postal_code || "00000"
+                }
+              }
             }
-          }
+          } : {})
         }
       });
       setState({
@@ -128,24 +177,28 @@ function StripeCheckoutForm({
       options: {
         defaultEmail: customer.email
       }
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElement, {
-      options: {
-        layout: "auto",
-        fields: {
-          billingDetails: "never"
-        },
-        readOnly: state.confirming,
-        defaultValues: {
-          billingDetails: {
-            name: customer.name,
-            phone: customer.phone,
-            email: customer.email,
-            address: customer.address
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElementContainer, {
+      className: !state.isTransitioning ? "visible" : "",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElement, {
+        options: {
+          layout: "auto",
+          fields: {
+            billingDetails: state.showBillingForm ? "auto" : "never"
+          },
+          readOnly: state.confirming,
+          defaultValues: {
+            billingDetails: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address
+            }
           }
-        }
-      },
-      onReady: () => setState({
-        loaded: true
+        },
+        onChange: handlePaymentMethodChange,
+        onReady: () => setState({
+          loaded: true
+        })
       })
     }), (!stripe || !elements || !state.loaded) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
       relative: "parent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.24",
+  "version": "1.18.25",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.48",
-    "@arcblock/ux": "^2.12.48",
+    "@arcblock/did-connect": "^2.12.52",
+    "@arcblock/ux": "^2.12.52",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.48",
+    "@blocklet/ui-react": "^2.12.52",
     "@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.24",
+    "@blocklet/payment-types": "1.18.25",
     "@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": "6c36b088743e696ce250cda11f8502b3886df0ef"
+  "gitHead": "1665ec667d621a3e607650e486cb0967371b9771"
 }

package/src/hooks/keyboard.ts

@@ -86,12 +86,14 @@ export const useTabNavigation = <T>(
       // if tabbed, find current focused element
       const focusedElement = document.activeElement;
       const navigableElements = findNavigableElements();
-
       for (let i = 0; i < navigableElements.length; i++) {
         if (navigableElements[i] === focusedElement) {
           return i;
         }
       }
+      if (includeCustom && navigableElements.length > 0) {
+        return navigableElements.length - 1;
+      }
     }
 
     return -1;
@@ -107,10 +109,10 @@ export const useTabNavigation = <T>(
       }
 
       if (isShiftKey) {
-        // Shift+Tab forward
+        // Shift+Tab backward
         return currentIndex === 0 ? totalOptions - 1 : currentIndex - 1;
       }
-      // Tab backward
+      // Tab next
       return currentIndex === totalOptions - 1 ? 0 : currentIndex + 1;
     },
     [items, includeCustom]

package/src/libs/util.ts

@@ -130,17 +130,31 @@ export const formatError = (err: any) => {
   return err.message;
 };
 
-export function formatBNStr(str: string = '', decimals: number = 18, precision: number = 6, trim: boolean = true) {
-  return formatNumber(fromUnitToToken(str, decimals), precision, trim);
+export function formatBNStr(
+  str: string = '',
+  decimals: number = 18,
+  precision: number = 6,
+  trim: boolean = true,
+  thousandSeparated: boolean = true
+) {
+  if (!str) {
+    return '0';
+  }
+  return formatNumber(fromUnitToToken(str, decimals), precision, trim, thousandSeparated);
 }
 
-export function formatNumber(n: number | string, precision: number = 6, trim: boolean = true) {
+export function formatNumber(
+  n: number | string,
+  precision: number = 6,
+  trim: boolean = true,
+  thousandSeparated: boolean = true
+) {
   if (!n || n === '0') {
     return '0';
   }
   const num = numbro(n);
   const options = {
-    thousandSeparated: true,
+    thousandSeparated,
     ...((precision || precision === 0) && { mantissa: precision }),
   };
   const result = num.format(options);

package/src/payment/form/stripe/form.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import Center from '@arcblock/ux/lib/Center';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -21,6 +22,14 @@ export type StripeCheckoutFormProps = {
   returnUrl: string;
 };
 
+const PaymentElementContainer = styled('div')`
+  opacity: 0;
+  transition: opacity 300ms ease;
+  &.visible {
+    opacity: 1;
+  }
+`;
+
 // @doc https://stripe.com/docs/js/elements_object/create_payment_element
 function StripeCheckoutForm({
   clientSecret,
@@ -38,8 +47,36 @@ function StripeCheckoutForm({
     message: '',
     confirming: false,
     loaded: false,
+    showBillingForm: false,
+    isTransitioning: false,
   });
 
+  const handlePaymentMethodChange = (event: any) => {
+    const method = event.value?.type;
+    const needsBillingInfo = method === 'google_pay' || method === 'apple_pay';
+    const shouldShowForm = needsBillingInfo && !isCompleteBillingAddress(customer.address);
+
+    if (shouldShowForm && !state.showBillingForm) {
+      setState({ isTransitioning: true });
+      setTimeout(() => {
+        setState({
+          isTransitioning: false,
+          showBillingForm: true,
+        });
+      }, 300);
+    } else {
+      // if shouldShowForm is false, set showBillingForm to false immediately
+      setState({
+        showBillingForm: false,
+        isTransitioning: false,
+      });
+    }
+  };
+
+  const isCompleteBillingAddress = (address: any) => {
+    return address && address.line1 && address.city && address.state && address.postal_code && address.country;
+  };
+
   useEffect(() => {
     if (!stripe) {
       return;
@@ -78,19 +115,37 @@ function StripeCheckoutForm({
       try {
         setState({ confirming: true });
         const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
+
+        const { error: submitError } = await elements.submit();
+        if (submitError) {
+          return;
+        }
+
         const { error } = await stripe[method]({
           elements,
           redirect: 'if_required',
           confirmParams: {
             return_url: returnUrl || window.location.href,
-            payment_method_data: {
-              billing_details: {
-                name: customer.name,
-                phone: customer.phone,
-                email: customer.email,
-                address: customer.address,
-              },
-            },
+            ...(!state.showBillingForm
+              ? {
+                  payment_method_data: {
+                    billing_details: {
+                      name: customer.name,
+                      phone: customer.phone,
+                      email: customer.email,
+                      address: {
+                        ...(customer.address || {}),
+                        country: customer.address?.country || 'us',
+                        line1: customer.address?.line1 || '',
+                        line2: customer.address?.line2 || '',
+                        city: customer.address?.city || '',
+                        state: customer.address?.state || '',
+                        postal_code: customer.address?.postal_code || '00000',
+                      },
+                    },
+                  },
+                }
+              : {}),
           },
         });
         setState({ confirming: false });
@@ -98,7 +153,6 @@ function StripeCheckoutForm({
           if (error.type === 'validation_error') {
             return;
           }
-
           setState({ message: error.message as string });
           return;
         }
@@ -119,22 +173,29 @@ function StripeCheckoutForm({
           defaultEmail: customer.email,
         }}
       />
-      <PaymentElement
-        options={{
-          layout: 'auto',
-          fields: { billingDetails: 'never' },
-          readOnly: state.confirming,
-          defaultValues: {
-            billingDetails: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address,
+
+      <PaymentElementContainer className={!state.isTransitioning ? 'visible' : ''}>
+        <PaymentElement
+          options={{
+            layout: 'auto',
+            fields: {
+              billingDetails: state.showBillingForm ? 'auto' : 'never',
             },
-          },
-        }}
-        onReady={() => setState({ loaded: true })}
-      />
+            readOnly: state.confirming,
+            defaultValues: {
+              billingDetails: {
+                name: customer.name,
+                phone: customer.phone,
+                email: customer.email,
+                address: customer.address,
+              },
+            },
+          }}
+          onChange={handlePaymentMethodChange}
+          onReady={() => setState({ loaded: true })}
+        />
+      </PaymentElementContainer>
+
       {(!stripe || !elements || !state.loaded) && (
         <Center relative="parent">
           <CircularProgress />