@blocklet/payment-react 1.18.25 → 1.18.27

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

@@ -48,7 +48,8 @@ function StripeCheckoutForm({
     confirming: false,
     loaded: false,
     showBillingForm: false,
-    isTransitioning: false
+    isTransitioning: false,
+    paymentMethod: "card"
   });
   const handlePaymentMethodChange = event => {
     const method = event.value?.type;
@@ -61,12 +62,14 @@ function StripeCheckoutForm({
       setTimeout(() => {
         setState({
           isTransitioning: false,
+          paymentMethod: method,
           showBillingForm: true
         });
       }, 300);
     } else {
       setState({
         showBillingForm: false,
+        paymentMethod: method,
         isTransitioning: false
       });
     }
@@ -111,17 +114,23 @@ function StripeCheckoutForm({
     }
     try {
       setState({
-        confirming: true
+        confirming: true,
+        message: ""
       });
       const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
       const {
         error: submitError
       } = await elements.submit();
       if (submitError) {
+        setState({
+          confirming: false
+        });
         return;
       }
       const {
-        error
+        error,
+        paymentIntent,
+        setupIntent
       } = await stripe[method]({
         elements,
         redirect: "if_required",
@@ -147,6 +156,13 @@ function StripeCheckoutForm({
           } : {})
         }
       });
+      const intent = paymentIntent || setupIntent;
+      if (intent?.status === "canceled" || intent?.status === "requires_payment_method") {
+        setState({
+          confirming: false
+        });
+        return;
+      }
       setState({
         confirming: false
       });
@@ -167,13 +183,13 @@ 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
       }

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.25",
+  "version": "1.18.27",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,15 +54,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.52",
-    "@arcblock/ux": "^2.12.52",
-    "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.52",
+    "@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.25",
+    "@blocklet/payment-types": "1.18.27",
     "@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": "1665ec667d621a3e607650e486cb0967371b9771"
+  "gitHead": "2bbcff1991daf5de147813c598e13d755da0c989"
 }

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} />