@blocklet/payment-react 1.18.29 → 1.18.31

package/es/checkout/donate.js

@@ -296,17 +296,31 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
           symbol: currency.symbol,
           totalAmount: formatAmount(totalAmount || "0", currency.decimal)
         }) }),
-        /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 10, children: customers.map((x) => /* @__PURE__ */ jsx(
-          Avatar,
+        /* @__PURE__ */ jsx(
+          AvatarGroup,
           {
-            title: x.customer?.name,
-            alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
-            src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-            variant: "circular",
-            sx: { width: 24, height: 24 }
-          },
-          x.id
-        )) })
+            total: customersNum,
+            max: 10,
+            spacing: 4,
+            sx: {
+              "& .MuiAvatar-root": {
+                width: 24,
+                height: 24,
+                fontSize: "0.6rem"
+              }
+            },
+            children: customers.map((x) => /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                title: x.customer?.name,
+                alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
+                src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
+                variant: "circular"
+              },
+              x.id
+            ))
+          }
+        )
       ]
     }
   );
@@ -593,20 +607,34 @@ function CheckoutDonateInner({
         ] }),
         maxWidth: "md",
         toolbar: isMobile ? null : /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, sx: { color: "text.secondary" }, children: [
-          /* @__PURE__ */ jsx(AvatarGroup, { total: customers?.length, max: 5, children: customers.map((x) => /* @__PURE__ */ jsx(
-            Avatar,
+          /* @__PURE__ */ jsx(
+            AvatarGroup,
             {
-              title: x.customer?.name,
-              src: getCustomerAvatar(
-                x.customer?.did,
-                x?.updated_at ? new Date(x.updated_at).toISOString() : "",
-                18
-              ),
-              variant: "circular",
-              sx: { width: 18, height: 18 }
-            },
-            x.id
-          )) }),
+              total: customers?.length,
+              max: 5,
+              spacing: 4,
+              sx: {
+                "& .MuiAvatar-root": {
+                  width: 18,
+                  height: 18,
+                  fontSize: "0.6rem"
+                }
+              },
+              children: customers.map((x) => /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  title: x.customer?.name,
+                  src: getCustomerAvatar(
+                    x.customer?.did,
+                    x?.updated_at ? new Date(x.updated_at).toISOString() : "",
+                    24
+                  ),
+                  variant: "circular"
+                },
+                x.id
+              ))
+            }
+          ),
           customers?.length > 0 && t("payment.checkout.donation.gaveTips", { count: customers?.length })
         ] }),
         showCloseButton: false,

package/es/components/country-select.js

@@ -194,6 +194,7 @@ const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
       },
       sx: {
         width: "100%",
+        minWidth: "60px",
         fieldset: {
           display: "none"
         },

package/es/components/over-due-invoice-payment.js

@@ -1,15 +1,16 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Typography, Stack, Alert } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { joinURL } from "ufo";
 import { useRequest } from "ahooks";
+import pWaitFor from "p-wait-for";
 import { Dialog } from "@arcblock/ux";
 import { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
 import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";
-import { formatAmount, formatError, getPrefix } from "../libs/util.js";
+import { formatAmount, formatError, getPrefix, isCrossOrigin } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
 import LoadingButton from "./loading-button.js";
@@ -49,6 +50,7 @@ function OverdueInvoicePayment({
   const sourceType = subscriptionId ? "subscription" : "customer";
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
+  const customerIdRef = useRef(effectiveCustomerId);
   const {
     data = {
       summary: {},
@@ -58,7 +60,12 @@ function OverdueInvoicePayment({
     loading,
     runAsync: refresh
   } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
-    ready: !!subscriptionId || !!effectiveCustomerId
+    ready: !!subscriptionId || !!effectiveCustomerId,
+    onSuccess: (res) => {
+      if (res.customer?.id && res.customer?.id !== customerIdRef.current) {
+        customerIdRef.current = res.customer?.id;
+      }
+    }
   });
   const detailUrl = useMemo(() => {
     if (subscriptionId) {
@@ -95,13 +102,43 @@ function OverdueInvoicePayment({
       maxWait: 5e3
     }
   );
+  const isCrossOriginRequest = isCrossOrigin();
   const subscription = useSubscription("events");
+  const waitForInvoiceAllPaid = async () => {
+    let isPaid = false;
+    await pWaitFor(
+      async () => {
+        const res = await refresh();
+        isPaid = res.invoices?.length === 0;
+        return isPaid;
+      },
+      { interval: 2e3, timeout: 3 * 60 * 1e3 }
+    );
+    return isPaid;
+  };
+  const handleConnected = async () => {
+    if (isCrossOriginRequest) {
+      try {
+        const paid = await waitForInvoiceAllPaid();
+        if (successToast) {
+          Toast.close();
+          Toast.success(t("payment.customer.invoice.paySuccess"));
+        }
+        if (paid) {
+          setDialogOpen(false);
+          onPaid(sourceId, selectCurrencyId, sourceType);
+        }
+      } catch (err) {
+        console.error("Check payment status failed:", err);
+      }
+    }
+  };
   useEffect(() => {
-    if (subscription) {
+    if (subscription && !isCrossOriginRequest) {
       subscription.on("invoice.paid", ({ response }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && effectiveCustomerId === response.customer_id || customerIdRef.current && customerIdRef.current === response.customer_id) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
             debouncedHandleInvoicePaid(response.currency_id);
@@ -137,9 +174,11 @@ function OverdueInvoicePayment({
         saveConnect: false,
         action: "collect-batch",
         prefix: joinURL(getPrefix(), "/api/did"),
+        useSocket: !isCrossOriginRequest,
         extraParams,
         onSuccess: () => {
           connect.close();
+          handleConnected();
           setPayLoading(false);
           setPaymentStatus((prev) => ({
             ...prev,

package/es/history/invoice/list.js

@@ -19,7 +19,8 @@ import {
   formatToDatetime,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
-  getTxLink
+  getTxLink,
+  isCrossOrigin
 } from "../../libs/util.js";
 import Table from "../../components/table.js";
 import { createLink, handleNavigation } from "../../libs/navigation.js";
@@ -479,6 +480,7 @@ export default function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      useSocket: isCrossOrigin() === false,
       messages: {
         scan: "",
         title: t(`payment.customer.invoice.${action || "pay"}`),

package/es/libs/util.d.ts

@@ -3,6 +3,7 @@ import type { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
+export declare function isCrossOrigin(): boolean;
 export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;
@@ -49,6 +50,7 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
+export declare function hasMultipleRecurringIntervals(items: TLineItemExpanded[]): boolean;
 export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
     trialInDays: number;
     trialEnd: number;

package/es/libs/util.js

@@ -36,6 +36,16 @@ export const getPrefix = () => {
   }
   return joinURL(baseUrl, prefix);
 };
+export function isCrossOrigin() {
+  try {
+    const prefix = getPrefix();
+    const prefixOrigin = new URL(prefix).origin;
+    const currentOrigin = window.location.origin;
+    return prefixOrigin !== currentOrigin;
+  } catch (error) {
+    return false;
+  }
+}
 export function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {
     return "-";
@@ -429,6 +439,18 @@ export function formatPriceDisplay({ amount, then, actualAmount, showThen }, rec
   }
   return [amount, then].filter(Boolean).join(" ");
 }
+export function hasMultipleRecurringIntervals(items) {
+  const intervals = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.price?.recurring?.interval && item.price?.type === "recurring") {
+      intervals.add(`${item.price.recurring.interval}-${item.price.recurring.interval_count}`);
+      if (intervals.size > 1) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 export function getFreeTrialTime({ trialInDays, trialEnd }, locale = "en") {
   const now = dayjs().unix();
   if (trialEnd > 0 && trialEnd > now) {
@@ -491,6 +513,7 @@ export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd
     locale
   );
   const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
+  const differentRecurring = hasMultipleRecurringIntervals(items);
   if (items.every((x) => x.price.type === "recurring")) {
     const subscription2 = [
       hasMetered ? t("payment.checkout.least", locale) : "",
@@ -550,7 +573,7 @@ export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd
       action: t("payment.checkout.sub1", locale, { name }),
       amount,
       then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
-      showThen: hasMetered,
+      showThen: hasMetered && !differentRecurring,
       actualAmount
     };
     return {
@@ -576,7 +599,7 @@ export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd
       hasMetered && Number(subscription) === 0,
       locale
     ),
-    showThen: true,
+    showThen: !differentRecurring,
     actualAmount
   };
   return {

package/es/locales/en.js

@@ -115,7 +115,8 @@ export default flat({
       login: "Login to load and save contact information",
       next: {
         subscription: "View subscription",
-        invoice: "View invoice"
+        invoice: "View invoice",
+        view: "View"
       },
       paymentRequired: "Payment Required",
       staking: {

package/es/locales/zh.js

@@ -115,7 +115,8 @@ export default flat({
       login: "\u767B\u5F55\u4EE5\u52A0\u8F7D\u5E76\u4FDD\u5B58\u8054\u7CFB\u4FE1\u606F",
       next: {
         subscription: "\u67E5\u770B\u8BA2\u9605",
-        invoice: "\u67E5\u770B\u8D26\u5355"
+        invoice: "\u67E5\u770B\u8D26\u5355",
+        view: "\u67E5\u770B"
       },
       paymentRequired: "\u652F\u4ED8\u91D1\u989D",
       staking: {

package/es/payment/form/currency.d.ts

@@ -1,6 +1,6 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
-    value: number;
+    value: string;
     currencies: TPaymentCurrency[];
     onChange: Function;
 };

package/es/payment/form/currency.js

@@ -12,13 +12,13 @@ export default function CurrencySelector({ value, currencies, onChange }) {
         gap: 12,
         gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
       },
-      children: currencies.map((x, i) => {
-        const selected = i === value;
+      children: currencies.map((x) => {
+        const selected = x.id === value;
         return /* @__PURE__ */ jsx(
           Card,
           {
             variant: "outlined",
-            onClick: () => onChange(i),
+            onClick: () => onChange(x.id, x.method?.id),
             className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
             children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", sx: { position: "relative" }, children: [
               /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),

package/es/payment/form/index.d.ts

@@ -6,7 +6,7 @@ type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
     isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {
         onlyShowBtn: boolean;

package/es/payment/form/index.js

@@ -5,7 +5,7 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
@@ -20,8 +20,8 @@ import {
   formatError,
   formatQuantityInventory,
   getPrefix,
-  getQueryParams,
-  getStatementDescriptor
+  getStatementDescriptor,
+  isCrossOrigin
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -93,7 +93,6 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId,
   onlyShowBtn,
   isDonation = false
 }) {
@@ -130,33 +129,14 @@ export default function PaymentForm({
     stripePaying: false
   });
   const currencies = flattenPaymentMethods(paymentMethods);
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
-    const query = getQueryParams(window.location.href);
-    const queryCurrencyId = query.currencyId || currencyId;
-    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();
     }
   });
-  const onInvoicePaid = useMemoizedFn(async ({ response }) => {
-    if (response.customer_id === customer?.id && state.customerLimited) {
-      await onAction();
-    }
-  });
   useEffect(() => {
     if (subscription) {
       subscription.on("checkout.session.completed", onCheckoutComplete);
-      subscription.on("invoice.paid", onInvoicePaid);
     }
   }, [subscription]);
   const mergeUserInfo = (customerInfo, userInfo) => {
@@ -223,10 +203,6 @@ export default function PaymentForm({
     };
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
-  useEffect(() => {
-    setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
-    setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
-  }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const afterUserLoggedIn = useMemoizedFn(() => {
     if (hasDidWallet(session.user) || skipBindWallet) {
@@ -311,6 +287,7 @@ export default function PaymentForm({
             action: checkoutSession.mode,
             prefix: joinURL(getPrefix(), "/api/did"),
             saveConnect: false,
+            useSocket: isCrossOrigin() === false,
             extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
             onSuccess: async () => {
               connect.close();
@@ -324,6 +301,11 @@ export default function PaymentForm({
               console.error(err);
               setState({ submitting: false, paying: false });
               onError(err);
+            },
+            messages: {
+              title: "DID Connect",
+              scan: "Use following methods to complete this payment",
+              confirm: "Confirm"
             }
           });
         }
@@ -371,13 +353,13 @@ export default function PaymentForm({
       }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
-      } else {
-        session.bindWallet(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 2e3);
-        });
+        return;
       }
+      session.bindWallet(() => {
+        setTimeout(() => {
+          handleSubmit(onFormSubmit, onFormError)();
+        }, 2e3);
+      });
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -489,12 +471,16 @@ export default function PaymentForm({
           {
             name: "payment_currency",
             control,
-            render: () => /* @__PURE__ */ jsx(
+            render: ({ field }) => /* @__PURE__ */ jsx(
               CurrencySelector,
               {
-                value: paymentCurrencyIndex,
+                value: field.value,
                 currencies,
-                onChange: handleCurrencyChange
+                onChange: (id, methodId) => {
+                  field.onChange(id);
+                  setValue("payment_method", methodId);
+                  saveCurrencyPreference(id, session?.user?.did);
+                }
               }
             )
           }

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

@@ -144,11 +144,13 @@ function StripeCheckoutForm({
     // eslint-disable-line
   );
   return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
-    (!state.paymentMethod || state.paymentMethod === "card") && /* @__PURE__ */ jsx(
+    (!state.paymentMethod || ["link", "card"].includes(state.paymentMethod)) && /* @__PURE__ */ jsx(
       LinkAuthenticationElement,
       {
         options: {
-          defaultEmail: customer.email
+          defaultValues: {
+            email: customer.email
+          }
         }
       }
     ),

package/es/payment/index.js

@@ -108,6 +108,14 @@ function PaymentInner({
       )
     }
   });
+  useEffect(() => {
+    if (defaultCurrencyId) {
+      methods.setValue("payment_currency", defaultCurrencyId);
+    }
+    if (defaultMethodId) {
+      methods.setValue("payment_method", defaultMethodId);
+    }
+  }, [defaultCurrencyId, defaultMethodId]);
   useEffect(() => {
     if (!isMobileSafari()) {
       return () => {
@@ -207,7 +215,7 @@ function PaymentInner({
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0
           ),
-          showStaking: method.type === "arcblock",
+          showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
           currency,
           onUpsell,
           onDownsell,
@@ -240,6 +248,7 @@ function PaymentInner({
               action: state.checkoutSession.mode,
               invoiceId: state.checkoutSession.invoice_id,
               subscriptionId: state.checkoutSession.subscription_id,
+              subscriptions: state.checkoutSession.subscriptions,
               message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(
                 `payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`
               )

package/es/payment/product-donation.js

@@ -85,9 +85,10 @@ export default function ProductDonation({
     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 minPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] : 1;
+    let maxPreset = hasPresets ? sortedPresets[sortedPresets.length - 1] * 5 : 100;
+    const systemMax = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    maxPreset = Math.min(maxPreset, systemMax);
     const detectPrecision = () => {
       let maxPrecision = 2;
       if (!hasPresets)

package/es/payment/success.d.ts

@@ -5,12 +5,14 @@ type Props = {
     payee: string;
     invoiceId?: string;
     subscriptionId?: string;
+    subscriptions?: any[];
 };
-declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
+declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
 declare namespace PaymentSuccess {
     var defaultProps: {
         invoiceId: string;
         subscriptionId: string;
+        subscriptions: never[];
     };
 }
 export default PaymentSuccess;