@blocklet/payment-react 1.21.16 → 1.22.0

package/lib/libs/util.js

@@ -14,6 +14,7 @@ exports.formatCouponTerms = void 0;
 exports.formatDateTime = formatDateTime;
 exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
+exports.formatLinkWithLocale = formatLinkWithLocale;
 exports.formatLocale = void 0;
 exports.formatMeteredThen = formatMeteredThen;
 exports.formatNumber = formatNumber;
@@ -1059,8 +1060,8 @@ function formatTotalPrice({
       totalAmount: "0"
     };
   }
-  const unitValue = new _util.BN(price.custom_unit_amount || price.unit_amount);
   const currency = price?.currency ?? {};
+  const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
   const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(quantity)), currency.decimal)} ${currency.symbol} `;
   const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol} `;
   const appendUnit = (v, alt) => {
@@ -1278,4 +1279,20 @@ function showStaking(method, currency, noStake) {
     return currency.type !== "credit";
   }
   return false;
+}
+function formatLinkWithLocale(url, locale) {
+  if (!locale || !url) {
+    return url;
+  }
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("locale", locale);
+    return urlObj.toString();
+  } catch (error) {
+    if (/[?&]locale=[^&]*/.test(url)) {
+      return url.replace(/([?&])locale=[^&]*/, `$1locale=${locale}`);
+    }
+    const separator = url.includes("?") ? "&" : "?";
+    return `${url}${separator}locale=${locale}`;
+  }
 }

package/lib/locales/en.js

@@ -115,7 +115,8 @@ module.exports = (0, _flat.default)({
       cancel: "Cancel"
     },
     paymentMethod: "Payment Method",
-    viewInvoice: "View Invoice"
+    viewInvoice: "View Invoice",
+    submit: "Submit"
   },
   payment: {
     checkout: {
@@ -453,7 +454,11 @@ module.exports = (0, _flat.default)({
         amountApplied: "Applied Credit",
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
+        payProcessing: "Payment is being processed, please refresh in a moment",
         payError: "Failed to pay the invoice",
+        sync: "Sync Status",
+        syncing: "Syncing...",
+        syncSuccess: "Synced successfully",
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
@@ -462,7 +467,16 @@ module.exports = (0, _flat.default)({
         invoiceNumber: "Invoice Number",
         emptyList: "No Invoices",
         noPaymentRequired: "No Payment Required",
-        payBatch: "Pay Due Invoices"
+        payBatch: "Pay Due Invoices",
+        stripePayDescription: "Complete payment using your saved payment method or add a new one.",
+        amount: "Amount",
+        paymentConfirmTitle: "Payment Confirmation",
+        paymentConfirmDescription: "After completing this payment, the payment method you use will be automatically set as the default for this subscription. Additionally, we will retry payment for any other unpaid invoices associated with this subscription.",
+        continue: "Continue"
+      },
+      overduePayment: {
+        setupPaymentDescription: "Use your saved card or add a new one to complete payment via Stripe.",
+        totalAmount: "Total Amount"
       },
       payment: {
         empty: "There are no payments",
@@ -531,7 +545,8 @@ module.exports = (0, _flat.default)({
         list: "Past Due Invoices:",
         empty: "There are no overdue invoices for your subscription {name}.",
         retry: "Retry",
-        paid: "Paid"
+        paid: "Paid",
+        processing: "Processing"
       }
     }
   },

package/lib/locales/zh.js

@@ -115,7 +115,8 @@ module.exports = (0, _flat.default)({
       cancel: "\u53D6\u6D88"
     },
     paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
-    viewInvoice: "\u67E5\u770B\u8D26\u5355"
+    viewInvoice: "\u67E5\u770B\u8D26\u5355",
+    submit: "\u63D0\u4EA4"
   },
   payment: {
     checkout: {
@@ -457,7 +458,11 @@ module.exports = (0, _flat.default)({
         amountApplied: "\u4F59\u989D\u53D8\u66F4",
         pay: "\u652F\u4ED8\u6B64\u8D26\u5355",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
+        payProcessing: "\u652F\u4ED8\u5904\u7406\u4E2D\uFF0C\u8BF7\u7A0D\u5019\u5237\u65B0\u67E5\u770B",
         payError: "\u652F\u4ED8\u5931\u8D25",
+        sync: "\u540C\u6B65\u72B6\u6001",
+        syncing: "\u540C\u6B65\u4E2D...",
+        syncSuccess: "\u540C\u6B65\u6210\u529F",
         renew: "\u6062\u590D\u8BA2\u9605",
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
@@ -466,7 +471,10 @@ module.exports = (0, _flat.default)({
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
         emptyList: "\u6CA1\u6709\u8D26\u5355",
         noPaymentRequired: "\u65E0\u9700\u652F\u4ED8",
-        payBatch: "\u652F\u4ED8\u6B20\u6B3E"
+        payBatch: "\u652F\u4ED8\u6B20\u6B3E",
+        paymentConfirmTitle: "\u652F\u4ED8\u786E\u8BA4",
+        paymentConfirmDescription: "\u5B8C\u6210\u672C\u6B21\u652F\u4ED8\u540E\uFF0C\u60A8\u4F7F\u7528\u7684\u652F\u4ED8\u65B9\u5F0F\u5C06\u81EA\u52A8\u8BBE\u7F6E\u4E3A\u8BE5\u8BA2\u9605\u7684\u9ED8\u8BA4\u652F\u4ED8\u65B9\u5F0F\u3002\u6B64\u5916\uFF0C\u6211\u4EEC\u8FD8\u5C06\u5BF9\u8BE5\u8BA2\u9605\u7684\u5176\u4ED6\u6B20\u8D39\u8D26\u5355\u8FDB\u884C\u91CD\u8BD5\u6536\u8D39\u3002",
+        continue: "\u7EE7\u7EED"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
@@ -535,7 +543,8 @@ module.exports = (0, _flat.default)({
         list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
         empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355",
         retry: "\u91CD\u65B0\u652F\u4ED8",
-        paid: "\u5DF2\u652F\u4ED8"
+        paid: "\u5DF2\u652F\u4ED8",
+        processing: "\u652F\u4ED8\u4E2D"
       }
     }
   },

package/lib/payment/form/stripe/form.d.ts

@@ -6,6 +6,7 @@ export type StripeCheckoutFormProps = {
     mode: string;
     onConfirm: Function;
     returnUrl?: string;
+    submitButtonText?: string;
 };
 export type StripeCheckoutProps = {
     clientSecret: string;
@@ -16,5 +17,7 @@ export type StripeCheckoutProps = {
     onConfirm: Function;
     onCancel: Function;
     returnUrl?: string;
+    title?: string;
+    submitButtonText?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, title, submitButtonText, }: StripeCheckoutProps): import("react").JSX.Element;

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

@@ -37,7 +37,8 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
-  returnUrl = ""
+  returnUrl = "",
+  submitButtonText = ""
 }) {
   const stripe = useStripe();
   const elements = useElements();
@@ -247,7 +248,7 @@ function StripeCheckoutForm({
       variant: "contained",
       color: "primary",
       size: "large",
-      children: t("payment.checkout.continue", {
+      children: submitButtonText || t("payment.checkout.continue", {
         action: t(`payment.checkout.${mode}`)
       })
     }), state.message && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -276,7 +277,9 @@ function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
-  returnUrl = ""
+  returnUrl = "",
+  title = "",
+  submitButtonText = ""
 }) {
   const stripePromise = loadStripe(publicKey);
   const {
@@ -301,7 +304,7 @@ function StripeCheckout({
     onCancel();
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
-    title: t("payment.checkout.cardPay", {
+    title: title || t("payment.checkout.cardPay", {
       action: t(`payment.checkout.${mode}`)
     }),
     showCloseButton: state.closable,
@@ -352,7 +355,8 @@ function StripeCheckout({
         mode,
         customer,
         onConfirm,
-        returnUrl
+        returnUrl,
+        submitButtonText
       })
     })
   });

package/lib/payment/product-item.js

@@ -204,7 +204,7 @@ function ProductItem({
       return t(getLocaleKey("normal", type2), buildBaseParams());
     }
     const pendingAmountBN = new _util.BN(pendingAmount || "0");
-    const creditAmountBN = (0, _util.fromTokenToUnit)(new _util.BN(creditAmount), creditCurrency?.decimal || 2);
+    const creditAmountBN = (0, _util.fromTokenToUnit)(creditAmount, creditCurrency?.decimal || 2);
     const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
     const currentPurchaseCreditBN = creditAmountBN.mul(new _util.BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();

package/lib/payment/summary.js

@@ -446,7 +446,7 @@ function PaymentSummary({
         sx: {
           justifyContent: "space-between",
           alignItems: "center",
-          ...(staking > 0 && {
+          ...(+staking > 0 && {
             borderTop: "1px solid",
             borderColor: "divider",
             pt: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.21.16",
+  "version": "1.22.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.46",
-    "@arcblock/ux": "^3.1.46",
-    "@arcblock/ws": "^1.25.6",
-    "@blocklet/theme": "^3.1.46",
-    "@blocklet/ui-react": "^3.1.46",
+    "@arcblock/did-connect-react": "^3.1.52",
+    "@arcblock/ux": "^3.1.52",
+    "@arcblock/ws": "^1.26.3",
+    "@blocklet/theme": "^3.1.52",
+    "@blocklet/ui-react": "^3.1.52",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.25.6",
+    "@ocap/util": "^1.26.3",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.21.16",
+    "@blocklet/payment-types": "1.22.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "16509d9abd2da2f52587972c863c79ba9e4cd49d"
+  "gitHead": "d69619c7d669bc6de8620273ff0f3f7b5d56383f"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -22,6 +22,7 @@ import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/uti
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
+import StripePaymentAction from './stripe-payment-action';
 
 type DialogProps = {
   open?: boolean;
@@ -112,12 +113,20 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState<{ [key: string]: number }>({});
-  const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' }>({});
+  const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' | 'processing' }>(
+    {}
+  );
+  const [stripePaymentInProgress, setStripePaymentInProgress] = useState<{ [key: string]: boolean }>({});
+  const stripePaymentInProgressRef = useRef(stripePaymentInProgress);
 
   const sourceType = subscriptionId ? 'subscription' : 'customer';
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
   const customerIdRef = useRef(effectiveCustomerId);
+
+  useEffect(() => {
+    stripePaymentInProgressRef.current = stripePaymentInProgress;
+  }, [stripePaymentInProgress]);
   const {
     data = {
       summary: {},
@@ -154,6 +163,36 @@ function OverdueInvoicePayment({
 
   const debouncedHandleInvoicePaid = debounce(
     async (currencyId: string) => {
+      // If Stripe payment is in progress, check if it's complete before refreshing
+      if (stripePaymentInProgressRef.current[currencyId]) {
+        try {
+          const checkData = await fetchOverdueInvoices({
+            subscriptionId,
+            customerId: effectiveCustomerId,
+            authToken,
+          });
+
+          const hasRemainingInvoices = checkData.invoices?.some((inv: Invoice) => inv.currency_id === currencyId);
+
+          // Only refresh UI when all invoices are paid
+          if (hasRemainingInvoices) {
+            return;
+          }
+
+          // Clear Stripe payment state
+          setStripePaymentInProgress((prev) => {
+            const newState = { ...prev };
+            delete newState[currencyId];
+            return newState;
+          });
+          setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'success' }));
+        } catch (err) {
+          console.error('Error checking Stripe payment completion:', err);
+          return;
+        }
+      }
+
+      // Now refresh and update UI
       if (successToast) {
         Toast.close();
         Toast.success(t('payment.customer.invoice.paySuccess'));
@@ -189,7 +228,7 @@ function OverdueInvoicePayment({
     return isPaid;
   };
 
-  const handleConnected = async () => {
+  const handleConnected = async (currencyId: string, isStripe = false) => {
     if (isCrossOriginRequest) {
       try {
         const paid = await waitForInvoiceAllPaid();
@@ -199,32 +238,43 @@ function OverdueInvoicePayment({
         }
         if (paid) {
           setDialogOpen(false);
-          onPaid(sourceId as string, selectCurrencyId, sourceType as 'subscription' | 'customer');
+          onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
         }
       } catch (err) {
         console.error('Check payment status failed:', err);
       }
+    } else if (isStripe) {
+      setStripePaymentInProgress((prev) => ({ ...prev, [currencyId]: true }));
+      setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'processing' }));
     }
   };
 
   useEffect(() => {
-    if (subscription && !isCrossOriginRequest) {
-      subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
-        const relevantId = subscriptionId || response.customer_id;
-        const uniqueKey = `${relevantId}-${response.currency_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);
-          }
-        }
-      });
+    if (!subscription || isCrossOriginRequest) {
+      return undefined;
     }
+
+    const handleInvoicePaid = ({ response }: { response: TInvoiceExpanded }) => {
+      const relevantId = subscriptionId || response.customer_id;
+      const uniqueKey = `${relevantId}-${response.currency_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);
+        }
+      }
+    };
+
+    subscription.on('invoice.paid', handleInvoicePaid);
+
+    return () => {
+      subscription.off('invoice.paid', handleInvoicePaid);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subscription, subscriptionId, effectiveCustomerId]);
 
@@ -268,7 +318,7 @@ function OverdueInvoicePayment({
         } as any,
         onSuccess: () => {
           connect.close();
-          handleConnected();
+          handleConnected(currency.id);
           setPayLoading(false);
           setPaymentStatus((prev) => ({
             ...prev,
@@ -325,7 +375,7 @@ function OverdueInvoicePayment({
   const renderPayButton = (
     item: SummaryItem,
     primaryButton = true,
-    props: {
+    options: {
       variant?: 'contained' | 'text';
       sx?: SxProps;
     } = {
@@ -339,8 +389,7 @@ function OverdueInvoicePayment({
     if (status === 'success') {
       return (
         <Button
-          // eslint-disable-next-line react/prop-types
-          variant={props?.variant || 'contained'}
+          variant={options?.variant || 'contained'}
           size="small"
           {...(primaryButton
             ? {}
@@ -355,7 +404,7 @@ function OverdueInvoicePayment({
 
     if (status === 'error') {
       return (
-        <Button variant="contained" size="small" onClick={() => handlePay(item)} {...props}>
+        <Button variant={options?.variant || 'contained'} size="small" onClick={() => handlePay(item)} sx={options?.sx}>
           {t('payment.subscription.overdue.retry')}
         </Button>
       );
@@ -363,19 +412,42 @@ function OverdueInvoicePayment({
 
     if (item.method.type === 'stripe') {
       return (
-        <Button variant="contained" color="primary" onClick={() => window.open(detailUrl, '_blank')} {...props}>
-          {t('payment.subscription.overdue.viewNow')}
-        </Button>
+        <StripePaymentAction
+          subscriptionId={subscriptionId}
+          customerId={!subscriptionId ? effectiveCustomerId : undefined}
+          currencyId={currency.id}
+          paymentMethod={item.method}
+          onSuccess={() => {
+            handleConnected(currency.id, true);
+          }}
+          onError={() => {
+            setPaymentStatus((prev) => ({ ...prev, [currency.id]: 'error' }));
+            setStripePaymentInProgress((prev) => ({ ...prev, [currency.id]: false }));
+          }}>
+          {(onPay: () => void, paying: boolean) => (
+            <LoadingButton
+              variant={options?.variant || 'contained'}
+              size="small"
+              disabled={paying || status === 'processing'}
+              loading={paying || status === 'processing'}
+              onClick={onPay}
+              sx={options?.sx}>
+              {status === 'processing'
+                ? t('payment.subscription.overdue.processing')
+                : t('payment.subscription.overdue.payNow')}
+            </LoadingButton>
+          )}
+        </StripePaymentAction>
       );
     }
     return (
       <LoadingButton
-        variant="contained"
+        variant={options?.variant || 'contained'}
         size="small"
         disabled={inProcess}
         loading={inProcess}
         onClick={() => handlePay(item)}
-        {...props}>
+        sx={options?.sx}>
         {t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );

package/src/components/payment-beneficiaries.tsx

@@ -3,7 +3,7 @@ import { Avatar, Box, Stack, Typography } from '@mui/material';
 import { BN } from '@ocap/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DID from '@arcblock/ux/lib/DID';
-import { formatBNStr } from '../libs/util';
+import { formatBNStr, formatLinkWithLocale } from '../libs/util';
 
 export interface TBeneficiary {
   name: string;
@@ -26,7 +26,7 @@ interface BenefitsProps {
 }
 
 export default function PaymentBeneficiaries({ data, currency, totalAmount = '0' }: BenefitsProps) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   return (
     <Stack spacing={2}>
       <Typography
@@ -78,7 +78,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                   variant="subtitle2"
                   onClick={() => {
                     if (item.url) {
-                      window.open(item.url, '_blank');
+                      window.open(formatLinkWithLocale(item.url, locale), '_blank');
                     }
                   }}
                   sx={{