@blocklet/payment-react 1.18.6 → 1.18.7

package/src/payment/form/index.tsx

@@ -41,6 +41,7 @@ import PhoneInput from './phone';
 import StripeCheckout from './stripe';
 import { useMobile } from '../../hooks/mobile';
 import { validatePhoneNumber } from '../../libs/phone-validator';
+import LoadingButton from '../../components/loading-button';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -212,7 +213,7 @@ export default function PaymentForm({
   // }, [domSize, theme]);
 
   const afterUserLoggedIn = useMemoizedFn(() => {
-    if (hasDidWallet(session.user)) {
+    if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
     } else {
       session.bindWallet(() => {
@@ -239,6 +240,9 @@ export default function PaymentForm({
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
 
+  const showForm = session?.user;
+  const skipBindWallet = method.type === 'stripe';
+
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -372,6 +376,10 @@ export default function PaymentForm({
       errorRef.current.scrollIntoView({ behavior: 'smooth' });
     }
     if (session?.user) {
+      if (skipBindWallet) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
       } else {
@@ -492,56 +500,58 @@ export default function PaymentForm({
               )}
             </Stack>
           </Fade>
-          <Stack
-            direction="column"
-            className="cko-payment-form"
-            id="cko-payment-form"
-            spacing={0}
-            ref={!isEmpty(errors) ? (errorRef as any) : undefined}
-            sx={{ flex: 1, overflow: 'auto', py: 1 }}>
-            <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
-            <FormInput
-              name="customer_name"
-              variant="outlined"
-              errorPosition="right"
-              rules={{
-                required: t('payment.checkout.required'),
-              }}
-            />
-            <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
-            <FormInput
-              name="customer_email"
-              variant="outlined"
-              errorPosition="right"
-              rules={{
-                required: t('payment.checkout.required'),
-                validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
-              }}
-            />
-            {checkoutSession.phone_number_collection?.enabled && (
-              <>
-                <FormLabel className="base-label">{t('payment.checkout.customer.phone')}</FormLabel>
-                <PhoneInput
-                  name="customer_phone"
-                  variant="outlined"
-                  errorPosition="right"
-                  placeholder="Phone number"
-                  rules={{
-                    required: t('payment.checkout.required'),
-                    validate: async (x: string) => {
-                      const isValid = await validatePhoneNumber(x);
-                      return isValid ? true : t('payment.checkout.invalid');
-                    },
-                  }}
-                />
-              </>
-            )}
-            <AddressForm
-              mode={checkoutSession.billing_address_collection as string}
-              stripe={method?.type === 'stripe'}
-              sx={{ marginTop: '0 !important' }}
-            />
-          </Stack>
+          {showForm && (
+            <Stack
+              direction="column"
+              className="cko-payment-form"
+              id="cko-payment-form"
+              spacing={0}
+              ref={!isEmpty(errors) ? (errorRef as any) : undefined}
+              sx={{ flex: 1, overflow: 'auto', py: 1 }}>
+              <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
+              <FormInput
+                name="customer_name"
+                variant="outlined"
+                errorPosition="right"
+                rules={{
+                  required: t('payment.checkout.required'),
+                }}
+              />
+              <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
+              <FormInput
+                name="customer_email"
+                variant="outlined"
+                errorPosition="right"
+                rules={{
+                  required: t('payment.checkout.required'),
+                  validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
+                }}
+              />
+              {checkoutSession.phone_number_collection?.enabled && (
+                <>
+                  <FormLabel className="base-label">{t('payment.checkout.customer.phone')}</FormLabel>
+                  <PhoneInput
+                    name="customer_phone"
+                    variant="outlined"
+                    errorPosition="right"
+                    placeholder="Phone number"
+                    rules={{
+                      required: t('payment.checkout.required'),
+                      validate: async (x: string) => {
+                        const isValid = await validatePhoneNumber(x);
+                        return isValid ? true : t('payment.checkout.invalid');
+                      },
+                    }}
+                  />
+                </>
+              )}
+              <AddressForm
+                mode={checkoutSession.billing_address_collection as string}
+                stripe={method?.type === 'stripe'}
+                sx={{ marginTop: '0 !important' }}
+              />
+            </Stack>
+          )}
         </Stack>
       </Fade>
       <Divider sx={{ mt: 2.5, mb: 2.5 }} />
@@ -549,24 +559,19 @@ export default function PaymentForm({
       <Fade in>
         <Stack className="cko-payment-submit">
           <Box className="cko-payment-submit-btn">
-            <Button
+            <LoadingButton
               variant="contained"
               color="primary"
               size="large"
               className="cko-submit-button"
               onClick={() => {
-                if (state.submitting || state.paying) {
-                  return;
-                }
                 onAction();
               }}
               fullWidth
+              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}
-            </Button>
+            </LoadingButton>
           </Box>
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (

package/src/payment/form/stripe/form.tsx

@@ -2,11 +2,12 @@ import Center from '@arcblock/ux/lib/Center';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TCustomer } from '@blocklet/payment-types';
-import { LoadingButton } from '@mui/lab';
 import { CircularProgress, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect, useCallback } from 'react';
+import { useMobile } from '../../../hooks/mobile';
+import LoadingButton from '../../../components/loading-button';
 
 const { Elements, PaymentElement, useElements, useStripe, loadStripe } = (globalThis as any).__STRIPE_COMPONENTS__;
 
@@ -128,7 +129,6 @@ function StripeCheckoutForm({
           type="submit"
           disabled={state.confirming || !state.loaded}
           loading={state.confirming}
-          loadingPosition="end"
           variant="contained"
           color="primary"
           size="large">
@@ -171,7 +171,8 @@ export default function StripeCheckout({
   returnUrl = '',
 }: StripeCheckoutProps) {
   const stripePromise = loadStripe(publicKey);
-  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({
     open: true,
     closable: true,
@@ -192,8 +193,22 @@ export default function StripeCheckout({
       showCloseButton={state.closable}
       open={state.open}
       onClose={handleClose}
-      disableEscapeKeyDown>
-      <Elements options={{ clientSecret }} stripe={stripePromise}>
+      disableEscapeKeyDown
+      sx={{
+        '.StripeElement': {
+          minWidth: isMobile ? '100%' : '500px',
+          py: 1,
+        },
+        form: {
+          justifyContent: 'flex-start',
+        },
+      }}
+      PaperProps={{
+        style: {
+          minWidth: isMobile ? '100%' : '500px',
+        },
+      }}>
+      <Elements options={{ clientSecret, locale: locale === 'zh' ? 'zh-CN' : 'en' }} stripe={stripePromise}>
         <StripeCheckoutForm
           clientSecret={clientSecret}
           intentType={intentType}

package/src/payment/index.tsx

@@ -577,7 +577,6 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
     .MuiButtonBase-root {
       font-size: 1.3rem;
       position: relative;
-      padding: 4px 22px;
     }
 
     .cko-submit-progress {

package/src/payment/summary.tsx

@@ -1,7 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { HelpOutline } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from '@mui/material';
 import type { IconButtonProps } from '@mui/material';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
@@ -19,6 +18,7 @@ import ProductItem from './product-item';
 import Livemode from '../components/livemode';
 import { usePaymentContext } from '../contexts/payment';
 import { useMobile } from '../hooks/mobile';
+import LoadingButton from '../components/loading-button';
 
 // const shake = keyframes`
 //   0% {

package/src/theme/index.tsx

@@ -63,6 +63,7 @@ export function PaymentThemeProvider({
             fontSize: '1rem',
             fontWeight: 500,
             textTransform: 'none',
+            boxShadow: 'none',
           },
           containedPrimary: {
             backgroundColor: 'var(--buttons-button-inverted, #010714)',