@blocklet/payment-react 1.13.200 → 1.13.202

package/es/checkout/form.js

@@ -6,9 +6,16 @@ import { joinURL } from "ufo";
 import api from "../api.js";
 import Payment from "../payment/index.js";
 import { getPrefix, mergeExtraParams } from "../util.js";
-const startFromPaymentLink = async (id, params) => {
-  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
-  return data;
+const promises = {};
+const startFromPaymentLink = (id, params) => {
+  if (!promises[id]) {
+    promises[id] = api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`).then((res) => res.data).finally(() => {
+      setTimeout(() => {
+        delete promises[id];
+      }, 3e3);
+    });
+  }
+  return promises[id];
 };
 const fetchCheckoutSession = async (id) => {
   const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
@@ -25,9 +32,13 @@ export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBa
   );
   useEffect(() => {
     if (type === "paymentLink" && mode === "standalone" && data) {
-      window.history.replaceState(null, "", joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+      window.history.replaceState(
+        null,
+        "",
+        joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}?${mergeExtraParams(extraParams)}`)
+      );
     }
-  }, [type, mode, data]);
+  }, [type, mode, data, extraParams]);
   const handlePaid = () => {
     setState({ completed: true });
     onPaid?.(data);

package/es/payment/form/index.js

@@ -140,7 +140,7 @@ export default function PaymentForm({
       }
     }
   };
-  const onSubmit = async (data) => {
+  const onFormSubmit = async (data) => {
     setState({ submitting: true });
     try {
       const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
@@ -200,14 +200,23 @@ export default function PaymentForm({
       setState({ submitting: false });
     }
   };
+  const onFormError = () => {
+    setState({ submitting: false });
+  };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onSubmit)();
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
-      session?.login({
-        // @ts-ignored
-        onSuccess: onUserLoggedIn,
-        extraParams: {}
+      session?.login(() => {
+        setState({ submitting: true });
+        onUserLoggedIn().then(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 50);
+        }).catch((err) => {
+          console.error(err);
+          setState({ submitting: false });
+        });
       });
     }
   };

package/es/util.d.ts

@@ -27,7 +27,7 @@ export declare function getPaymentIntentStatusColor(status: string): "success" |
 export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
 export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
 export declare function getWebhookStatusColor(status: string): "success" | "default";
-export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {
+export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;
     renew: any;

package/es/util.js

@@ -265,7 +265,7 @@ export function getWebhookStatusColor(status) {
       return "default";
   }
 }
-export function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
+export function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
   let renew = new BN(0);
   const total = items.filter((x) => {
     const price = upsell ? x.upsell_price || x.price : x.price;
@@ -274,7 +274,7 @@ export function getCheckoutAmount(items, currency, includeFreeTrial = false, ups
     const price = upsell ? x.upsell_price || x.price : x.price;
     if (price?.type === "recurring") {
       renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
-      if (includeFreeTrial) {
+      if (trialing) {
         return acc;
       }
       if (price.recurring?.usage_type === "metered") {
@@ -333,9 +333,8 @@ export function formatUpsellSaving(items, currency) {
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
 export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
-  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
-  const { total } = getCheckoutAmount(items, currency, !!trial);
+  const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
   if (items.length === 0) {
     return {
@@ -375,10 +374,10 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
       currency.symbol
     ].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trial > 0) {
+      if (trialInDays > 0) {
         return {
           action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
-          amount: t("payment.checkout.free", locale, { count: trial }),
+          amount: t("payment.checkout.free", locale, { count: trialInDays }),
           then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
         };
       }
@@ -388,10 +387,10 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
         then: recurring
       };
     }
-    if (trial > 0) {
+    if (trialInDays > 0) {
       return {
         action: t("payment.checkout.try1", locale, { name }),
-        amount: t("payment.checkout.free", locale, { count: trial }),
+        amount: t("payment.checkout.free", locale, { count: trialInDays }),
         then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
       };
     }

package/lib/checkout/form.js

@@ -13,11 +13,16 @@ var _api = _interopRequireDefault(require("../api"));
 var _payment = _interopRequireDefault(require("../payment"));
 var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const startFromPaymentLink = async (id, params) => {
-  const {
-    data
-  } = await _api.default.post(`/api/checkout-sessions/start/${id}?${(0, _util.mergeExtraParams)(params)}`);
-  return data;
+const promises = {};
+const startFromPaymentLink = (id, params) => {
+  if (!promises[id]) {
+    promises[id] = _api.default.post(`/api/checkout-sessions/start/${id}?${(0, _util.mergeExtraParams)(params)}`).then(res => res.data).finally(() => {
+      setTimeout(() => {
+        delete promises[id];
+      }, 3e3);
+    });
+  }
+  return promises[id];
 };
 const fetchCheckoutSession = async id => {
   const {
@@ -48,9 +53,9 @@ function CheckoutForm({
   } = (0, _ahooks.useRequest)(() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id));
   (0, _react.useEffect)(() => {
     if (type === "paymentLink" && mode === "standalone" && data) {
-      window.history.replaceState(null, "", (0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}`));
+      window.history.replaceState(null, "", (0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}?${(0, _util.mergeExtraParams)(extraParams)}`));
     }
-  }, [type, mode, data]);
+  }, [type, mode, data, extraParams]);
   const handlePaid = () => {
     setState({
       completed: true

package/lib/payment/form/index.js

@@ -171,7 +171,7 @@ function PaymentForm({
       }
     }
   };
-  const onSubmit = async data => {
+  const onFormSubmit = async data => {
     setState({
       submitting: true
     });
@@ -251,14 +251,29 @@ function PaymentForm({
       });
     }
   };
+  const onFormError = () => {
+    setState({
+      submitting: false
+    });
+  };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onSubmit)();
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
-      session?.login({
-        // @ts-ignored
-        onSuccess: onUserLoggedIn,
-        extraParams: {}
+      session?.login(() => {
+        setState({
+          submitting: true
+        });
+        onUserLoggedIn().then(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 50);
+        }).catch(err => {
+          console.error(err);
+          setState({
+            submitting: false
+          });
+        });
       });
     }
   };

package/lib/util.d.ts

@@ -27,7 +27,7 @@ export declare function getPaymentIntentStatusColor(status: string): "success" |
 export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
 export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
 export declare function getWebhookStatusColor(status: string): "success" | "default";
-export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {
+export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;
     renew: any;

package/lib/util.js

@@ -328,7 +328,7 @@ function getWebhookStatusColor(status) {
       return "default";
   }
 }
-function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
+function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
   let renew = new _util.BN(0);
   const total = items.filter(x => {
     const price = upsell ? x.upsell_price || x.price : x.price;
@@ -337,7 +337,7 @@ function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = t
     const price = upsell ? x.upsell_price || x.price : x.price;
     if (price?.type === "recurring") {
       renew = renew.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
-      if (includeFreeTrial) {
+      if (trialing) {
         return acc;
       }
       if (price.recurring?.usage_type === "metered") {
@@ -400,11 +400,10 @@ function formatUpsellSaving(items, currency) {
   return Number(before.sub(after).mul(new _util.BN(100)).div(before).toString()).toFixed(0);
 }
 function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
-  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
   const {
     total
-  } = getCheckoutAmount(items, currency, !!trial);
+  } = getCheckoutAmount(items, currency, trialInDays > 0);
   const amount = `${(0, _util.fromUnitToToken)(total, currency.decimal)} ${currency.symbol}`;
   if (items.length === 0) {
     return {
@@ -445,14 +444,14 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
       return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new _util.BN(x.quantity)));
     }, new _util.BN(0)), currency.decimal), currency.symbol].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trial > 0) {
+      if (trialInDays > 0) {
         return {
           action: (0, _locales.t)("payment.checkout.try2", locale, {
             name,
             count: items.length - 1
           }),
           amount: (0, _locales.t)("payment.checkout.free", locale, {
-            count: trial
+            count: trialInDays
           }),
           then: (0, _locales.t)("payment.checkout.then", locale, {
             subscription: subscription2,
@@ -469,13 +468,13 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
         then: recurring
       };
     }
-    if (trial > 0) {
+    if (trialInDays > 0) {
       return {
         action: (0, _locales.t)("payment.checkout.try1", locale, {
           name
         }),
         amount: (0, _locales.t)("payment.checkout.free", locale, {
-          count: trial
+          count: trialInDays
         }),
         then: (0, _locales.t)("payment.checkout.then", locale, {
           subscription: subscription2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.200",
+  "version": "1.13.202",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.57",
-    "@arcblock/ux": "^2.9.57",
+    "@arcblock/did-connect": "^2.9.63",
+    "@arcblock/ux": "^2.9.63",
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
@@ -85,12 +85,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/eslint-config-ts": "^0.2.4",
+    "@arcblock/eslint-config-ts": "^0.3.0",
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.200",
+    "@blocklet/payment-types": "1.13.202",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "c57f8e82c4c319183c371393f1bb9891366a36f6"
+  "gitHead": "e9c7a403fee7506f92118581d659c91f210714a7"
 }

package/src/checkout/form.tsx

@@ -10,9 +10,20 @@ import Payment from '../payment';
 import { CheckoutContext, CheckoutProps } from '../types';
 import { getPrefix, mergeExtraParams } from '../util';
 
-const startFromPaymentLink = async (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
-  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
-  return data;
+const promises: { [key: string]: Promise<any> } = {};
+const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
+  if (!promises[id]) {
+    promises[id] = api
+      .post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`)
+      .then((res) => res.data)
+      .finally(() => {
+        setTimeout(() => {
+          delete promises[id];
+        }, 3000);
+      });
+  }
+
+  return promises[id];
 };
 
 const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
@@ -36,9 +47,13 @@ export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBa
 
   useEffect(() => {
     if (type === 'paymentLink' && mode === 'standalone' && data) {
-      window.history.replaceState(null, '', joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+      window.history.replaceState(
+        null,
+        '',
+        joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}?${mergeExtraParams(extraParams)}`)
+      );
     }
-  }, [type, mode, data]);
+  }, [type, mode, data, extraParams]);
 
   const handlePaid = () => {
     setState({ completed: true });

package/src/payment/form/index.tsx

@@ -192,7 +192,7 @@ export default function PaymentForm({
     }
   };
 
-  const onSubmit = async (data: any) => {
+  const onFormSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
       const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
@@ -256,15 +256,26 @@ export default function PaymentForm({
     }
   };
 
+  const onFormError = () => {
+    setState({ submitting: false });
+  };
+
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onSubmit)();
+      handleSubmit(onFormSubmit, onFormError)();
     } else {
-      // @ts-ignored
-      session?.login({
-        // @ts-ignored
-        onSuccess: onUserLoggedIn,
-        extraParams: {},
+      session?.login(() => {
+        setState({ submitting: true });
+        onUserLoggedIn()
+          .then(() => {
+            setTimeout(() => {
+              handleSubmit(onFormSubmit, onFormError)();
+            }, 50);
+          })
+          .catch((err) => {
+            console.error(err);
+            setState({ submitting: false });
+          });
       });
     }
   };

package/src/util.ts

@@ -367,7 +367,7 @@ export function getWebhookStatusColor(status: string) {
 export function getCheckoutAmount(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
-  includeFreeTrial = false,
+  trialing = false,
   upsell = true
 ) {
   let renew = new BN(0);
@@ -381,7 +381,7 @@ export function getCheckoutAmount(
       if (price?.type === 'recurring') {
         renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
 
-        if (includeFreeTrial) {
+        if (trialing) {
           return acc;
         }
         if (price.recurring?.usage_type === 'metered') {
@@ -461,9 +461,8 @@ export function formatCheckoutHeadlines(
   then?: string;
   secondary?: string;
 } {
-  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
-  const { total } = getCheckoutAmount(items, currency, !!trial);
+  const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
 
   // empty
@@ -514,10 +513,10 @@ export function formatCheckoutHeadlines(
       .filter(Boolean)
       .join(' ');
     if (items.length > 1) {
-      if (trial > 0) {
+      if (trialInDays > 0) {
         return {
           action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
-          amount: t('payment.checkout.free', locale, { count: trial }),
+          amount: t('payment.checkout.free', locale, { count: trialInDays }),
           then: t('payment.checkout.then', locale, { subscription, recurring }),
         };
       }
@@ -529,10 +528,10 @@ export function formatCheckoutHeadlines(
       };
     }
 
-    if (trial > 0) {
+    if (trialInDays > 0) {
       return {
         action: t('payment.checkout.try1', locale, { name }),
-        amount: t('payment.checkout.free', locale, { count: trial }),
+        amount: t('payment.checkout.free', locale, { count: trialInDays }),
         then: t('payment.checkout.then', locale, { subscription, recurring }),
       };
     }