@blocklet/payment-react 1.18.6 → 1.18.7

package/lib/index.js

@@ -36,6 +36,7 @@ var _exportNames = {
   createLazyComponent: true,
   OverdueInvoicePayment: true,
   PaymentBeneficiaries: true,
+  LoadingButton: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -118,6 +119,12 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
+Object.defineProperty(exports, "LoadingButton", {
+  enumerable: true,
+  get: function () {
+    return _loadingButton.default;
+  }
+});
 Object.defineProperty(exports, "OverdueInvoicePayment", {
   enumerable: true,
   get: function () {
@@ -282,6 +289,7 @@ var _link = _interopRequireDefault(require("./components/link"));
 var _lazyLoader = require("./components/lazy-loader");
 var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
 var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment-beneficiaries"));
+var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

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,26 +547,18 @@ 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: {

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,7 +137,7 @@ 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,
@@ -147,7 +148,6 @@ function StripeCheckoutForm({
       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/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,

package/lib/theme/index.js

@@ -67,7 +67,8 @@ function PaymentThemeProvider({
           root: {
             fontSize: "1rem",
             fontWeight: 500,
-            textTransform: "none"
+            textTransform: "none",
+            boxShadow: "none"
           },
           containedPrimary: {
             backgroundColor: "var(--buttons-button-inverted, #010714)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.6",
+  "version": "1.18.7",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.11.34",
-    "@arcblock/ux": "^2.11.34",
+    "@arcblock/did-connect": "^2.11.40",
+    "@arcblock/ux": "^2.11.40",
     "@arcblock/ws": "^1.19.9",
-    "@blocklet/ui-react": "^2.11.34",
+    "@blocklet/ui-react": "^2.11.40",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -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.7",
     "@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": "b75168ab5e2cd939571e6e26543374c8d0dab963"
 }

package/src/checkout/donate.tsx

@@ -4,6 +4,7 @@ import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type {
   DonationSettings,
+  PaymentBeneficiary,
   PaymentDetails,
   TCheckoutSessionExpanded,
   TPaymentCurrency,
@@ -12,7 +13,6 @@ import type {
   TSetting,
 } from '@blocklet/payment-types';
 import {
-  Alert,
   Avatar,
   AvatarGroup,
   Box,
@@ -42,7 +42,6 @@ import {
   formatAmount,
   formatBNStr,
   formatDateTime,
-  formatError,
   getCustomerAvatar,
   lazyLoad,
   openDonationSettings,
@@ -62,19 +61,40 @@ export type DonateHistory = {
   // total?: number;
   totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<
-  DonationSettings,
-  'target' | 'title' | 'description' | 'reference' | 'beneficiaries'
->;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
 
+export type CheckoutDonateSettings = {
+  target: string;
+  title: string;
+  description: string;
+  reference: string;
+  beneficiaries: PaymentBeneficiary[];
+  amount?: {
+    presets?: string[];
+    preset?: string;
+    minimum?: string;
+    maximum?: string;
+    custom?: boolean;
+  };
+  appearance?: {
+    button?: {
+      text?: any;
+      icon?: any;
+      size?: string;
+      color?: string;
+      variant?: string;
+    };
+    history?: {
+      variant?: string;
+    };
+  };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
   text?: string | React.ReactNode;
   icon: React.ReactNode;
 }
 
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-  settings: RequiredDonationSettings & OptionalDonationSettings;
+  settings: CheckoutDonateSettings;
   livemode?: boolean;
   timeout?: number;
   mode?: 'inline' | 'default' | 'custom';
@@ -300,11 +320,7 @@ const defaultDonateAmount = {
   maximum: '100',
   custom: true,
 };
-function useDonation(
-  settings: RequiredDonationSettings & OptionalDonationSettings,
-  livemode: boolean,
-  mode = 'default'
-) {
+function useDonation(settings: CheckoutDonateSettings, livemode: boolean, mode = 'default') {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -425,7 +441,7 @@ function CheckoutDonateInner({
   };
 
   if (donation.error) {
-    return <Alert severity="error">{formatError(donation.error)}</Alert>;
+    return null;
   }
 
   const handlePopoverOpen = (event: any) => {
@@ -555,7 +571,7 @@ function CheckoutDonateInner({
             `${formatAmount(
               (supporters.data as DonateHistory)?.totalAmount || '0',
               (supporters.data as DonateHistory)?.currency?.decimal
-            )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
+            )} ${(supporters.data as DonateHistory)?.currency?.symbol || ''}`,
             (supporters.data as DonateHistory) || {},
             !!supporters.loading,
             donateSettings
@@ -563,7 +579,8 @@ function CheckoutDonateInner({
         </>
       ) : (
         <Typography>
-          Please provide a valid render function <pre>{'(openDonate, donateTotalAmount, supporters) => ReactNode'}</pre>
+          Please provide a valid render function{' '}
+          <pre>{'(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode'}</pre>
         </Typography>
       );
     }

package/src/components/loading-button.tsx

@@ -0,0 +1,100 @@
+import {
+  Button,
+  type ButtonProps,
+  CircularProgress,
+  type CircularProgressProps,
+  SxProps,
+  Theme,
+  Typography,
+} from '@mui/material';
+import { forwardRef } from 'react';
+
+export interface LoadingButtonProps extends ButtonProps {
+  loading?: boolean;
+  loadingIndicator?: React.ReactNode;
+  loadingPosition?: 'start' | 'center' | 'end';
+  loadingProps?: Partial<CircularProgressProps>;
+  loadingOnly?: boolean;
+}
+
+const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  (
+    {
+      children,
+      loading,
+      loadingPosition = 'start',
+      loadingIndicator,
+      loadingProps = {},
+      onClick,
+      sx,
+      loadingOnly = false,
+      ...props
+    },
+    ref
+  ) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (loading) {
+        return;
+      }
+      onClick?.(e);
+    };
+
+    const getPositionStyles = (position: string) => {
+      return {
+        color: 'inherit',
+        ...(position === 'start' && { mr: 1 }),
+        ...(position === 'end' && { ml: 1 }),
+        ...(position === 'center' && {
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateY(-50%) translateX(-50%)',
+          top: '50%',
+        }),
+        display: 'inline-flex',
+        alignItems: 'center',
+      } as const;
+    };
+
+    const defaultIndicator = (
+      <CircularProgress size={16} {...loadingProps} sx={{ color: 'inherit', ...(loadingProps?.sx || {}) }} />
+    );
+
+    const indicator = (
+      <Typography sx={getPositionStyles(loadingPosition) as SxProps<Theme>}>
+        {loadingIndicator || defaultIndicator}
+      </Typography>
+    );
+
+    return (
+      <Button
+        ref={ref}
+        disabled={props.disabled}
+        onClick={handleClick}
+        sx={{
+          position: 'relative',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...sx,
+        }}
+        {...props}>
+        {loading && loadingPosition === 'start' && indicator}
+        <Typography sx={{ visibility: loading && loadingOnly ? 'hidden' : 'visible' }}>{children}</Typography>
+        {loading && loadingPosition === 'center' && indicator}
+        {loading && loadingPosition === 'end' && indicator}
+      </Button>
+    );
+  }
+);
+
+LoadingButton.displayName = 'LoadingButton';
+
+LoadingButton.defaultProps = {
+  loading: false,
+  loadingIndicator: undefined,
+  loadingPosition: 'start',
+  loadingProps: {},
+  loadingOnly: false,
+};
+
+export default LoadingButton;

package/src/components/pricing-table.tsx

@@ -3,7 +3,6 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { PriceCurrency, PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@blocklet/payment-types';
 import { CheckOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import {
   Avatar,
   Box,
@@ -36,6 +35,7 @@ import {
 } from '../libs/util';
 import { useMobile } from '../hooks/mobile';
 import TruncatedText from './truncated-text';
+import LoadingButton from './loading-button';
 
 type SortOrder = { [key: string]: number };
 
@@ -322,7 +322,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
           sx={{
             flex: '0 1 auto',
-            overflow: 'auto',
             pb: 2.5,
           }}
           className="price-table-wrap">
@@ -354,7 +353,8 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
                   '&:hover': {
                     borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                    boxShadow:
+                      '0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))',
                   },
                   width: {
                     xs: '100%',

package/src/index.ts

@@ -30,6 +30,7 @@ import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
+import LoadingButton from './components/loading-button';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -79,4 +80,5 @@ export {
   Link,
   OverdueInvoicePayment,
   PaymentBeneficiaries,
+  LoadingButton,
 };