@blocklet/payment-react 1.16.10 → 1.16.12

package/README.md

@@ -213,8 +213,9 @@ import { CheckoutDonate } from '@blocklet/payment-react';
     // ... other settings
   }}
 >
-  {(openDonate, totalAmount, supporters) => (
+  {(openDonate, totalAmount, supporters, loading) => (
     <div>
+      {loading && <div>Loading...</div>}
       <button onClick={openDonate}>
         Support Us
       </button>

package/es/checkout/donate.d.ts

@@ -21,7 +21,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
         button?: ButtonType;
     };
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
-    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
+    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean) => React.ReactNode;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {

package/es/checkout/donate.js

@@ -29,14 +29,15 @@ import { PaymentThemeProvider } from "../theme/index.js";
 import { usePaymentContext } from "../contexts/payment.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
-  if (!donationCache[settings.target]) {
-    donationCache[settings.target] = api.post(`/api/donations?livemode=${livemode}`, omit(settings, ["appearance"])).then((res) => res.data).finally(() => {
+  const donationKey = `${settings.target}-${livemode}`;
+  if (!donationCache[donationKey]) {
+    donationCache[donationKey] = api.post(`/api/donations?livemode=${livemode}`, omit(settings, ["appearance"])).then((res) => res.data).finally(() => {
       setTimeout(() => {
-        delete donationCache[settings.target];
+        delete donationCache[donationKey];
       }, 3e3);
     });
   }
-  return donationCache[settings.target];
+  return donationCache[donationKey];
 };
 const supporterCache = {};
 const fetchSupporters = (target, livemode = true) => {
@@ -361,7 +362,8 @@ function CheckoutDonateInner({
           supporters.data?.totalAmount || "0",
           supporters.data?.currency?.decimal
         )} ${supporters.data?.currency?.symbol}`,
-        supporters.data || {}
+        supporters.data || {},
+        !!supporters.loading
       ) }) : /* @__PURE__ */ jsxs(Typography, { children: [
         "Please provide a valid render function ",
         /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters) => ReactNode" })

package/lib/checkout/donate.d.ts

@@ -21,7 +21,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
         button?: ButtonType;
     };
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
-    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
+    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean) => React.ReactNode;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {

package/lib/checkout/donate.js

@@ -21,14 +21,15 @@ var _payment = require("../contexts/payment");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
-  if (!donationCache[settings.target]) {
-    donationCache[settings.target] = _api.default.post(`/api/donations?livemode=${livemode}`, (0, _omit.default)(settings, ["appearance"])).then(res => res.data).finally(() => {
+  const donationKey = `${settings.target}-${livemode}`;
+  if (!donationCache[donationKey]) {
+    donationCache[donationKey] = _api.default.post(`/api/donations?livemode=${livemode}`, (0, _omit.default)(settings, ["appearance"])).then(res => res.data).finally(() => {
       setTimeout(() => {
-        delete donationCache[settings.target];
+        delete donationCache[donationKey];
       }, 3e3);
     });
   }
-  return donationCache[settings.target];
+  return donationCache[donationKey];
 };
 const supporterCache = {};
 const fetchSupporters = (target, livemode = true) => {
@@ -451,7 +452,7 @@ function CheckoutDonateInner({
     }
     if (mode === "custom") {
       return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {})
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {}, !!supporters.loading)
       }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
           children: "(openDonate, donateTotalAmount, supporters) => ReactNode"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.10",
+  "version": "1.16.12",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.16.10",
+    "@blocklet/payment-types": "1.16.12",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "ee0052f6d37257507d69b979ea11ae22ffd622b7"
+  "gitHead": "1af1e91e65dfb78b39d65a1d8d3396be83a9c04f"
 }

package/src/checkout/donate.tsx

@@ -62,23 +62,29 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     button?: ButtonType;
   };
   theme?: 'default' | 'inherit' | PaymentThemeOptions;
-  children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
+  children?: (
+    openDialog: () => void,
+    donateTotalAmount: string,
+    supporters: DonateHistory,
+    loading?: boolean
+  ) => React.ReactNode;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
 const createOrUpdateDonation = (settings: DonationSettings, livemode: boolean = true): Promise<TPaymentLink> => {
-  if (!donationCache[settings.target]) {
-    donationCache[settings.target] = api
+  const donationKey = `${settings.target}-${livemode}`;
+  if (!donationCache[donationKey]) {
+    donationCache[donationKey] = api
       .post(`/api/donations?livemode=${livemode}`, omit(settings, ['appearance']))
       .then((res) => res.data)
       .finally(() => {
         setTimeout(() => {
-          delete donationCache[settings.target];
+          delete donationCache[donationKey];
         }, 3000);
       });
   }
 
-  return donationCache[settings.target];
+  return donationCache[donationKey];
 };
 
 const supporterCache: { [key: string]: Promise<DonateHistory> } = {};
@@ -467,7 +473,8 @@ function CheckoutDonateInner({
               (supporters.data as DonateHistory)?.totalAmount || '0',
               (supporters.data as DonateHistory)?.currency?.decimal
             )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
-            (supporters.data as DonateHistory) || {}
+            (supporters.data as DonateHistory) || {},
+            !!supporters.loading
           )}
         </>
       ) : (