@blocklet/payment-react 1.18.6 → 1.18.8

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,28 +559,23 @@ 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) && (
-            <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.9rem', lineHeight: '1.1rem' }}>
+            <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
               {t('payment.checkout.confirm', { payee })}
             </Typography>
           )}

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__;
 
@@ -124,11 +125,10 @@ function StripeCheckoutForm({
       {stripe && elements && state.loaded && (
         <LoadingButton
           fullWidth
-          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '1.1rem' }}
+          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '0.875rem' }}
           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/product-card.tsx

@@ -41,13 +41,13 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           <Typography
             variant="body1"
             title={description}
-            sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
+            sx={{ fontSize: '0.74375rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
             color="text.lighter">
             {description}
           </Typography>
         )}
         {extra && (
-          <Box sx={{ fontSize: '0.85rem' }} color="text.lighter">
+          <Box sx={{ fontSize: '0.74375rem' }} color="text.lighter">
             {extra}
           </Box>
         )}

package/src/payment/product-item.tsx

@@ -86,7 +86,7 @@ export default function ProductItem({
               {primaryText}
             </Typography>
             {pricing.secondary && (
-              <Typography sx={{ fontSize: '0.85rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
+              <Typography sx={{ fontSize: '0.74375rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
             )}
           </Stack>
         </Stack>

package/src/payment/product-skeleton.tsx

@@ -22,7 +22,7 @@ export default function ProductSkeleton({ count }: { count: number }) {
         <Typography component="div" variant="h4" sx={{ width: '50%' }}>
           <Skeleton />
         </Typography>
-        <Skeleton variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        <Skeleton variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
         <Typography component="div" variant="h3" sx={{ width: '60%' }}>
           <Skeleton />
         </Typography>
@@ -31,7 +31,7 @@ export default function ProductSkeleton({ count }: { count: number }) {
         </Typography>
         {Array.from({ length: count }).map((_, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Skeleton key={i} variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+          <Skeleton key={i} variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
         ))}
       </Stack>
     </Fade>

package/src/payment/skeleton/donation.tsx

@@ -4,7 +4,7 @@ export default function DonationSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={40} />
         <Divider
           sx={{

package/src/payment/skeleton/overview.tsx

@@ -5,7 +5,7 @@ export default function OverviewSkeleton() {
     <Fade in>
       <Stack direction="column">
         <Stack direction="row" alignItems="center" spacing={2}>
-          <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+          <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         </Stack>
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
         <Typography mt={2} component="div" variant="h4">

package/src/payment/skeleton/payment.tsx

@@ -4,7 +4,7 @@ export default function PaymentSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
         <Box mt={1}>
           <Typography component="div" variant="h4" mb={-1}>

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% {
@@ -366,7 +366,7 @@ export default function PaymentSummary({
         {headlines.then && headlines.showThen && (
           <Typography
             component="div"
-            sx={{ fontSize: '0.9rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
+            sx={{ fontSize: '0.7875rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
             {headlines.then}
           </Typography>
         )}

package/src/theme/index.tsx

@@ -60,9 +60,10 @@ export function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: '1rem',
+            fontSize: '0.875rem',
             fontWeight: 500,
             textTransform: 'none',
+            boxShadow: 'none',
           },
           containedPrimary: {
             backgroundColor: 'var(--buttons-button-inverted, #010714)',
@@ -108,6 +109,7 @@ export function PaymentThemeProvider({
         styleOverrides: {
           root: {
             textTransform: 'none',
+            fontSize: '0.875rem',
           },
         },
       },

package/src/theme/typography.ts

@@ -2,7 +2,7 @@ import type { TypographyOptions } from '@mui/material/styles/createTypography';
 
 export const typography: TypographyOptions = {
   h1: {
-    fontSize: '1.875rem',
+    fontSize: '1.5rem',
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: '-.025em',
@@ -14,38 +14,38 @@ export const typography: TypographyOptions = {
     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,
   },