@blocklet/payment-react 1.18.24 → 1.18.26

package/es/payment/form/index.js

@@ -31,6 +31,7 @@ import { useMobile } from "../../hooks/mobile.js";
 import { formatPhone, validatePhoneNumber } from "../../libs/phone-validator.js";
 import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
+import { saveCurrencyPreference } from "../../libs/currency.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -135,6 +136,13 @@ export default function PaymentForm({
     const index = currencies.findIndex((x) => x.id === queryCurrencyId);
     return index >= 0 ? index : 0;
   });
+  const handleCurrencyChange = (index) => {
+    setPaymentCurrencyIndex(index);
+    const selectedCurrencyId = currencies[index]?.id;
+    if (selectedCurrencyId) {
+      saveCurrencyPreference(selectedCurrencyId, session?.user?.did);
+    }
+  };
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
     if (response.id === checkoutSession.id && state.paid === false) {
       await handleConnected();
@@ -248,6 +256,7 @@ export default function PaymentForm({
   const showForm = !!session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
+    setState({ paying: true });
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
       if (state.paid === false) {
@@ -485,7 +494,7 @@ export default function PaymentForm({
               {
                 value: paymentCurrencyIndex,
                 currencies,
-                onChange: setPaymentCurrencyIndex
+                onChange: handleCurrencyChange
               }
             )
           }

package/es/payment/form/phone.js

@@ -4,12 +4,14 @@ import omit from "lodash/omit";
 import { useEffect, useRef, useCallback } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { defaultCountries, usePhoneInput } from "react-international-phone";
+import { useMount } from "ahooks";
 import FormInput from "../../components/input.js";
 import { isValidCountry } from "../../libs/util.js";
 import CountrySelect from "../../components/country-select.js";
+import { getPhoneUtil } from "../../libs/phone-validator.js";
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || "billing_address.country";
-  const { control, getValues, setValue } = useFormContext();
+  const { control, getValues, setValue, trigger } = useFormContext();
   const values = getValues();
   const isUpdatingRef = useRef(false);
   const safeUpdate = useCallback((callback) => {
@@ -43,6 +45,11 @@ export default function PhoneInput({ ...props }) {
       setCountry(userCountry);
     });
   }, [userCountry, country, setCountry, safeUpdate]);
+  useMount(() => {
+    getPhoneUtil().catch((err) => {
+      console.error("Failed to preload phone validator:", err);
+    });
+  });
   const onCountryChange = useCallback(
     (v) => {
       safeUpdate(() => {
@@ -51,6 +58,9 @@ export default function PhoneInput({ ...props }) {
     },
     [setCountry, safeUpdate]
   );
+  const handleBlur = useCallback(() => {
+    trigger(props.name);
+  }, [props.name]);
   return (
     // @ts-ignore
     /* @__PURE__ */ jsx(
@@ -60,6 +70,7 @@ export default function PhoneInput({ ...props }) {
         onChange: handlePhoneValueChange,
         type: "tel",
         inputRef,
+        onBlur: handleBlur,
         InputProps: {
           startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
             CountrySelect,

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,35 @@ function StripeCheckoutForm({
   const [state, setState] = 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;
+  };
   useEffect(() => {
     if (!stripe) {
       return;
@@ -55,23 +89,43 @@ function StripeCheckoutForm({
         return;
       }
       try {
-        setState({ confirming: true });
+        setState({ confirming: true, message: "" });
         const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
-        const { error } = await stripe[method]({
+        const { 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 });
         if (error) {
           if (error.type === "validation_error") {
@@ -86,11 +140,11 @@ function StripeCheckoutForm({
         setState({ confirming: false, message: err.message });
       }
     },
-    [customer, intentType, stripe]
+    [customer, intentType, stripe, state.showBillingForm, returnUrl]
     // eslint-disable-line
   );
   return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(
+    (!state.paymentMethod || state.paymentMethod === "card") && /* @__PURE__ */ jsx(
       LinkAuthenticationElement,
       {
         options: {
@@ -98,12 +152,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 +170,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/es/payment/index.js

@@ -7,7 +7,7 @@ import { Box, Fade, Stack } from "@mui/material";
 import { styled } from "@mui/system";
 import { fromTokenToUnit } from "@ocap/util";
 import { useSetState } from "ahooks";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import trim from "lodash/trim";
 import { usePaymentContext } from "../contexts/payment.js";
@@ -22,13 +22,14 @@ import {
 } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
-import PaymentForm from "./form/index.js";
+import PaymentForm, { hasDidWallet } from "./form/index.js";
 import OverviewSkeleton from "./skeleton/overview.js";
 import PaymentSkeleton from "./skeleton/payment.js";
 import PaymentSuccess from "./success.js";
 import PaymentSummary from "./summary.js";
 import { useMobile } from "../hooks/mobile.js";
 import { formatPhone } from "../libs/phone-validator.js";
+import { getCurrencyPreference } from "../libs/currency.js";
 PaymentInner.defaultProps = {
   completed: false,
   showCheckoutSummary: true
@@ -52,7 +53,36 @@ function PaymentInner({
   const { isMobile } = useMobile();
   const [state, setState] = useSetState({ checkoutSession });
   const query = getQueryParams(window.location.href);
-  const defaultCurrencyId = query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const availableCurrencyIds = 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 = useMemo(() => {
+    if (query.currencyId && availableCurrencyIds.includes(query.currencyId)) {
+      return query.currencyId;
+    }
+    if (session?.user && !hasDidWallet(session.user)) {
+      const stripeCurrencyId = paymentMethods.find((m) => m.type === "stripe")?.payment_currencies.find((c) => c.active)?.id;
+      if (stripeCurrencyId) {
+        return stripeCurrencyId;
+      }
+    }
+    const savedPreference = 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 = useForm({
@@ -97,14 +127,6 @@ function PaymentInner({
       document.body.removeEventListener("focusout", focusoutHandler);
     };
   }, []);
-  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 = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);

package/es/payment/product-donation.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography } from "@mui/material";
+import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography, IconButton } from "@mui/material";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import { useSetState } from "ahooks";
 import { useEffect, useRef } from "react";
 import { formatAmountPrecisionLimit } from "../libs/util.js";
@@ -62,7 +63,8 @@ export default function ProductDonation({
     selected: defaultPreset === "custom" ? "" : defaultPreset,
     input: defaultCustomAmount,
     custom: !supportPreset || defaultPreset === "custom",
-    error: ""
+    error: "",
+    animating: false
   });
   const customInputRef = useRef(null);
   const containerRef = useRef(null);
@@ -73,15 +75,73 @@ export default function ProductDonation({
     localStorage.setItem(getUserStorageKey(DONATION_PRESET_KEY_BASE), formatAmount(amount));
   };
   const handleCustomSelect = () => {
-    setState({ custom: true, selected: "", error: "" });
-    const savedCustomAmount = getSavedCustomAmount();
-    if (savedCustomAmount) {
-      setState({ input: savedCustomAmount });
-      onChange({ priceId: item.price_id, amount: savedCustomAmount });
-      setPayable(true);
-    } else if (!state.input) {
-      setPayable(false);
+    setState({
+      custom: true,
+      selected: "",
+      animating: true
+    });
+    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);
+      });
+      if (allIntegers)
+        return 0;
+      presets.forEach((preset) => {
+        const decimalPart = preset.toString().split(".")[1];
+        if (decimalPart) {
+          maxPrecision = Math.max(maxPrecision, decimalPart.length);
+        }
+      });
+      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) => {
@@ -261,13 +321,51 @@ export default function ProductDonation({
             inputRef: customInputRef,
             InputProps: {
               endAdornment: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { ml: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(AutoAwesomeIcon, { fontSize: "small" })
+                  }
+                ),
                 /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
                 /* @__PURE__ */ jsx(Typography, { 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/es/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/lib/checkout/donate.js

@@ -63,6 +63,7 @@ function DonateDetails({
     locale
   } = (0, _context.useLocaleContext)();
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+    className: "cko-donate-details",
     sx: {
       width: "100%",
       minWidth: "256px",
@@ -227,8 +228,17 @@ 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" : ""}`,