@blocklet/payment-react 1.18.28 → 1.18.29

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

@@ -40,14 +40,15 @@ function OverdueInvoicePayment({
   authToken
 }) {
   const { t } = useLocaleContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState("");
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState({});
   const [paymentStatus, setPaymentStatus] = useState({});
   const sourceType = subscriptionId ? "subscription" : "customer";
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -56,18 +57,18 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
-    ready: !!subscriptionId || !!customerId
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
+    ready: !!subscriptionId || !!effectiveCustomerId
   });
   const detailUrl = useMemo(() => {
     if (subscriptionId) {
       return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return joinURL(getPrefix(), "/customer/invoice/past-due");
     }
     return "";
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
   const summaryList = useMemo(() => {
     if (!data?.summary) {
       return [];
@@ -100,7 +101,7 @@ function OverdueInvoicePayment({
       subscription.on("invoice.paid", ({ response }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || customerId && response.customer_id === customerId) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
             debouncedHandleInvoicePaid(response.currency_id);
@@ -108,7 +109,7 @@ function OverdueInvoicePayment({
         }
       });
     }
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = (item) => {
     const { currency, method } = item;
     if (method.type === "stripe") {
@@ -128,8 +129,8 @@ function OverdueInvoicePayment({
       const extraParams = { currencyId: currency.id };
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
         containerEl: void 0,
@@ -246,7 +247,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = "";
       if (summaryList.length === 1) {
         title = t("payment.customer.overdue.title", {
@@ -275,10 +276,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description
       });
     }
-    if (customerId) {
-      return t("payment.customer.overdue.empty");
-    }
-    return "";
+    return t("payment.customer.overdue.empty");
   };
   if (mode === "custom" && children && typeof children === "function") {
     return /* @__PURE__ */ jsx(Stack, { children: children(handlePay, {

package/es/payment/form/index.js

@@ -602,7 +602,7 @@ export default function PaymentForm({
     state.customerLimited && /* @__PURE__ */ jsx(
       OverdueInvoicePayment,
       {
-        customerId: customer?.id || session?.user?.didssion?.user?.did,
+        customerId: customer?.id || session?.user?.did,
         onPaid: () => {
           setState({ customerLimited: false });
           onAction();

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

@@ -51,7 +51,8 @@ function OverdueInvoicePayment({
     t
   } = (0, _context.useLocaleContext)();
   const {
-    connect
+    connect,
+    session
   } = (0, _payment.usePaymentContext)();
   const [selectCurrencyId, setSelectCurrencyId] = (0, _react.useState)("");
   const [payLoading, setPayLoading] = (0, _react.useState)(false);
@@ -59,7 +60,8 @@ function OverdueInvoicePayment({
   const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
   const [paymentStatus, setPaymentStatus] = (0, _react.useState)({});
   const sourceType = subscriptionId ? "subscription" : "customer";
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -70,20 +72,20 @@ function OverdueInvoicePayment({
     runAsync: refresh
   } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices({
     subscriptionId,
-    customerId,
+    customerId: effectiveCustomerId,
     authToken
   }), {
-    ready: !!subscriptionId || !!customerId
+    ready: !!subscriptionId || !!effectiveCustomerId
   });
   const detailUrl = (0, _react.useMemo)(() => {
     if (subscriptionId) {
       return (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return (0, _ufo.joinURL)((0, _util.getPrefix)(), "/customer/invoice/past-due");
     }
     return "";
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
   const summaryList = (0, _react.useMemo)(() => {
     if (!data?.summary) {
       return [];
@@ -114,7 +116,7 @@ function OverdueInvoicePayment({
       }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || customerId && response.customer_id === customerId) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies(prev => ({
               ...prev,
@@ -125,7 +127,7 @@ function OverdueInvoicePayment({
         }
       });
     }
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = item => {
     const {
       currency,
@@ -150,8 +152,8 @@ function OverdueInvoicePayment({
       };
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
         containerEl: void 0,
@@ -276,7 +278,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = "";
       if (summaryList.length === 1) {
         title = t("payment.customer.overdue.title", {
@@ -305,10 +307,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description
       });
     }
-    if (customerId) {
-      return t("payment.customer.overdue.empty");
-    }
-    return "";
+    return t("payment.customer.overdue.empty");
   };
   if (mode === "custom" && children && typeof children === "function") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/payment/form/index.js

@@ -681,7 +681,7 @@ function PaymentForm({
         })]
       })
     }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_overDueInvoicePayment.default, {
-      customerId: customer?.id || session?.user?.didssion?.user?.did,
+      customerId: customer?.id || session?.user?.did,
       onPaid: () => {
         setState({
           customerLimited: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.28",
+  "version": "1.18.29",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.28",
+    "@blocklet/payment-types": "1.18.29",
     "@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": "5e904113fcdc51ef6ef4d67b664ed14f733da384"
+  "gitHead": "bb8d03a1da62822cbc2ae57d7c5f2912aaebc0da"
 }

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

@@ -4,7 +4,14 @@ import { Button, Typography, Stack, Alert, SxProps } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
-import type { Invoice, PaymentCurrency, PaymentMethod, Subscription, TInvoiceExpanded } from '@blocklet/payment-types';
+import type {
+  Customer,
+  Invoice,
+  PaymentCurrency,
+  PaymentMethod,
+  Subscription,
+  TInvoiceExpanded,
+} from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 import { Dialog } from '@arcblock/ux';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
@@ -60,6 +67,7 @@ type OverdueInvoicesResult = {
   summary: { [key: string]: SummaryItem };
   invoices: Invoice[];
   subscriptionCount?: number;
+  customer?: Customer;
 };
 
 const fetchOverdueInvoices = async (params: {
@@ -95,7 +103,7 @@ function OverdueInvoicePayment({
   authToken,
 }: Props) {
   const { t } = useLocaleContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState('');
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
@@ -103,7 +111,8 @@ function OverdueInvoicePayment({
   const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' }>({});
 
   const sourceType = subscriptionId ? 'subscription' : 'customer';
-  const sourceId = subscriptionId || customerId;
+  const effectiveCustomerId = customerId || session?.user?.did;
+  const sourceId = subscriptionId || effectiveCustomerId;
   const {
     data = {
       summary: {},
@@ -112,19 +121,19 @@ function OverdueInvoicePayment({
     error,
     loading,
     runAsync: refresh,
-  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId, authToken }), {
-    ready: !!subscriptionId || !!customerId,
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId: effectiveCustomerId, authToken }), {
+    ready: !!subscriptionId || !!effectiveCustomerId,
   });
 
   const detailUrl = useMemo(() => {
     if (subscriptionId) {
       return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       return joinURL(getPrefix(), '/customer/invoice/past-due');
     }
     return '';
-  }, [subscriptionId, customerId]);
+  }, [subscriptionId, effectiveCustomerId]);
 
   const summaryList = useMemo(() => {
     if (!data?.summary) {
@@ -163,7 +172,7 @@ function OverdueInvoicePayment({
 
         if (
           (subscriptionId && response.subscription_id === subscriptionId) ||
-          (customerId && response.customer_id === customerId)
+          (effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id))
         ) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
@@ -173,7 +182,7 @@ function OverdueInvoicePayment({
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [subscription, subscriptionId, customerId]);
+  }, [subscription, subscriptionId, effectiveCustomerId]);
 
   const handlePay = (item: SummaryItem) => {
     const { currency, method } = item;
@@ -196,8 +205,8 @@ function OverdueInvoicePayment({
 
       if (subscriptionId) {
         extraParams.subscriptionId = subscriptionId;
-      } else if (customerId) {
-        extraParams.customerId = customerId;
+      } else if (effectiveCustomerId) {
+        extraParams.customerId = effectiveCustomerId;
       }
 
       connect.open({
@@ -343,7 +352,7 @@ function OverdueInvoicePayment({
         count: data.invoices?.length,
       });
     }
-    if (customerId) {
+    if (effectiveCustomerId) {
       let title = '';
       if (summaryList.length === 1) {
         title = t('payment.customer.overdue.title', {
@@ -374,11 +383,7 @@ function OverdueInvoicePayment({
         name: data.subscription?.description,
       });
     }
-    if (customerId) {
-      return t('payment.customer.overdue.empty');
-    }
-
-    return '';
+    return t('payment.customer.overdue.empty');
   };
 
   if (mode === 'custom' && children && typeof children === 'function') {

package/src/payment/form/index.tsx

@@ -726,7 +726,7 @@ export default function PaymentForm({
       </Fade>
       {state.customerLimited && (
         <OverdueInvoicePayment
-          customerId={customer?.id || session?.user?.didssion?.user?.did}
+          customerId={customer?.id || session?.user?.did}
           onPaid={() => {
             setState({ customerLimited: false });
             onAction();