@blocklet/payment-react 1.18.1 → 1.18.2

package/es/checkout/donate.js

@@ -239,6 +239,7 @@ function CheckoutDonateInner({
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const { isMobile } = useMobile();
+  const { connect } = usePaymentContext();
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -437,8 +438,22 @@ function CheckoutDonateInner({
               livemode
             },
             formRender: {
-              cancel: /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "large", onClick: () => setState({ open: false }), children: t("common.cancel") }),
-              onCancel: () => setState({ open: false })
+              cancel: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  size: "large",
+                  onClick: () => {
+                    connect.close();
+                    setState({ open: false });
+                  },
+                  children: t("common.cancel")
+                }
+              ),
+              onCancel: () => {
+                connect.close();
+                setState({ open: false });
+              }
             }
           }
         ) })

package/es/payment/donation-form.js

@@ -301,7 +301,8 @@ function PaymentInner({
                 xs: 1,
                 md: "auto"
               },
-              justifyContent: "flex-end"
+              justifyContent: "flex-end",
+              whiteSpace: "nowrap"
             },
             children: [
               formRender?.cancel,

package/es/payment/form/index.js

@@ -2,8 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { LoadingButton } from "@mui/lab";
-import { Box, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -321,18 +320,25 @@ export default function PaymentForm({
   };
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
-        LoadingButton,
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
+        Button,
         {
           variant: "contained",
           color: "primary",
           size: "large",
           className: "cko-submit-button",
-          onClick: onAction,
+          onClick: () => {
+            if (state.submitting || state.paying) {
+              return;
+            }
+            onAction();
+          },
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-          loading: state.submitting || state.paying,
-          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          children: [
+            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
+            state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          ]
         }
       ) }),
       state.customerLimited && /* @__PURE__ */ jsx(
@@ -468,18 +474,25 @@ export default function PaymentForm({
     ] }) }),
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
-      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
-        LoadingButton,
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
+        Button,
         {
           variant: "contained",
           color: "primary",
           size: "large",
           className: "cko-submit-button",
-          onClick: onAction,
+          onClick: () => {
+            if (state.submitting || state.paying) {
+              return;
+            }
+            onAction();
+          },
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-          loading: state.submitting || state.paying,
-          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          children: [
+            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
+            state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          ]
         }
       ) }),
       ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })

package/es/payment/product-donation.js

@@ -43,6 +43,7 @@ export default function ProductDonation({
     }
   }, [state.custom]);
   const handleSelect = (amount) => {
+    setPayable(true);
     setState({ selected: amount, custom: false, error: "" });
     onChange({ priceId: item.price_id, amount });
   };
@@ -67,6 +68,9 @@ export default function ProductDonation({
   };
   const handleCustomSelect = () => {
     setState({ custom: true, error: "" });
+    if (!state.input) {
+      setPayable(false);
+    }
   };
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [
     supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [

package/es/theme/index.js

@@ -114,6 +114,9 @@ export function PaymentThemeProvider({
       },
       MuiPopover: {
         styleOverrides: {
+          root: {
+            zIndex: 1200
+          },
           paper: ({ theme }) => ({
             border: `1px solid ${theme.palette.divider}`,
             boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
@@ -231,6 +234,13 @@ export function PaymentThemeProvider({
             }
           }
         }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200
+          }
+        }
       }
     }
   };

package/lib/checkout/donate.js

@@ -319,6 +319,9 @@ function CheckoutDonateInner({
   const {
     isMobile
   } = (0, _mobile.useMobile)();
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -559,14 +562,20 @@ function CheckoutDonateInner({
             cancel: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               variant: "outlined",
               size: "large",
-              onClick: () => setState({
-                open: false
-              }),
+              onClick: () => {
+                connect.close();
+                setState({
+                  open: false
+                });
+              },
               children: t("common.cancel")
             }),
-            onCancel: () => setState({
-              open: false
-            })
+            onCancel: () => {
+              connect.close();
+              setState({
+                open: false
+              });
+            }
           }
         })
       })

package/lib/payment/donation-form.js

@@ -330,7 +330,8 @@ function PaymentInner({
                 xs: 1,
                 md: "auto"
               },
-              justifyContent: "flex-end"
+              justifyContent: "flex-end",
+              whiteSpace: "nowrap"
             },
             children: [formRender?.cancel, /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
               currencyId,

package/lib/payment/form/index.js

@@ -9,7 +9,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 require("react-international-phone/style.css");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
@@ -389,16 +388,26 @@ function PaymentForm({
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         className: "cko-payment-submit-btn",
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
           variant: "contained",
           color: "primary",
           size: "large",
           className: "cko-submit-button",
-          onClick: onAction,
+          onClick: () => {
+            if (state.submitting || state.paying) {
+              return;
+            }
+            onAction();
+          },
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-          loading: state.submitting || state.paying,
-          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 16,
+            sx: {
+              mr: 0.5,
+              color: "var(--foregrounds-fg-on-color, #fff)"
+            }
+          }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
         })
       }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
         onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self"),
@@ -530,16 +539,26 @@ function PaymentForm({
         className: "cko-payment-submit",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           className: "cko-payment-submit-btn",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
             variant: "contained",
             color: "primary",
             size: "large",
             className: "cko-submit-button",
-            onClick: onAction,
+            onClick: () => {
+              if (state.submitting || state.paying) {
+                return;
+              }
+              onAction();
+            },
             fullWidth: true,
-            disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
-            loading: state.submitting || state.paying,
-            children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+            disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+            children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              size: 16,
+              sx: {
+                mr: 0.5,
+                color: "var(--foregrounds-fg-on-color, #fff)"
+              }
+            }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
           })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {

package/lib/payment/product-donation.js

@@ -66,6 +66,7 @@ function ProductDonation({
     }
   }, [state.custom]);
   const handleSelect = amount => {
+    setPayable(true);
     setState({
       selected: amount,
       custom: false,
@@ -117,6 +118,9 @@ function ProductDonation({
       custom: true,
       error: ""
     });
+    if (!state.input) {
+      setPayable(false);
+    }
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",

package/lib/theme/index.js

@@ -129,6 +129,9 @@ function PaymentThemeProvider({
       },
       MuiPopover: {
         styleOverrides: {
+          root: {
+            zIndex: 1200
+          },
           paper: ({
             theme
           }) => ({
@@ -248,6 +251,13 @@ function PaymentThemeProvider({
             }
           }
         }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200
+          }
+        }
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "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.18.1",
+    "@blocklet/payment-types": "1.18.2",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "22060b542145f7c62282ee0d3ec132ff581e13ec"
+  "gitHead": "577491d13f4b2e53e9a71be3b90298b5685f5e8a"
 }

package/src/checkout/donate.tsx

@@ -336,6 +336,7 @@ function CheckoutDonateInner({
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
   const { isMobile } = useMobile();
+  const { connect } = usePaymentContext();
 
   const handlePaid = (...args: any[]) => {
     if (onPaid) {
@@ -560,11 +561,20 @@ function CheckoutDonateInner({
               }}
               formRender={{
                 cancel: (
-                  <Button variant="outlined" size="large" onClick={() => setState({ open: false })}>
+                  <Button
+                    variant="outlined"
+                    size="large"
+                    onClick={() => {
+                      connect.close();
+                      setState({ open: false });
+                    }}>
                     {t('common.cancel')}
                   </Button>
                 ),
-                onCancel: () => setState({ open: false }),
+                onCancel: () => {
+                  connect.close();
+                  setState({ open: false });
+                },
               }}
             />
           </Box>

package/src/payment/donation-form.tsx

@@ -328,6 +328,7 @@ function PaymentInner({
                       md: 'auto',
                     },
                     justifyContent: 'flex-end',
+                    whiteSpace: 'nowrap',
                   }}>
                   {formRender?.cancel}
                   <PaymentForm

package/src/payment/form/index.tsx

@@ -11,8 +11,7 @@ import type {
   TPaymentIntent,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
-import { LoadingButton } from '@mui/lab';
-import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -409,17 +408,24 @@ export default function PaymentForm({
     return (
       <>
         <Box className="cko-payment-submit-btn">
-          <LoadingButton
+          <Button
             variant="contained"
             color="primary"
             size="large"
             className="cko-submit-button"
-            onClick={onAction}
+            onClick={() => {
+              if (state.submitting || state.paying) {
+                return;
+              }
+              onAction();
+            }}
             fullWidth
-            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
-            loading={state.submitting || state.paying}>
+            disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+            {(state.submitting || state.paying) && (
+              <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
+            )}
             {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
-          </LoadingButton>
+          </Button>
         </Box>
         {state.customerLimited && (
           <ConfirmDialog
@@ -543,17 +549,24 @@ export default function PaymentForm({
       <Fade in>
         <Stack className="cko-payment-submit">
           <Box className="cko-payment-submit-btn">
-            <LoadingButton
+            <Button
               variant="contained"
               color="primary"
               size="large"
               className="cko-submit-button"
-              onClick={onAction}
+              onClick={() => {
+                if (state.submitting || state.paying) {
+                  return;
+                }
+                onAction();
+              }}
               fullWidth
-              disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
-              loading={state.submitting || state.paying}>
+              disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+              {(state.submitting || state.paying) && (
+                <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
+              )}
               {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
-            </LoadingButton>
+            </Button>
           </Box>
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (

package/src/payment/product-donation.tsx

@@ -54,6 +54,7 @@ export default function ProductDonation({
   }, [state.custom]);
 
   const handleSelect = (amount: string) => {
+    setPayable(true);
     setState({ selected: amount, custom: false, error: '' });
     onChange({ priceId: item.price_id, amount });
   };
@@ -82,6 +83,9 @@ export default function ProductDonation({
 
   const handleCustomSelect = () => {
     setState({ custom: true, error: '' });
+    if (!state.input) {
+      setPayable(false);
+    }
   };
 
   return (

package/src/theme/index.tsx

@@ -124,6 +124,9 @@ export function PaymentThemeProvider({
       },
       MuiPopover: {
         styleOverrides: {
+          root: {
+            zIndex: 1200,
+          },
           paper: ({ theme }) => ({
             border: `1px solid ${theme.palette.divider}`,
             boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
@@ -244,6 +247,13 @@ export function PaymentThemeProvider({
           },
         },
       },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200,
+          },
+        },
+      },
     },
   };