@blocklet/payment-react 1.22.13 → 1.22.15

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

@@ -93,48 +93,45 @@ function OverdueInvoicePayment({
     }
     return Object.values(data.summary);
   }, [data?.summary]);
-  const debouncedHandleInvoicePaid = debounce(
-    async (currencyId) => {
-      if (stripePaymentInProgressRef.current[currencyId]) {
-        try {
-          const checkData = await fetchOverdueInvoices({
-            subscriptionId,
-            customerId: effectiveCustomerId,
-            authToken
-          });
-          const hasRemainingInvoices = checkData.invoices?.some((inv) => inv.currency_id === currencyId);
-          if (hasRemainingInvoices) {
-            return;
-          }
-          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);
+  const checkAndHandleInvoicePaid = async (currencyId) => {
+    if (stripePaymentInProgressRef.current[currencyId]) {
+      try {
+        const checkData = await fetchOverdueInvoices({
+          subscriptionId,
+          customerId: effectiveCustomerId,
+          authToken
+        });
+        const hasRemainingInvoices = checkData.invoices?.some((inv) => inv.currency_id === currencyId);
+        if (hasRemainingInvoices) {
           return;
         }
+        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;
       }
-      if (successToast) {
-        Toast.close();
-        Toast.success(t("payment.customer.invoice.paySuccess"));
-      }
-      setPayLoading(false);
-      const res = await refresh();
-      if (res.invoices?.length === 0) {
-        setDialogOpen(false);
-        onPaid(sourceId, currencyId, sourceType);
-      }
-    },
-    1e3,
-    {
-      leading: false,
-      trailing: true,
-      maxWait: 5e3
     }
-  );
+    if (successToast) {
+      Toast.close();
+      Toast.success(t("payment.customer.invoice.paySuccess"));
+    }
+    setPayLoading(false);
+    const res = await refresh();
+    if (res.invoices?.length === 0) {
+      setDialogOpen(false);
+      onPaid(sourceId, currencyId, sourceType);
+    }
+  };
+  const debouncedHandleInvoicePaid = debounce((currencyId) => checkAndHandleInvoicePaid(currencyId), 1e3, {
+    leading: false,
+    trailing: true,
+    maxWait: 5e3
+  });
   const isCrossOriginRequest = isCrossOrigin();
   const subscription = useSubscription("events");
   const waitForInvoiceAllPaid = async () => {
@@ -284,6 +281,7 @@ function OverdueInvoicePayment({
         {
           variant: options?.variant || "contained",
           size: "small",
+          onClick: () => checkAndHandleInvoicePaid(currency.id),
           ...primaryButton ? {} : {
             color: "success",
             startIcon: /* @__PURE__ */ jsx(CheckCircleIcon, {})
@@ -292,10 +290,13 @@ function OverdueInvoicePayment({
         }
       );
     }
-    if (status === "error") {
-      return /* @__PURE__ */ jsx(Button, { variant: options?.variant || "contained", size: "small", onClick: () => handlePay(item), sx: options?.sx, children: t("payment.subscription.overdue.retry") });
-    }
     if (item.method.type === "stripe") {
+      let buttonText = t("payment.subscription.overdue.payNow");
+      if (status === "error") {
+        buttonText = t("payment.subscription.overdue.retry");
+      } else if (status === "processing") {
+        buttonText = t("payment.subscription.overdue.processing");
+      }
       return /* @__PURE__ */ jsx(
         StripePaymentAction,
         {
@@ -319,7 +320,7 @@ function OverdueInvoicePayment({
               loading: paying || status === "processing",
               onClick: onPay,
               sx: options?.sx,
-              children: status === "processing" ? t("payment.subscription.overdue.processing") : t("payment.subscription.overdue.payNow")
+              children: buttonText
             }
           )
         }
@@ -334,7 +335,7 @@ function OverdueInvoicePayment({
         loading: inProcess,
         onClick: () => handlePay(item),
         sx: options?.sx,
-        children: t("payment.subscription.overdue.payNow")
+        children: status === "error" ? t("payment.subscription.overdue.retry") : t("payment.subscription.overdue.payNow")
       }
     );
   };

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

@@ -109,7 +109,7 @@ function OverdueInvoicePayment({
     }
     return Object.values(data.summary);
   }, [data?.summary]);
-  const debouncedHandleInvoicePaid = (0, _debounce.default)(async currencyId => {
+  const checkAndHandleInvoicePaid = async currencyId => {
     if (stripePaymentInProgressRef.current[currencyId]) {
       try {
         const checkData = await fetchOverdueInvoices({
@@ -147,7 +147,8 @@ function OverdueInvoicePayment({
       setDialogOpen(false);
       onPaid(sourceId, currencyId, sourceType);
     }
-  }, 1e3, {
+  };
+  const debouncedHandleInvoicePaid = (0, _debounce.default)(currencyId => checkAndHandleInvoicePaid(currencyId), 1e3, {
     leading: false,
     trailing: true,
     maxWait: 5e3
@@ -317,6 +318,7 @@ function OverdueInvoicePayment({
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
         variant: options?.variant || "contained",
         size: "small",
+        onClick: () => checkAndHandleInvoicePaid(currency.id),
         ...(primaryButton ? {} : {
           color: "success",
           startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckCircle, {})
@@ -324,16 +326,13 @@ function OverdueInvoicePayment({
         children: t("payment.subscription.overdue.paid")
       });
     }
-    if (status === "error") {
-      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        variant: options?.variant || "contained",
-        size: "small",
-        onClick: () => handlePay(item),
-        sx: options?.sx,
-        children: t("payment.subscription.overdue.retry")
-      });
-    }
     if (item.method.type === "stripe") {
+      let buttonText = t("payment.subscription.overdue.payNow");
+      if (status === "error") {
+        buttonText = t("payment.subscription.overdue.retry");
+      } else if (status === "processing") {
+        buttonText = t("payment.subscription.overdue.processing");
+      }
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripePaymentAction.default, {
         subscriptionId,
         customerId: !subscriptionId ? effectiveCustomerId : void 0,
@@ -359,7 +358,7 @@ function OverdueInvoicePayment({
           loading: paying || status === "processing",
           onClick: onPay,
           sx: options?.sx,
-          children: status === "processing" ? t("payment.subscription.overdue.processing") : t("payment.subscription.overdue.payNow")
+          children: buttonText
         })
       });
     }
@@ -370,7 +369,7 @@ function OverdueInvoicePayment({
       loading: inProcess,
       onClick: () => handlePay(item),
       sx: options?.sx,
-      children: t("payment.subscription.overdue.payNow")
+      children: status === "error" ? t("payment.subscription.overdue.retry") : t("payment.subscription.overdue.payNow")
     });
   };
   const getMethodText = method => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.22.13",
+  "version": "1.22.15",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.13",
+    "@blocklet/payment-types": "1.22.15",
     "@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": "20ea282ac9d84c8d5a0e9549484462a6d46aebd3"
+  "gitHead": "4d8543567eb8958c55a8cf06d9031f3f64c57e27"
 }

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

@@ -161,56 +161,53 @@ function OverdueInvoicePayment({
     return Object.values(data.summary);
   }, [data?.summary]);
 
-  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);
+  const checkAndHandleInvoicePaid = 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;
         }
-      }
 
-      // Now refresh and update UI
-      if (successToast) {
-        Toast.close();
-        Toast.success(t('payment.customer.invoice.paySuccess'));
-      }
-      setPayLoading(false);
-      const res = await refresh();
-      if (res.invoices?.length === 0) {
-        setDialogOpen(false);
-        onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
+        // 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;
       }
-    },
-    1000,
-    {
-      leading: false,
-      trailing: true,
-      maxWait: 5000,
     }
-  );
+
+    // Now refresh and update UI
+    if (successToast) {
+      Toast.close();
+      Toast.success(t('payment.customer.invoice.paySuccess'));
+    }
+    setPayLoading(false);
+    const res = await refresh();
+    if (res.invoices?.length === 0) {
+      setDialogOpen(false);
+      onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
+    }
+  };
+  const debouncedHandleInvoicePaid = debounce((currencyId: string) => checkAndHandleInvoicePaid(currencyId), 1000, {
+    leading: false,
+    trailing: true,
+    maxWait: 5000,
+  });
 
   const isCrossOriginRequest = isCrossOrigin();
 
@@ -391,6 +388,7 @@ function OverdueInvoicePayment({
         <Button
           variant={options?.variant || 'contained'}
           size="small"
+          onClick={() => checkAndHandleInvoicePaid(currency.id)}
           {...(primaryButton
             ? {}
             : {
@@ -402,15 +400,13 @@ function OverdueInvoicePayment({
       );
     }
 
-    if (status === 'error') {
-      return (
-        <Button variant={options?.variant || 'contained'} size="small" onClick={() => handlePay(item)} sx={options?.sx}>
-          {t('payment.subscription.overdue.retry')}
-        </Button>
-      );
-    }
-
     if (item.method.type === 'stripe') {
+      let buttonText = t('payment.subscription.overdue.payNow');
+      if (status === 'error') {
+        buttonText = t('payment.subscription.overdue.retry');
+      } else if (status === 'processing') {
+        buttonText = t('payment.subscription.overdue.processing');
+      }
       return (
         <StripePaymentAction
           subscriptionId={subscriptionId}
@@ -432,9 +428,7 @@ function OverdueInvoicePayment({
               loading={paying || status === 'processing'}
               onClick={onPay}
               sx={options?.sx}>
-              {status === 'processing'
-                ? t('payment.subscription.overdue.processing')
-                : t('payment.subscription.overdue.payNow')}
+              {buttonText}
             </LoadingButton>
           )}
         </StripePaymentAction>
@@ -448,7 +442,7 @@ function OverdueInvoicePayment({
         loading={inProcess}
         onClick={() => handlePay(item)}
         sx={options?.sx}>
-        {t('payment.subscription.overdue.payNow')}
+        {status === 'error' ? t('payment.subscription.overdue.retry') : t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );
   };