@blocklet/payment-react 1.18.6 → 1.18.8

package/lib/payment/form/index.js

@@ -30,6 +30,7 @@ var _phone = _interopRequireDefault(require("./phone"));
 var _stripe = _interopRequireDefault(require("./stripe"));
 var _mobile = require("../../hooks/mobile");
 var _phoneValidator = require("../../libs/phone-validator");
+var _loadingButton = _interopRequireDefault(require("../../components/loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -165,7 +166,7 @@ function PaymentForm({
     name: "payment_method"
   });
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
-    if (hasDidWallet(session.user)) {
+    if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
     } else {
       session.bindWallet(() => {
@@ -190,6 +191,8 @@ function PaymentForm({
     action: buttonText
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
+  const showForm = session?.user;
+  const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -350,6 +353,10 @@ function PaymentForm({
       });
     }
     if (session?.user) {
+      if (skipBindWallet) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
       } else {
@@ -471,7 +478,7 @@ function PaymentForm({
               returnUrl: checkoutSession?.success_url
             })]
           })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        }), showForm && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           id: "cko-payment-form",
@@ -540,33 +547,25 @@ function PaymentForm({
         className: "cko-payment-submit",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           className: "cko-payment-submit-btn",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
             variant: "contained",
             color: "primary",
             size: "large",
             className: "cko-submit-button",
             onClick: () => {
-              if (state.submitting || state.paying) {
-                return;
-              }
               onAction();
             },
             fullWidth: true,
+            loading: state.submitting || state.paying,
             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]
+            children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
           })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             mt: 2.5,
             color: "text.lighter",
-            fontSize: "0.9rem",
-            lineHeight: "1.1rem"
+            fontSize: "0.7875rem",
+            lineHeight: "0.9625rem"
           },
           children: t("payment.checkout.confirm", {
             payee

package/lib/payment/form/stripe/form.js

@@ -8,11 +8,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _mobile = require("../../../hooks/mobile");
+var _loadingButton = _interopRequireDefault(require("../../../components/loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const {
   Elements,
@@ -136,18 +137,17 @@ function StripeCheckoutForm({
     }), (!stripe || !elements || !state.loaded) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
       relative: "parent",
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-    }), stripe && elements && state.loaded && /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+    }), stripe && elements && state.loaded && /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
       fullWidth: true,
       sx: {
         mt: 2,
         mb: 1,
         borderRadius: 0,
-        fontSize: "1.1rem"
+        fontSize: "0.875rem"
       },
       type: "submit",
       disabled: state.confirming || !state.loaded,
       loading: state.confirming,
-      loadingPosition: "end",
       variant: "contained",
       color: "primary",
       size: "large",
@@ -184,7 +184,11 @@ function StripeCheckout({
 }) {
   const stripePromise = loadStripe(publicKey);
   const {
-    t
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const {
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const [state, setState] = (0, _ahooks.useSetState)({
     open: true,
@@ -207,9 +211,24 @@ function StripeCheckout({
     open: state.open,
     onClose: handleClose,
     disableEscapeKeyDown: true,
+    sx: {
+      ".StripeElement": {
+        minWidth: isMobile ? "100%" : "500px",
+        py: 1
+      },
+      form: {
+        justifyContent: "flex-start"
+      }
+    },
+    PaperProps: {
+      style: {
+        minWidth: isMobile ? "100%" : "500px"
+      }
+    },
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Elements, {
       options: {
-        clientSecret
+        clientSecret,
+        locale: locale === "zh" ? "zh-CN" : "en"
       },
       stripe: stripePromise,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StripeCheckoutForm, {

package/lib/payment/index.js

@@ -574,7 +574,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     .MuiButtonBase-root {
       font-size: 1.3rem;
       position: relative;
-      padding: 4px 22px;
     }
 
     .cko-submit-progress {

package/lib/payment/product-card.js

@@ -65,7 +65,7 @@ function ProductCard({
         variant: "body1",
         title: description,
         sx: {
-          fontSize: "0.85rem",
+          fontSize: "0.74375rem",
           mb: 0.5,
           lineHeight: 1.2,
           textAlign: "left"
@@ -74,7 +74,7 @@ function ProductCard({
         children: description
       }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          fontSize: "0.85rem"
+          fontSize: "0.74375rem"
         },
         color: "text.lighter",
         children: extra

package/lib/payment/product-item.js

@@ -98,7 +98,7 @@ function ProductItem({
             children: primaryText
           }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
-              fontSize: "0.85rem",
+              fontSize: "0.74375rem",
               color: "text.lighter"
             },
             children: pricing.secondary

package/lib/payment/product-skeleton.js

@@ -37,7 +37,7 @@ function ProductSkeleton({
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -62,7 +62,7 @@ function ProductSkeleton({
       (0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }, i))]

package/lib/payment/skeleton/donation.js

@@ -14,7 +14,7 @@ function DonationSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/skeleton/overview.js

@@ -18,7 +18,7 @@ function OverviewSkeleton() {
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
-            fontSize: "2rem",
+            fontSize: "1.75rem",
             width: "40%"
           }
         })

package/lib/payment/skeleton/payment.js

@@ -14,7 +14,7 @@ function PaymentSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/summary.js

@@ -7,7 +7,6 @@ module.exports = PaymentSummary;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _iconsMaterial = require("@mui/icons-material");
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
@@ -24,6 +23,7 @@ var _productItem = _interopRequireDefault(require("./product-item"));
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _payment = require("../contexts/payment");
 var _mobile = require("../hooks/mobile");
+var _loadingButton = _interopRequireDefault(require("../components/loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ExpandMore = (0, _styles.styled)(props => {
   const {
@@ -216,7 +216,7 @@ function PaymentSummary({
           sx: {
             width: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
             size: "small",
             loadingPosition: "end",
             endIcon: null,
@@ -261,7 +261,7 @@ function PaymentSummary({
                   mr: 1
                 }
               })
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
               size: "small",
               loadingPosition: "end",
               endIcon: null,
@@ -413,7 +413,7 @@ function PaymentSummary({
       }), headlines.then && headlines.showThen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "div",
         sx: {
-          fontSize: "0.9rem",
+          fontSize: "0.7875rem",
           color: "text.lighter",
           textAlign: "right",
           margin: "-2px 0 8px"

package/lib/theme/index.js

@@ -65,9 +65,10 @@ function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: "1rem",
+            fontSize: "0.875rem",
             fontWeight: 500,
-            textTransform: "none"
+            textTransform: "none",
+            boxShadow: "none"
           },
           containedPrimary: {
             backgroundColor: "var(--buttons-button-inverted, #010714)",
@@ -112,7 +113,8 @@ function PaymentThemeProvider({
       MuiTab: {
         styleOverrides: {
           root: {
-            textTransform: "none"
+            textTransform: "none",
+            fontSize: "0.875rem"
           }
         }
       },

package/lib/theme/typography.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.typography = void 0;
 const typography = exports.typography = {
   h1: {
-    fontSize: "1.875rem",
+    fontSize: "1.5rem",
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: "-.025em"
@@ -18,38 +18,38 @@ const typography = exports.typography = {
     letterSpacing: "-.025em"
   },
   h3: {
-    fontSize: "1.25rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.4,
     fontWeight: 600,
     letterSpacing: "-.025em"
   },
   h4: {
-    fontSize: "1.125rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.5,
     fontWeight: 600
   },
   h5: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   h6: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle2: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   body1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75
   },
   fontWeightLight: 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.6",
+  "version": "1.18.8",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.11.34",
-    "@arcblock/ux": "^2.11.34",
-    "@arcblock/ws": "^1.19.9",
-    "@blocklet/ui-react": "^2.11.34",
+    "@arcblock/did-connect": "^2.11.44",
+    "@arcblock/ux": "^2.11.44",
+    "@arcblock/ws": "^1.19.10",
+    "@blocklet/ui-react": "^2.11.44",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.19.9",
+    "@ocap/util": "^1.19.10",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -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.6",
+    "@blocklet/payment-types": "1.18.8",
     "@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": "784ba57910d780a44d0792ef503b666ee8f8d9c3"
+  "gitHead": "0815493ffd53c977d2d14779703d85f2e0e34299"
 }