@blocklet/payment-react 1.21.13 → 1.21.15

package/src/payment/form/address.tsx

@@ -9,13 +9,12 @@ import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
 type Props = {
   mode: string;
-  stripe: boolean;
   sx?: SxProps;
   fieldValidation?: Record<string, any>;
   errorPosition?: 'right' | 'bottom';
 };
 
-export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = 'right' }: Props) {
+export default function AddressForm({ mode, sx = {}, fieldValidation = {}, errorPosition = 'right' }: Props) {
   const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
@@ -99,54 +98,61 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
     );
   }
 
-  if (stripe) {
-    return (
-      <Fade in>
-        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
-          <Stack direction="column" className="cko-payment-form" spacing={0}>
-            <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
-            <Stack direction="row" spacing={0}>
-              <FormInput
-                name="billing_address.postal_code"
-                rules={{
-                  required: t('payment.checkout.required'),
-                  validate: (x: string) => {
-                    const isValid = validatePostalCode(x, country);
-                    return isValid ? true : t('payment.checkout.invalid');
-                  },
-                  ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
-                }}
-                errorPosition={errorPosition}
-                variant="outlined"
-                placeholder={t('payment.checkout.billing.postal_code')}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-                      <Controller
-                        name="billing_address.country"
-                        control={control}
-                        render={({ field }) => (
-                          <CountrySelect
-                            {...field}
-                            ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
-                            sx={{
-                              '.MuiOutlinedInput-notchedOutline': {
-                                borderColor: 'transparent !important',
-                              },
-                            }}
-                          />
-                        )}
-                      />
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Stack>
+  return (
+    <Fade in>
+      <Stack className="cko-payment-address cko-payment-form" sx={sx}>
+        <Stack direction="column" className="cko-payment-form" spacing={0}>
+          <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
+          <FormInput
+            name="billing_address.state"
+            rules={{
+              required: t('payment.checkout.required'),
+              ...getFieldValidation('billing_address.state', fieldValidation, locale),
+            }}
+            errorPosition={errorPosition}
+            variant="outlined"
+            placeholder={t('payment.checkout.billing.state')}
+          />
+          <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
+          <Stack direction="row" spacing={0}>
+            <FormInput
+              name="billing_address.postal_code"
+              rules={{
+                required: t('payment.checkout.required'),
+                validate: (x: string) => {
+                  const isValid = validatePostalCode(x, country);
+                  return isValid ? true : t('payment.checkout.invalid');
+                },
+                ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
+              }}
+              errorPosition={errorPosition}
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.postal_code')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
+                    <Controller
+                      name="billing_address.country"
+                      control={control}
+                      render={({ field }) => (
+                        <CountrySelect
+                          {...field}
+                          ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
+                          sx={{
+                            '.MuiOutlinedInput-notchedOutline': {
+                              borderColor: 'transparent !important',
+                            },
+                          }}
+                        />
+                      )}
+                    />
+                  </InputAdornment>
+                ),
+              }}
+            />
           </Stack>
         </Stack>
-      </Fade>
-    );
-  }
-
-  return null;
+      </Stack>
+    </Fade>
+  );
 }

package/src/payment/form/index.tsx

@@ -2,6 +2,7 @@
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FlagEmoji } from 'react-international-phone';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type {
@@ -52,7 +53,7 @@ import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
 import ConfirmDialog from '../../components/confirm';
-import { getFieldValidation } from '../../libs/validator';
+import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -222,6 +223,7 @@ export default function PaymentForm({
     creditInsufficientInfo: {
       open: boolean;
     } | null;
+    showEditForm: boolean;
   }>({
     submitting: false,
     paying: false,
@@ -233,6 +235,7 @@ export default function PaymentForm({
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
+    showEditForm: false,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -368,25 +371,113 @@ export default function PaymentForm({
   const showStake = method.type === 'arcblock' && !checkoutSession.subscription_data?.no_stake;
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
-  const showForm = useMemo(() => {
+
+  const validateUserInfo = () => {
     if (!session?.user) {
       return false;
     }
-    if (method.type === 'stripe') {
-      return true;
+
+    const { fullName, name, email, phone, address } = session.user;
+    const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
+
+    const hasName = !!(fullName || name);
+    if (!hasName) {
+      return false;
     }
-    if (checkoutSession.phone_number_collection?.enabled) {
-      return true;
+
+    const hasValidEmail = email && isEmail(email);
+    if (!hasValidEmail) {
+      return false;
     }
-    const mode = checkoutSession.billing_address_collection;
-    if (mode === 'required') {
-      return true;
+
+    const nameValidation = getFieldValidation('customer_name', fieldValidation, locale);
+    if (nameValidation.pattern && fullName) {
+      const pattern = nameValidation.pattern.value;
+      if (!pattern.test(fullName)) {
+        return false;
+      }
+    }
+
+    const emailValidation = getFieldValidation('customer_email', fieldValidation, locale);
+    if (emailValidation.pattern && email) {
+      const pattern = emailValidation.pattern.value;
+      if (!pattern.test(email)) {
+        return false;
+      }
+    }
+
+    if (!address || !address.postalCode || !validatePostalCode(address.postalCode, address.country)) {
+      return false;
     }
-    if (session?.user?.fullName && session?.user?.email) {
+
+    const postalCodeValidation = getFieldValidation('billing_address.postal_code', fieldValidation, locale);
+    if (postalCodeValidation.pattern) {
+      const pattern = postalCodeValidation.pattern.value;
+      if (!pattern.test(address.postalCode)) {
+        return false;
+      }
+    }
+
+    if (!address.province) {
       return false;
     }
+    const stateValidation = getFieldValidation('billing_address.state', fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
+
+    if (checkoutSession.phone_number_collection?.enabled) {
+      if (!phone || phone.trim() === '') {
+        return false;
+      }
+      const phoneValidation = getFieldValidation('customer_phone', fieldValidation, locale);
+      if (phoneValidation.pattern) {
+        const pattern = phoneValidation.pattern.value;
+        if (!pattern.test(phone)) {
+          return false;
+        }
+      }
+    }
+
+    const addressMode = checkoutSession.billing_address_collection;
+    if (addressMode === 'required') {
+      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+        return false;
+      }
+
+      const line1Validation = getFieldValidation('billing_address.line1', fieldValidation, locale);
+      if (line1Validation.pattern) {
+        const pattern = line1Validation.pattern.value;
+        if (!pattern.test(address.line1)) {
+          return false;
+        }
+      }
+
+      const cityValidation = getFieldValidation('billing_address.city', fieldValidation, locale);
+      if (cityValidation.pattern) {
+        const pattern = cityValidation.pattern.value;
+        if (!pattern.test(address.city)) {
+          return false;
+        }
+      }
+    }
+
     return true;
-  }, [session?.user, method, checkoutSession]);
+  };
+
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (state.showEditForm) {
+      return true;
+    }
+    return !validateUserInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session?.user, method, state.showEditForm]);
 
   const handleConnected = async () => {
     if (processingRef.current) {
@@ -910,6 +1001,64 @@ export default function PaymentForm({
               )}
             </Stack>
           </Fade>
+          {!showForm && session?.user && (
+            <Stack
+              spacing={1.25}
+              sx={{
+                mt: 2,
+                p: 2,
+                pt: 1,
+                backgroundColor: 'background.paper',
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'divider',
+              }}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 0.25 }}>
+                <Typography variant="subtitle2" sx={{ color: 'text.primary', fontSize: '0.875rem' }}>
+                  {t('payment.checkout.customerInfo')}
+                </Typography>
+                <Button
+                  size="small"
+                  variant="text"
+                  onClick={() => setState({ showEditForm: true })}
+                  sx={{ minWidth: 0 }}>
+                  {t('common.edit')}
+                </Button>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 600, fontSize: '0.9375rem' }}>
+                  {session.user.fullName || session.user.name}
+                </Typography>
+                <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+                  {session.user.email}
+                </Typography>
+                {checkoutSession.phone_number_collection?.enabled && session.user.phone && (
+                  <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+                    {session.user.phone}
+                  </Typography>
+                )}
+                {session.user.address && (
+                  <Stack direction="row" alignItems="center" spacing={0.75}>
+                    {session.user.address.country && (
+                      <FlagEmoji iso2={session.user.address.country.toLowerCase()} style={{ width: 18, height: 14 }} />
+                    )}
+                    <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+                      {[
+                        session.user.address.line1,
+                        session.user.address.city,
+                        session.user.address.province,
+                        session.user.address.country?.toUpperCase(),
+                      ]
+                        .filter(Boolean)
+                        .join(', ')}
+                      {session.user.address.postalCode &&
+                        ` [ ${t('payment.checkout.billing.postal_code')}: ${session.user.address.postalCode} ]`}
+                    </Typography>
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          )}
           {showForm && (
             <Stack
               direction="column"
@@ -968,7 +1117,6 @@ export default function PaymentForm({
               )}
               <AddressForm
                 mode={checkoutSession.billing_address_collection as string}
-                stripe={method?.type === 'stripe'}
                 sx={{ marginTop: '0 !important' }}
                 fieldValidation={checkoutSession.metadata?.page_info?.field_validation}
                 errorPosition={formErrorPosition}