@blocklet/payment-react 1.22.14 → 1.22.16

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

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Typography, Stack, Alert, useTheme } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import useArcblockBrowser from "@arcblock/react-hooks/lib/useBrowser";
 import Toast from "@arcblock/ux/lib/Toast";
 import { joinURL } from "ufo";
 import { useRequest } from "ahooks";
@@ -44,6 +45,8 @@ function OverdueInvoicePayment({
   authToken = void 0
 }) {
   const { t, locale } = useLocaleContext();
+  const browser = useArcblockBrowser();
+  const inArcSphere = browser?.arcSphere;
   const theme = useTheme();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState("");
@@ -134,12 +137,17 @@ function OverdueInvoicePayment({
   });
   const isCrossOriginRequest = isCrossOrigin();
   const subscription = useSubscription("events");
-  const waitForInvoiceAllPaid = async () => {
+  const waitForInvoicePaidByCurrency = async (currencyId) => {
     let isPaid = false;
     await pWaitFor(
       async () => {
-        const res = await refresh();
-        isPaid = res.invoices?.length === 0;
+        const checkData = await fetchOverdueInvoices({
+          subscriptionId,
+          customerId: effectiveCustomerId,
+          authToken
+        });
+        const hasRemainingInvoices = checkData.invoices?.some((inv) => inv.currency_id === currencyId);
+        isPaid = !hasRemainingInvoices;
         return isPaid;
       },
       { interval: 2e3, timeout: 3 * 60 * 1e3 }
@@ -147,19 +155,26 @@ function OverdueInvoicePayment({
     return isPaid;
   };
   const handleConnected = async (currencyId, isStripe = false) => {
-    if (isCrossOriginRequest) {
+    if (isCrossOriginRequest || inArcSphere) {
       try {
-        const paid = await waitForInvoiceAllPaid();
-        if (successToast) {
-          Toast.close();
-          Toast.success(t("payment.customer.invoice.paySuccess"));
-        }
+        const paid = await waitForInvoicePaidByCurrency(currencyId);
         if (paid) {
-          setDialogOpen(false);
-          onPaid(sourceId, currencyId, sourceType);
+          setPaymentStatus((prev) => ({ ...prev, [currencyId]: "success" }));
+          const finalRes = await refresh();
+          if (successToast) {
+            Toast.close();
+            Toast.success(t("payment.customer.invoice.paySuccess"));
+          }
+          if (finalRes.invoices?.length === 0) {
+            setDialogOpen(false);
+            onPaid(sourceId, currencyId, sourceType);
+          }
         }
       } catch (err) {
         console.error("Check payment status failed:", err);
+        setPaymentStatus((prev) => ({ ...prev, [currencyId]: "error" }));
+      } finally {
+        setPayLoading(false);
       }
     } else if (isStripe) {
       setStripePaymentInProgress((prev) => ({ ...prev, [currencyId]: true }));
@@ -167,7 +182,7 @@ function OverdueInvoicePayment({
     }
   };
   useEffect(() => {
-    if (!subscription || isCrossOriginRequest) {
+    if (!subscription || isCrossOriginRequest || inArcSphere) {
       return void 0;
     }
     const handleInvoicePaid = ({ response }) => {

package/es/libs/util.js

@@ -675,7 +675,7 @@ export const getSubscriptionTimeSummary = (subscription, locale = "en") => {
     if (subscription.cancel_at) {
       const endTime = subscription.cancel_at * 1e3;
       const { time: time2, isToday: isToday2 } = getLineTimeInfo(endTime, locale);
-      return { action: "willEnd", time: time2, isToday: isToday2 };
+      return { action: endTime > Date.now() ? "willEnd" : "ended", time: time2, isToday: isToday2 };
     }
     if (subscription.cancel_at_period_end) {
       const endTime = subscription.current_period_end * 1e3;
@@ -688,7 +688,7 @@ export const getSubscriptionTimeSummary = (subscription, locale = "en") => {
   if (subscription.status === "past_due") {
     const endTime = (subscription.cancel_at || subscription.current_period_end) * 1e3;
     const { time, isToday } = getLineTimeInfo(endTime, locale);
-    return { action: "ended", time, isToday };
+    return { action: endTime > Date.now() ? "willEnd" : "ended", time, isToday };
   }
   if (subscription.status === "canceled") {
     const { time, isToday } = getLineTimeInfo(subscription.canceled_at * 1e3, locale);

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

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _ufo = require("ufo");
 var _ahooks = require("ahooks");
@@ -55,6 +56,8 @@ function OverdueInvoicePayment({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const browser = (0, _useBrowser.default)();
+  const inArcSphere = browser?.arcSphere;
   const theme = (0, _material.useTheme)();
   const {
     connect,
@@ -155,11 +158,16 @@ function OverdueInvoicePayment({
   });
   const isCrossOriginRequest = (0, _util.isCrossOrigin)();
   const subscription = (0, _subscription.useSubscription)("events");
-  const waitForInvoiceAllPaid = async () => {
+  const waitForInvoicePaidByCurrency = async currencyId => {
     let isPaid = false;
     await (0, _pWaitFor.default)(async () => {
-      const res = await refresh();
-      isPaid = res.invoices?.length === 0;
+      const checkData = await fetchOverdueInvoices({
+        subscriptionId,
+        customerId: effectiveCustomerId,
+        authToken
+      });
+      const hasRemainingInvoices = checkData.invoices?.some(inv => inv.currency_id === currencyId);
+      isPaid = !hasRemainingInvoices;
       return isPaid;
     }, {
       interval: 2e3,
@@ -168,19 +176,32 @@ function OverdueInvoicePayment({
     return isPaid;
   };
   const handleConnected = async (currencyId, isStripe = false) => {
-    if (isCrossOriginRequest) {
+    if (isCrossOriginRequest || inArcSphere) {
       try {
-        const paid = await waitForInvoiceAllPaid();
-        if (successToast) {
-          _Toast.default.close();
-          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
-        }
+        const paid = await waitForInvoicePaidByCurrency(currencyId);
         if (paid) {
-          setDialogOpen(false);
-          onPaid(sourceId, currencyId, sourceType);
+          setPaymentStatus(prev => ({
+            ...prev,
+            [currencyId]: "success"
+          }));
+          const finalRes = await refresh();
+          if (successToast) {
+            _Toast.default.close();
+            _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+          }
+          if (finalRes.invoices?.length === 0) {
+            setDialogOpen(false);
+            onPaid(sourceId, currencyId, sourceType);
+          }
         }
       } catch (err) {
         console.error("Check payment status failed:", err);
+        setPaymentStatus(prev => ({
+          ...prev,
+          [currencyId]: "error"
+        }));
+      } finally {
+        setPayLoading(false);
       }
     } else if (isStripe) {
       setStripePaymentInProgress(prev => ({
@@ -194,7 +215,7 @@ function OverdueInvoicePayment({
     }
   };
   (0, _react.useEffect)(() => {
-    if (!subscription || isCrossOriginRequest) {
+    if (!subscription || isCrossOriginRequest || inArcSphere) {
       return void 0;
     }
     const handleInvoicePaid = ({

package/lib/libs/util.js

@@ -834,7 +834,7 @@ const getSubscriptionTimeSummary = (subscription, locale = "en") => {
         isToday: isToday2
       } = getLineTimeInfo(endTime, locale);
       return {
-        action: "willEnd",
+        action: endTime > Date.now() ? "willEnd" : "ended",
         time: time2,
         isToday: isToday2
       };
@@ -868,7 +868,7 @@ const getSubscriptionTimeSummary = (subscription, locale = "en") => {
       isToday
     } = getLineTimeInfo(endTime, locale);
     return {
-      action: "ended",
+      action: endTime > Date.now() ? "willEnd" : "ended",
       time,
       isToday
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.22.14",
+  "version": "1.22.16",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,18 +54,18 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^3.2.6",
-    "@arcblock/did-connect-react": "^3.2.6",
-    "@arcblock/react-hooks": "^3.2.6",
-    "@arcblock/ux": "^3.2.6",
-    "@arcblock/ws": "^1.27.6",
-    "@blocklet/theme": "^3.2.6",
-    "@blocklet/ui-react": "^3.2.6",
+    "@arcblock/bridge": "^3.2.7",
+    "@arcblock/did-connect-react": "^3.2.7",
+    "@arcblock/react-hooks": "^3.2.7",
+    "@arcblock/ux": "^3.2.7",
+    "@arcblock/ws": "^1.27.11",
+    "@blocklet/theme": "^3.2.7",
+    "@blocklet/ui-react": "^3.2.7",
     "@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.27.6",
+    "@ocap/util": "^1.27.11",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.22.14",
+    "@blocklet/payment-types": "1.22.16",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "fc9395e0eaf4472b42192835fb4933da469939c6"
+  "gitHead": "68ff7bcdc9f185a8d885d9af189d2e2c1cc5fbf6"
 }

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

@@ -2,6 +2,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Typography, Stack, Alert, SxProps, useTheme } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import useArcblockBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
 import type {
@@ -107,6 +108,8 @@ function OverdueInvoicePayment({
   authToken = undefined,
 }: Props) {
   const { t, locale } = useLocaleContext();
+  const browser = useArcblockBrowser();
+  const inArcSphere = browser?.arcSphere;
   const theme = useTheme();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState('');
@@ -212,12 +215,17 @@ function OverdueInvoicePayment({
   const isCrossOriginRequest = isCrossOrigin();
 
   const subscription = useSubscription('events');
-  const waitForInvoiceAllPaid = async () => {
+  const waitForInvoicePaidByCurrency = async (currencyId: string) => {
     let isPaid = false;
     await pWaitFor(
       async () => {
-        const res = await refresh();
-        isPaid = res.invoices?.length === 0;
+        const checkData = await fetchOverdueInvoices({
+          subscriptionId,
+          customerId: effectiveCustomerId,
+          authToken,
+        });
+        const hasRemainingInvoices = checkData.invoices?.some((inv: Invoice) => inv.currency_id === currencyId);
+        isPaid = !hasRemainingInvoices;
         return isPaid;
       },
       { interval: 2000, timeout: 3 * 60 * 1000 }
@@ -226,19 +234,26 @@ function OverdueInvoicePayment({
   };
 
   const handleConnected = async (currencyId: string, isStripe = false) => {
-    if (isCrossOriginRequest) {
+    if (isCrossOriginRequest || inArcSphere) {
       try {
-        const paid = await waitForInvoiceAllPaid();
-        if (successToast) {
-          Toast.close();
-          Toast.success(t('payment.customer.invoice.paySuccess'));
-        }
+        const paid = await waitForInvoicePaidByCurrency(currencyId);
         if (paid) {
-          setDialogOpen(false);
-          onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
+          setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'success' }));
+          const finalRes = await refresh();
+          if (successToast) {
+            Toast.close();
+            Toast.success(t('payment.customer.invoice.paySuccess'));
+          }
+          if (finalRes.invoices?.length === 0) {
+            setDialogOpen(false);
+            onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
+          }
         }
       } catch (err) {
         console.error('Check payment status failed:', err);
+        setPaymentStatus((prev) => ({ ...prev, [currencyId]: 'error' }));
+      } finally {
+        setPayLoading(false);
       }
     } else if (isStripe) {
       setStripePaymentInProgress((prev) => ({ ...prev, [currencyId]: true }));
@@ -247,7 +262,7 @@ function OverdueInvoicePayment({
   };
 
   useEffect(() => {
-    if (!subscription || isCrossOriginRequest) {
+    if (!subscription || isCrossOriginRequest || inArcSphere) {
       return undefined;
     }
 

package/src/libs/util.ts

@@ -898,7 +898,7 @@ export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded,
     if (subscription.cancel_at) {
       const endTime = subscription.cancel_at * 1000;
       const { time, isToday } = getLineTimeInfo(endTime, locale);
-      return { action: 'willEnd', time, isToday };
+      return { action: endTime > Date.now() ? 'willEnd' : 'ended', time, isToday };
     }
     if (subscription.cancel_at_period_end) {
       const endTime = subscription.current_period_end * 1000;
@@ -911,7 +911,7 @@ export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded,
   if (subscription.status === 'past_due') {
     const endTime = (subscription.cancel_at || subscription.current_period_end) * 1000;
     const { time, isToday } = getLineTimeInfo(endTime, locale);
-    return { action: 'ended', time, isToday };
+    return { action: endTime > Date.now() ? 'willEnd' : 'ended', time, isToday };
   }
   if (subscription.status === 'canceled') {
     const { time, isToday } = getLineTimeInfo(subscription.canceled_at * 1000, locale);