@blocklet/payment-react 1.18.24 → 1.18.26

package/lib/payment/form/phone.js

@@ -10,9 +10,11 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _react = require("react");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
+var _ahooks = require("ahooks");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _util = require("../../libs/util");
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
+var _phoneValidator = require("../../libs/phone-validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PhoneInput({
   ...props
@@ -21,7 +23,8 @@ function PhoneInput({
   const {
     control,
     getValues,
-    setValue
+    setValue,
+    trigger
   } = (0, _reactHookForm.useFormContext)();
   const values = getValues();
   const isUpdatingRef = (0, _react.useRef)(false);
@@ -63,11 +66,19 @@ function PhoneInput({
       setCountry(userCountry);
     });
   }, [userCountry, country, setCountry, safeUpdate]);
+  (0, _ahooks.useMount)(() => {
+    (0, _phoneValidator.getPhoneUtil)().catch(err => {
+      console.error("Failed to preload phone validator:", err);
+    });
+  });
   const onCountryChange = (0, _react.useCallback)(v => {
     safeUpdate(() => {
       setCountry(v);
     });
   }, [setCountry, safeUpdate]);
+  const handleBlur = (0, _react.useCallback)(() => {
+    trigger(props.name);
+  }, [props.name]);
   return (
     // @ts-ignore
     /* @__PURE__ */
@@ -76,6 +87,7 @@ function PhoneInput({
       onChange: handlePhoneValueChange,
       type: "tel",
       inputRef,
+      onBlur: handleBlur,
       InputProps: {
         startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
           position: "start",

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,37 @@ function StripeCheckoutForm({
   const [state, setState] = (0, _ahooks.useSetState)({
     message: "",
     confirming: false,
-    loaded: false
+    loaded: false,
+    showBillingForm: false,
+    isTransitioning: false,
+    paymentMethod: "card"
   });
+  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,
+          paymentMethod: method,
+          showBillingForm: true
+        });
+      }, 300);
+    } else {
+      setState({
+        showBillingForm: false,
+        paymentMethod: method,
+        isTransitioning: false
+      });
+    }
+  };
+  const isCompleteBillingAddress = address => {
+    return address && address.line1 && address.city && address.state && address.postal_code && address.country;
+  };
   (0, _react.useEffect)(() => {
     if (!stripe) {
       return;
@@ -78,26 +114,55 @@ function StripeCheckoutForm({
     }
     try {
       setState({
-        confirming: true
+        confirming: true,
+        message: ""
       });
       const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
       const {
-        error
+        error: submitError
+      } = await elements.submit();
+      if (submitError) {
+        setState({
+          confirming: false
+        });
+        return;
+      }
+      const {
+        error,
+        paymentIntent,
+        setupIntent
       } = 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"
+                }
+              }
             }
-          }
+          } : {})
         }
       });
+      const intent = paymentIntent || setupIntent;
+      if (intent?.status === "canceled" || intent?.status === "requires_payment_method") {
+        setState({
+          confirming: false
+        });
+        return;
+      }
       setState({
         confirming: false
       });
@@ -118,34 +183,38 @@ function StripeCheckoutForm({
         message: err.message
       });
     }
-  }, [customer, intentType, stripe]
+  }, [customer, intentType, stripe, state.showBillingForm, returnUrl]
   // eslint-disable-line
   );
 
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
+    children: [(!state.paymentMethod || state.paymentMethod === "card") && /* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
       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/lib/payment/index.js

@@ -22,13 +22,16 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util2 = require("../libs/util");
 var _error = _interopRequireDefault(require("./error"));
 var _footer = _interopRequireDefault(require("./footer"));
-var _form = _interopRequireDefault(require("./form"));
+var _form = _interopRequireWildcard(require("./form"));
 var _overview = _interopRequireDefault(require("./skeleton/overview"));
 var _payment2 = _interopRequireDefault(require("./skeleton/payment"));
 var _success = _interopRequireDefault(require("./success"));
 var _summary = _interopRequireDefault(require("./summary"));
 var _mobile = require("../hooks/mobile");
 var _phoneValidator = require("../libs/phone-validator");
+var _currency = require("../libs/currency");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 PaymentInner.defaultProps = {
   completed: false,
@@ -62,7 +65,36 @@ function PaymentInner({
     checkoutSession
   });
   const query = (0, _util2.getQueryParams)(window.location.href);
-  const defaultCurrencyId = query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const availableCurrencyIds = (0, _react.useMemo)(() => {
+    const currencyIds = /* @__PURE__ */new Set();
+    paymentMethods.forEach(method2 => {
+      method2.payment_currencies.forEach(currency2 => {
+        if (currency2.active) {
+          currencyIds.add(currency2.id);
+        }
+      });
+    });
+    return Array.from(currencyIds);
+  }, [paymentMethods]);
+  const defaultCurrencyId = (0, _react.useMemo)(() => {
+    if (query.currencyId && availableCurrencyIds.includes(query.currencyId)) {
+      return query.currencyId;
+    }
+    if (session?.user && !(0, _form.hasDidWallet)(session.user)) {
+      const stripeCurrencyId = paymentMethods.find(m => m.type === "stripe")?.payment_currencies.find(c => c.active)?.id;
+      if (stripeCurrencyId) {
+        return stripeCurrencyId;
+      }
+    }
+    const savedPreference = (0, _currency.getCurrencyPreference)(session?.user?.did, availableCurrencyIds);
+    if (savedPreference) {
+      return savedPreference;
+    }
+    if (state.checkoutSession.currency_id && availableCurrencyIds.includes(state.checkoutSession.currency_id)) {
+      return state.checkoutSession.currency_id;
+    }
+    return availableCurrencyIds?.[0];
+  }, [query.currencyId, availableCurrencyIds, session?.user, state.checkoutSession.currency_id, paymentMethods]);
   const defaultMethodId = paymentMethods.find(m => m.payment_currencies.some(c => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = (0, _reactHookForm.useForm)({
@@ -102,14 +134,6 @@ function PaymentInner({
       document.body.removeEventListener("focusout", focusoutHandler);
     };
   }, []);
-  (0, _react.useEffect)(() => {
-    if (!methods || query.currencyId) {
-      return;
-    }
-    if (state.checkoutSession.currency_id !== defaultCurrencyId) {
-      methods.setValue("payment_currency", state.checkoutSession.currency_id);
-    }
-  }, [state.checkoutSession, defaultCurrencyId, query.currencyId]);
   const currencyId = (0, _reactHookForm.useWatch)({
     control: methods.control,
     name: "payment_currency",

package/lib/payment/product-donation.js

@@ -7,12 +7,14 @@ module.exports = ProductDonation;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _AutoAwesome = _interopRequireDefault(require("@mui/icons-material/AutoAwesome"));
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
 var _scroll = require("../hooks/scroll");
 var _keyboard = require("../hooks/keyboard");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DONATION_PRESET_KEY_BASE = "payment-donation-preset";
 const DONATION_CUSTOM_AMOUNT_KEY_BASE = "payment-donation-custom-amount";
 const formatAmount = amount => {
@@ -74,7 +76,8 @@ function ProductDonation({
     selected: defaultPreset === "custom" ? "" : defaultPreset,
     input: defaultCustomAmount,
     custom: !supportPreset || defaultPreset === "custom",
-    error: ""
+    error: "",
+    animating: false
   });
   const customInputRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
@@ -95,21 +98,73 @@ function ProductDonation({
     setState({
       custom: true,
       selected: "",
-      error: ""
+      animating: true
     });
-    const savedCustomAmount = getSavedCustomAmount();
-    if (savedCustomAmount) {
-      setState({
-        input: savedCustomAmount
+    const hasPresets = presets.length > 0;
+    let sortedPresets = [];
+    if (hasPresets) {
+      sortedPresets = [...presets].map(p => parseFloat(p)).sort((a, b) => a - b);
+    }
+    const minPreset = hasPresets ? sortedPresets[0] : 1;
+    const middleIndex = Math.floor(sortedPresets.length / 2);
+    const maxPreset = hasPresets ? sortedPresets[middleIndex] : 10;
+    const detectPrecision = () => {
+      let maxPrecision = 2;
+      if (!hasPresets) return 0;
+      const allIntegers = presets.every(preset => {
+        const num = parseFloat(preset);
+        return num === Math.floor(num);
       });
-      onChange({
-        priceId: item.price_id,
-        amount: savedCustomAmount
+      if (allIntegers) return 0;
+      presets.forEach(preset => {
+        const decimalPart = preset.toString().split(".")[1];
+        if (decimalPart) {
+          maxPrecision = Math.max(maxPrecision, decimalPart.length);
+        }
       });
-      setPayable(true);
-    } else if (!state.input) {
-      setPayable(false);
+      return maxPrecision;
+    };
+    const precision = detectPrecision();
+    let randomAmount;
+    if (precision === 0) {
+      randomAmount = (Math.round(Math.random() * (maxPreset - minPreset) + minPreset) || 1).toString();
+    } else {
+      randomAmount = (Math.random() * (maxPreset - minPreset) + minPreset).toFixed(precision);
     }
+    const startValue = state.input ? parseFloat(state.input) : 0;
+    const targetValue = parseFloat(randomAmount);
+    const difference = targetValue - startValue;
+    const startTime = Date.now();
+    const duration = 800;
+    const updateCounter = () => {
+      const currentTime = Date.now();
+      const elapsed = currentTime - startTime;
+      if (elapsed < duration) {
+        const progress = elapsed / duration;
+        const intermediateValue = startValue + difference * progress;
+        const currentValue = precision === 0 ? Math.floor(intermediateValue).toString() : intermediateValue.toFixed(precision);
+        setState({
+          input: currentValue
+        });
+        requestAnimationFrame(updateCounter);
+      } else {
+        setState({
+          input: randomAmount,
+          animating: false,
+          error: ""
+        });
+        onChange({
+          priceId: item.price_id,
+          amount: formatAmount(randomAmount)
+        });
+        setPayable(true);
+        localStorage.setItem(getUserStorageKey(DONATION_CUSTOM_AMOUNT_KEY_BASE), formatAmount(randomAmount));
+        setTimeout(() => {
+          customInputRef.current?.focus();
+        }, 200);
+      }
+    };
+    requestAnimationFrame(updateCounter);
     localStorage.setItem(getUserStorageKey(DONATION_PRESET_KEY_BASE), "custom");
   };
   const handleTabSelect = selectedItem => {
@@ -345,7 +400,24 @@ function ProductDonation({
           sx: {
             ml: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleCustomSelect,
+            disabled: state.animating,
+            sx: {
+              mr: 0.5,
+              opacity: state.animating ? 0.5 : 1,
+              transition: "all 0.2s ease",
+              "&:hover": {
+                transform: "scale(1.2)",
+                transition: "transform 0.3s ease"
+              }
+            },
+            "aria-label": t("common.random"),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
+              fontSize: "small"
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
             src: currency?.logo,
             sx: {
               width: 16,
@@ -356,10 +428,29 @@ function ProductDonation({
             children: currency?.symbol
           })]
         }),
-        autoComplete: "off"
+        autoComplete: "off",
+        sx: {
+          "& input": {
+            transition: "all 0.25s ease"
+          }
+        }
       },
       sx: {
-        mt: defaultPreset !== "0" ? 0 : 1
+        mt: defaultPreset !== "0" ? 0 : 1,
+        "& .MuiInputBase-root": {
+          transition: "all 0.3s ease"
+        },
+        "& input[type=number]": {
+          MozAppearance: "textfield"
+        },
+        "& input[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        "& input[type=number]::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
       }
     })]
   });

package/lib/types/shims.d.ts

@@ -16,3 +16,5 @@ declare module 'pretty-ms-i18n';
 declare var blocklet: import('@blocklet/sdk').WindowBlocklet;
 
 declare var __PAYMENT_KIT_BASE_URL: string;
+
+declare var __PAYMENT_KIT_AUTH_TOKEN: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.24",
+  "version": "1.18.26",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,15 +54,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.48",
-    "@arcblock/ux": "^2.12.48",
-    "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.48",
+    "@arcblock/did-connect": "^2.12.60",
+    "@arcblock/ux": "^2.12.60",
+    "@arcblock/ws": "^1.19.19",
+    "@blocklet/ui-react": "^2.12.60",
     "@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.19.15",
+    "@ocap/util": "^1.19.19",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -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.26",
     "@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": "7f95dbeba13242d2b7e77ac3f4e69a7f764ed213"
 }

package/src/checkout/donate.tsx

@@ -149,6 +149,7 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
   const { locale } = useLocaleContext();
   return (
     <Stack
+      className="cko-donate-details"
       sx={{
         width: '100%',
         minWidth: '256px',
@@ -308,9 +309,18 @@ function SupporterAvatar({
         onClose={() => setOpen(false)}
         sx={{
           '.MuiDialogContent-root': {
-            width: '450px',
+            width: {
+              xs: '100%',
+              md: '450px',
+            },
             padding: '8px',
           },
+          '.cko-donate-details': {
+            maxHeight: {
+              xs: '100%',
+              md: '300px',
+            },
+          },
         }}
         title={`${customersNum} supporter${customersNum > 1 ? 's' : ''}`}>
         <DonateDetails supporters={supporters} currency={currency} method={method} totalAmount={totalAmount} />