@blocklet/payment-react 1.14.21 → 1.14.23

package/src/payment/form/currency.tsx

@@ -1,5 +1,5 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
-import { Avatar, Card, Stack, Typography } from '@mui/material';
+import { Avatar, Card, Radio, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
 type Props = {
@@ -14,8 +14,9 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
       count={currencies.length}
       style={{
         display: currencies.length > 1 ? 'grid' : 'block',
-        gridTemplateColumns: '50% 50%',
         width: '100%',
+        gap: 12,
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
       }}>
       {currencies.map((x, i) => {
         const selected = i === value;
@@ -25,16 +26,26 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
             variant="outlined"
             onClick={() => onChange(i)}
             className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
-            <Stack direction="row" alignItems="center">
-              <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
+            <Stack direction="row" alignItems="center" sx={{ position: 'relative' }}>
+              <Avatar src={x.logo} alt={x.name} sx={{ width: 40, height: 40, marginRight: '12px' }} />
               <div>
-                <Typography variant="h5" component="div" sx={{ fontSize: '18px' }}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
                   {x.symbol}
                 </Typography>
-                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                <Typography sx={{ fontSize: 14 }} color="text.lighter" gutterBottom>
                   {(x as any).method.name}
                 </Typography>
               </div>
+              <Radio
+                checked={selected}
+                sx={{
+                  position: 'absolute',
+                  right: 0,
+                }}
+              />
             </Stack>
           </Card>
         );
@@ -46,32 +57,27 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
 const Root = styled<any>('section')`
   .cko-payment-card {
     position: relative;
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border: 1px solid var(--stroke-border-interactive, #0086ff);
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: 12px solid ${(props) => props.theme.palette.primary.main};
-    border-top-color: transparent;
-    border-left-color: transparent;
-  }
+  // .cko-payment-card::before {
+  //   content: '';
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
+  //   border-top-color: transparent;
+  //   border-left-color: transparent;
+  // }
 
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd),
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: ${(props) => (props.count > 1 ? 8 : 0)}px;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
   .cko-payment-card::after {

package/src/payment/form/index.tsx

@@ -1,7 +1,7 @@
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useTheme } from '@arcblock/ux/lib/Theme';
+// import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type {
   TCheckoutSession,
@@ -11,8 +11,8 @@ import type {
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
-import { Fade, InputAdornment, Stack, Typography } from '@mui/material';
-import { useCreation, useMemoizedFn, useSetState, useSize } from 'ahooks';
+import { Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { useMemoizedFn, useSetState } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useState } from 'react';
@@ -35,7 +35,6 @@ import {
   getStatementDescriptor,
 } from '../../libs/util';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
-import UserButtons from './addon';
 import AddressForm from './address';
 import CurrencySelector from './currency';
 import PhoneInput from './phone';
@@ -93,12 +92,12 @@ export default function PaymentForm({
   customer,
   onPaid,
   onError,
-  mode,
+  // mode,
   action,
 }: PageData) {
-  const theme = useTheme();
+  // const theme = useTheme();
   const { t } = useLocaleContext();
-  const { session, connect } = usePaymentContext();
+  const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
   const { control, getValues, setValue, handleSubmit } = useFormContext();
   const quantityInventoryStatus = useMemo(() => {
@@ -184,16 +183,16 @@ export default function PaymentForm({
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
 
-  const domSize = useSize(document.body);
+  // const domSize = useSize(document.body);
 
-  const isColumnLayout = useCreation(() => {
-    if (domSize) {
-      if (domSize?.width <= theme.breakpoints.values.md) {
-        return true;
-      }
-    }
-    return false;
-  }, [domSize, theme]);
+  // const isColumnLayout = useCreation(() => {
+  //   if (domSize) {
+  //     if (domSize?.width <= theme.breakpoints.values.md) {
+  //       return true;
+  //     }
+  //   }
+  //   return false;
+  // }, [domSize, theme]);
 
   const afterUserLoggedIn = useMemoizedFn(() => {
     if (hasDidWallet(session.user)) {
@@ -383,11 +382,54 @@ export default function PaymentForm({
     <>
       <Fade in>
         <Stack className="cko-payment-contact">
+          <Typography
+            title={t('payment.checkout.paymentDetails')}
+            sx={{
+              color: 'text.primary',
+              fontSize: {
+                xs: '18px',
+                md: '24px',
+              },
+              fontWeight: '700',
+              lineHeight: '32px',
+              mb: 2.5,
+            }}>
+            {t('payment.checkout.paymentDetails')}
+          </Typography>
+          <Fade in>
+            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
+              <Stack direction="row" sx={{ width: '100%' }}>
+                <Controller
+                  name="payment_currency"
+                  control={control}
+                  render={() => (
+                    <CurrencySelector
+                      value={paymentCurrencyIndex}
+                      currencies={currencies}
+                      onChange={setPaymentCurrencyIndex}
+                    />
+                  )}
+                />
+              </Stack>
+              {state.stripePaying && state.stripeContext && (
+                <StripeCheckout
+                  clientSecret={state.stripeContext.client_secret}
+                  intentType={state.stripeContext.intent_type}
+                  publicKey={method.settings.stripe?.publishable_key as string}
+                  customer={state.customer as TCustomer}
+                  mode={checkoutSession.mode}
+                  onConfirm={onStripeConfirm}
+                  onCancel={onStripeCancel}
+                />
+              )}
+            </Stack>
+          </Fade>
           <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
-            <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
-            {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />}
+            {/* <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography> */}
+            {/* {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />} */}
           </Stack>
-          <Stack direction="column" className="cko-payment-form" spacing={0}>
+          <Stack direction="column" className="cko-payment-form" spacing={0} sx={{ flex: 1, overflow: 'auto' }}>
+            <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
             <FormInput
               name="customer_name"
               variant="outlined"
@@ -395,10 +437,8 @@ export default function PaymentForm({
               rules={{
                 required: t('payment.checkout.required'),
               }}
-              InputProps={{
-                startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.name')}</InputAdornment>,
-              }}
             />
+            <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
             <FormInput
               name="customer_email"
               variant="outlined"
@@ -407,64 +447,38 @@ export default function PaymentForm({
                 required: t('payment.checkout.required'),
                 validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
               }}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">{t('payment.checkout.customer.email')}</InputAdornment>
-                ),
-              }}
             />
             {checkoutSession.phone_number_collection?.enabled && (
-              <PhoneInput
-                name="customer_phone"
-                variant="outlined"
-                errorPosition="right"
-                placeholder="Phone number"
-                rules={{
-                  required: t('payment.checkout.required'),
-                  validate: (x: string) => {
-                    try {
-                      const parsed = phoneUtil.parseAndKeepRawInput(x);
-                      return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
-                    } catch {
-                      return t('payment.checkout.invalid');
-                    }
-                  },
-                }}
-              />
-            )}
-          </Stack>
-        </Stack>
-      </Fade>
-      <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
-      <Fade in>
-        <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
-          <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
-          <Stack direction="row" sx={{ width: '100%' }}>
-            <Controller
-              name="payment_currency"
-              control={control}
-              render={() => (
-                <CurrencySelector
-                  value={paymentCurrencyIndex}
-                  currencies={currencies}
-                  onChange={setPaymentCurrencyIndex}
+              <>
+                <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: (x: string) => {
+                      try {
+                        const parsed = phoneUtil.parseAndKeepRawInput(x);
+                        return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
+                      } catch {
+                        return t('payment.checkout.invalid');
+                      }
+                    },
+                  }}
                 />
-              )}
+              </>
+            )}
+            <AddressForm
+              mode={checkoutSession.billing_address_collection as string}
+              stripe={method?.type === 'stripe'}
+              sx={{ marginTop: '0 !important' }}
             />
           </Stack>
-          {state.stripePaying && state.stripeContext && (
-            <StripeCheckout
-              clientSecret={state.stripeContext.client_secret}
-              intentType={state.stripeContext.intent_type}
-              publicKey={method.settings.stripe?.publishable_key as string}
-              customer={state.customer as TCustomer}
-              mode={checkoutSession.mode}
-              onConfirm={onStripeConfirm}
-              onCancel={onStripeCancel}
-            />
-          )}
         </Stack>
       </Fade>
+      <Divider sx={{ mt: 2.5, mb: 2.5 }} />
       <Fade in>
         <Stack className="cko-payment-submit">
           <LoadingButton
@@ -474,13 +488,12 @@ export default function PaymentForm({
             className="cko-submit-button"
             onClick={onAction}
             fullWidth
-            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus}
+            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
             loading={state.submitting || state.paying}>
             {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
           </LoadingButton>
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
-            <Typography
-              sx={{ mt: 1, color: 'text.secondary', fontSize: '0.9rem', lineHeight: '1.1rem', textAlign: 'center' }}>
+            <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.9rem', lineHeight: '1.1rem' }}>
               {t('payment.checkout.confirm', { payee })}
             </Typography>
           )}

package/src/payment/form/phone.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable react/prop-types */
-import { InputAdornment, MenuItem, Select, Typography } from '@mui/material';
+import { InputAdornment } from '@mui/material';
 import omit from 'lodash/omit';
 import { useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
+import { CountryIso2, defaultCountries, usePhoneInput } from 'react-international-phone';
 
 import FormInput from '../../components/input';
 import { isValidCountry } from '../../libs/util';
+import CountrySelect from '../../components/country-select';
 
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || 'billing_address.country';
-
   const { control, getValues, setValue } = useFormContext();
   const values = getValues();
 
@@ -20,11 +20,11 @@ export default function PhoneInput({ ...props }) {
     countries: defaultCountries,
     onChange: (data) => {
       setValue(props.name, data.phone);
+      setValue(countryFieldName, data.country);
     },
   });
 
   const userCountry = useWatch({ control, name: countryFieldName });
-
   useEffect(() => {
     if (userCountry !== country) {
       setCountry(userCountry);
@@ -32,9 +32,9 @@ export default function PhoneInput({ ...props }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userCountry]);
 
-  const onCountryChange = (e: any) => {
-    setCountry(e.target.value as CountryIso2);
-    setValue(countryFieldName, e.target.value);
+  const onCountryChange = (v: CountryIso2) => {
+    setCountry(v);
+    setValue(countryFieldName, v);
   };
 
   return (
@@ -47,53 +47,16 @@ export default function PhoneInput({ ...props }) {
       InputProps={{
         startAdornment: (
           <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-            <Select
-              MenuProps={{
-                style: {
-                  height: '300px',
-                  width: '360px',
-                  top: '10px',
-                  left: '-34px',
-                },
-                transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'left',
-                },
-              }}
+            <CountrySelect
+              value={country}
+              onChange={onCountryChange}
+              name={countryFieldName}
               sx={{
-                width: 'max-content',
-                // Remove default outline (display only on focus)
-                fieldset: {
-                  display: 'none',
-                },
-                '&.Mui-focused:has(div[aria-expanded="false"])': {
-                  fieldset: {
-                    display: 'block',
-                  },
-                },
-                // Update default spacing
-                '.MuiSelect-select': {
-                  padding: '8px',
-                  paddingRight: '24px !important',
-                },
-                svg: {
-                  right: 0,
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                  borderColor: 'transparent',
                 },
               }}
-              value={country}
-              onChange={onCountryChange}
-              renderValue={(code) => <FlagEmoji iso2={code} style={{ display: 'flex' }} />}>
-              {defaultCountries.map((c) => {
-                const parsed = parseCountry(c);
-                return (
-                  <MenuItem key={parsed.iso2} value={parsed.iso2}>
-                    <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
-                    <Typography marginRight="8px">{parsed.name}</Typography>
-                    <Typography color="gray">+{parsed.dialCode}</Typography>
-                  </MenuItem>
-                );
-              })}
-            </Select>
+            />
           </InputAdornment>
         ),
       }}