@blocklet/payment-react 1.18.34 → 1.18.36

package/src/contexts/payment.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/indent */
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
@@ -74,6 +75,19 @@ const getMethod = (methodId: string, methods: TPaymentMethodExpanded[]) => {
   return methods.find((x) => x.id === methodId);
 };
 
+const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
+  const cacheKey = `sync-space-${userDid}-${spaceDid}`;
+  const cachedRequest = new CachedRequest(cacheKey, () => api.post('/api/customers/sync-to-space'), {
+    ttl: 1000 * 60 * 60, // 1 hour
+  });
+  return cachedRequest.fetch(false).then((res) => {
+    if (!res.success) {
+      cachedRequest.clearCache();
+    }
+    return res;
+  });
+};
+
 function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
   if (baseUrl) {
     // This is hack but efficient to share
@@ -101,6 +115,20 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
   } = useRequest(getSettings, {
     refreshDeps: [livemode],
   });
+
+  useEffect(() => {
+    const didSpace = session?.user?.didSpace as
+      | {
+          endpoint: string;
+          did: string;
+        }
+      | undefined;
+    const userDid = session?.user?.did;
+    if (userDid && didSpace && didSpace.endpoint && didSpace.did) {
+      syncToSpaceRequest(userDid, didSpace.did);
+    }
+  }, [session?.user]);
+
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
 

package/src/libs/cached-request.ts

@@ -70,7 +70,7 @@ export class CachedRequest {
     }
   }
 
-  private clearCache() {
+  clearCache() {
     const cache = this.getCache();
     if (this.options.strategy === 'memory') {
       cache.delete(this.cacheKey);

package/src/libs/util.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
+  ChainType,
   PaymentDetails,
   PriceCurrency,
   PriceRecurring,
@@ -1259,3 +1260,17 @@ export function parseMarkedText(text: string): Array<{
 
   return result.filter((p) => p.content !== '');
 }
+
+export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
+  if (!method || !address) {
+    return '';
+  }
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  if (method.type === 'arcblock' && address) {
+    return joinURL(explorerHost, 'accounts', address, 'tokens');
+  }
+  if (['ethereum', 'base'].includes(method.type) && address) {
+    return joinURL(explorerHost, 'address', address);
+  }
+  return '';
+}

package/src/libs/validator.ts

@@ -1,4 +1,5 @@
 import isPostalCode, { PostalCodeLocale } from 'validator/lib/isPostalCode';
+import { t } from '../locales';
 
 const POSTAL_CODE_SUPPORTED_COUNTRIES: PostalCodeLocale[] = [
   'AD',
@@ -68,3 +69,16 @@ export function validatePostalCode(postalCode: string, country?: string): boolea
     return false;
   }
 }
+
+export function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale: string = 'en') {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules: Record<string, any> = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || t('payment.checkout.invalid', locale),
+    };
+  }
+  return rules;
+}

package/src/locales/en.tsx

@@ -241,6 +241,7 @@ export default flat({
         payer: 'Account',
         amount: 'Amount',
         failed: 'Account changed, please pay manually.',
+        balanceLink: 'View Balance',
       },
     },
     customer: {

package/src/locales/zh.tsx

@@ -236,6 +236,7 @@ export default flat({
         payer: '账户地址',
         amount: '支付金额',
         failed: '账户发生变化，无法自动完成支付，请手动支付。',
+        balanceLink: '查看余额',
       },
     },
     customer: {

package/src/payment/form/address.tsx

@@ -4,20 +4,24 @@ import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
 import CountrySelect from '../../components/country-select';
-import { validatePostalCode } from '../../libs/validator';
+import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
 type Props = {
   mode: string;
   stripe: boolean;
   sx?: SxProps;
+  fieldValidation?: Record<string, any>;
+  errorPosition?: 'right' | 'bottom';
 };
 
 AddressForm.defaultProps = {
   sx: {},
+  fieldValidation: {},
+  errorPosition: 'right',
 };
 
-export default function AddressForm({ mode, stripe, sx = {} }: Props) {
-  const { t } = useLocaleContext();
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }: Props) {
+  const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
   if (mode === 'required') {
@@ -28,24 +32,33 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
             <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.line1', fieldValidation, locale),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.line1')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
             <FormInput
               name="billing_address.city"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.city', fieldValidation, locale),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.city')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
             <FormInput
               name="billing_address.state"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.state', fieldValidation, locale),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.state')}
             />
@@ -58,8 +71,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                   const isValid = validatePostalCode(x, country);
                   return isValid ? true : t('payment.checkout.invalid');
                 },
+                ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
               }}
-              errorPosition="right"
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.postal_code')}
               InputProps={{
@@ -104,8 +118,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                     const isValid = validatePostalCode(x, country);
                     return isValid ? true : t('payment.checkout.invalid');
                   },
+                  ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
                 }}
-                errorPosition="right"
+                errorPosition={errorPosition}
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
                 wrapperStyle={{ height: '40px' }}

package/src/payment/form/index.tsx

@@ -5,7 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -17,7 +17,7 @@ import { fromUnitToToken } from '@ocap/util';
 import DID from '@arcblock/ux/lib/DID';
 
 import isEmpty from 'lodash/isEmpty';
-import { HelpOutline } from '@mui/icons-material';
+import { HelpOutline, OpenInNew } from '@mui/icons-material';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -28,6 +28,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
@@ -41,6 +42,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';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -175,6 +177,7 @@ export default function PaymentForm({
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
+  const formErrorPosition = 'bottom';
   const {
     control,
     getValues,
@@ -596,6 +599,7 @@ export default function PaymentForm({
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
     <ConfirmDialog
       onConfirm={handleFastCheckoutConfirm}
@@ -611,9 +615,24 @@ export default function PaymentForm({
               <Typography color="text.primary" sx={{ whiteSpace: 'nowrap' }}>
                 {t('payment.checkout.fastPay.payer')}
               </Typography>
-              <Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                 <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
-              </Typography>
+                {balanceLink && (
+                  <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
+                    <OpenInNew
+                      sx={{
+                        color: 'text.lighter',
+                        fontSize: '0.85rem',
+                        cursor: 'pointer',
+                        '&:hover': { color: 'text.primary' },
+                      }}
+                      onClick={() => {
+                        window.open(balanceLink, '_blank');
+                      }}
+                    />
+                  </Tooltip>
+                )}
+              </Box>
             </Stack>
             <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
               <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
@@ -748,19 +767,25 @@ export default function PaymentForm({
               <FormInput
                 name="customer_name"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
+                  ...getFieldValidation('customer_name', checkoutSession.metadata?.page_info?.field_validation, locale),
                 }}
               />
               <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
               <FormInput
                 name="customer_email"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
                   validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
+                  ...getFieldValidation(
+                    'customer_email',
+                    checkoutSession.metadata?.page_info?.field_validation,
+                    locale
+                  ),
                 }}
               />
               {checkoutSession.phone_number_collection?.enabled && (
@@ -769,7 +794,7 @@ export default function PaymentForm({
                   <PhoneInput
                     name="customer_phone"
                     variant="outlined"
-                    errorPosition="right"
+                    errorPosition={formErrorPosition}
                     placeholder="Phone number"
                     rules={{
                       required: t('payment.checkout.required'),
@@ -777,6 +802,11 @@ export default function PaymentForm({
                         const isValid = await validatePhoneNumber(x);
                         return isValid ? true : t('payment.checkout.invalid');
                       },
+                      ...getFieldValidation(
+                        'customer_phone',
+                        checkoutSession.metadata?.page_info?.field_validation,
+                        locale
+                      ),
                     }}
                   />
                 </>
@@ -785,6 +815,8 @@ export default function PaymentForm({
                 mode={checkoutSession.billing_address_collection as string}
                 stripe={method?.type === 'stripe'}
                 sx={{ marginTop: '0 !important' }}
+                fieldValidation={checkoutSession.metadata?.page_info?.field_validation}
+                errorPosition={formErrorPosition}
               />
             </Stack>
           )}

package/src/payment/form/phone.tsx

@@ -93,6 +93,7 @@ export default function PhoneInput({ ...props }) {
                   borderColor: 'transparent',
                 },
               }}
+              showDialCode
             />
           </InputAdornment>
         ),

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

@@ -23,6 +23,7 @@ export type StripeCheckoutFormProps = {
 };
 
 const PaymentElementContainer = styled('div')`
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   &.visible {