@blocklet/payment-react 1.21.13 → 1.21.14

package/src/components/country-select.tsx

@@ -1,12 +1,32 @@
 /* eslint-disable @typescript-eslint/indent */
 import { useMemo, useState, useEffect, ChangeEvent, useRef, KeyboardEvent } from 'react';
-import { Box, MenuItem, Typography, TextField, Dialog, DialogContent, IconButton, Select, Slide } from '@mui/material';
+import {
+  Box,
+  MenuItem,
+  Typography,
+  TextField,
+  Dialog,
+  DialogContent,
+  IconButton,
+  Select,
+  Slide,
+  Stack,
+} from '@mui/material';
+import { Clear as ClearIcon } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { SlideProps, SxProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 import { useMobile } from '../hooks/mobile';
 
+function useFormContextSafe() {
+  try {
+    return useFormContext();
+  } catch {
+    return null;
+  }
+}
+
 function Transition({ ref, ...props }: { ref: React.RefObject<unknown | null> } & SlideProps) {
   return <Slide direction="up" ref={ref} timeout={200} {...props} />;
 }
@@ -14,22 +34,30 @@ function Transition({ ref, ...props }: { ref: React.RefObject<unknown | null> }
 export type CountrySelectProps = {
   value: CountryIso2;
   onChange: (value: CountryIso2) => void;
-  name: string;
+  name?: string;
   sx?: SxProps;
   showDialCode?: boolean;
+  label?: string;
+  allowClear?: boolean;
+  bordered?: boolean;
+  disabled?: boolean;
 };
 
 export default function CountrySelect({
   ref = undefined,
   value,
   onChange,
-  name,
+  name = '',
   sx = {},
   showDialCode = false,
+  label = '',
+  bordered = false,
+  allowClear = false,
+  disabled = false,
 }: CountrySelectProps & {
   ref?: React.RefObject<HTMLDivElement | null>;
 }) {
-  const { setValue } = useFormContext();
+  const formContext = useFormContextSafe();
   const [open, setOpen] = useState(false);
   const [searchText, setSearchText] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
@@ -154,10 +182,21 @@ export default function CountrySelect({
 
   const handleCountryClick = (code: CountryIso2) => {
     onChange(code);
-    setValue(name, code);
+    if (formContext && name) {
+      formContext.setValue(name, code);
+    }
     setOpen(false);
   };
 
+  const handleClear = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onChange('' as CountryIso2);
+    if (formContext && name) {
+      formContext.setValue(name, '');
+    }
+  };
+
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
     setSearchText(e.target.value);
@@ -222,13 +261,14 @@ export default function CountrySelect({
           inputRef={inputRef}
           autoFocus={!isMobile}
           fullWidth
-          placeholder="Search country..."
+          placeholder={label || 'Search country...'}
           value={searchText}
           onChange={handleSearchChange}
           onKeyDown={handleKeyDown}
           onClick={(e) => e.stopPropagation()}
           size="small"
           variant="outlined"
+          disabled={disabled}
         />
       </Box>
       <Box
@@ -324,6 +364,7 @@ export default function CountrySelect({
                 display: 'flex',
                 flexDirection: 'column',
                 overflowY: 'hidden',
+                width: '100%',
               },
             },
           },
@@ -341,7 +382,7 @@ export default function CountrySelect({
           },
           '.MuiSelect-select': {
             padding: '8px',
-            paddingRight: '24px !important',
+            paddingRight: allowClear && value ? '48px !important' : '24px !important',
           },
           svg: {
             right: 0,
@@ -354,8 +395,11 @@ export default function CountrySelect({
         value={value}
         onChange={(e) => {
           onChange(e.target.value as CountryIso2);
-          setValue(name, e.target.value);
+          if (formContext && name) {
+            formContext.setValue(name, e.target.value);
+          }
         }}
+        disabled={disabled}
         renderValue={(code) => (
           <Box
             sx={{
@@ -364,9 +408,58 @@ export default function CountrySelect({
               flexWrap: 'nowrap',
               gap: 0.5,
               cursor: 'pointer',
+              width: '100%',
             }}>
-            <FlagEmoji iso2={code} style={{ display: 'flex' }} />
-            <Typography>{countryDetail?.name}</Typography>
+            {code ? (
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'center',
+                  gap: 0.5,
+                  justifyContent: 'space-between',
+                  width: '100%',
+                }}>
+                <Stack
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    gap: 0.5,
+                  }}>
+                  <FlagEmoji iso2={code} style={{ display: 'flex' }} />
+                  <Typography sx={{ flex: 1 }}>{countryDetail?.name}</Typography>
+                </Stack>
+
+                {allowClear && value && (
+                  <Box
+                    onClick={handleClear}
+                    onMouseDown={(event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                    }}
+                    onTouchStart={(event) => {
+                      event.stopPropagation();
+                    }}
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      cursor: 'pointer',
+                      p: 0,
+                      borderRadius: '50%',
+                      border: 'none',
+                      background: 'transparent',
+                      zIndex: 2,
+                      marginRight: '-28px',
+                      '&:hover': {
+                        backgroundColor: 'action.hover',
+                      },
+                    }}>
+                    <ClearIcon fontSize="small" />
+                  </Box>
+                )}
+              </Stack>
+            ) : (
+              <Typography sx={{ color: 'text.secondary', flex: 1 }}>{label || 'Select country...'}</Typography>
+            )}
           </Box>
         )}>
         {countryListContent}
@@ -377,7 +470,10 @@ export default function CountrySelect({
   return (
     <Box ref={ref} sx={{ ...sx }}>
       <Box
-        onClick={() => setOpen(true)}
+        onClick={() => {
+          if (disabled) return;
+          setOpen(true);
+        }}
         sx={{
           display: 'flex',
           alignItems: 'center',
@@ -387,7 +483,12 @@ export default function CountrySelect({
           padding: '8px',
           paddingRight: '24px',
           position: 'relative',
-          border: 'none',
+          ...(!bordered
+            ? {
+                border: 'none',
+              }
+            : {}),
+
           '-webkit-tap-highlight-color': 'transparent',
           userSelect: 'none',
           background: 'none',
@@ -397,10 +498,57 @@ export default function CountrySelect({
             outline: 'none',
           },
 
+          ...(disabled
+            ? {
+                backgroundColor: 'grey.100',
+                cursor: 'not-allowed',
+                color: 'text.disabled',
+                '&:hover, &:focus, &:active': {
+                  backgroundColor: 'grey.100',
+                  color: 'text.disabled',
+                },
+              }
+            : {}),
+
           touchAction: 'manipulation',
         }}>
-        <FlagEmoji iso2={value} style={{ display: 'flex' }} />
-        <Typography>{countryDetail?.name}</Typography>
+        {value ? (
+          <>
+            <FlagEmoji iso2={value} style={{ display: 'flex' }} />
+            <Typography sx={{ flex: 1 }}>{countryDetail?.name}</Typography>
+            {allowClear && (
+              <Box
+                component="button"
+                type="button"
+                onClick={handleClear}
+                onMouseDown={(event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                }}
+                onTouchStart={(event) => {
+                  event.stopPropagation();
+                }}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  p: 0.5,
+                  mr: 1,
+                  borderRadius: '50%',
+
+                  border: 'none',
+                  background: 'transparent',
+                  '&:hover': {
+                    backgroundColor: 'action.hover',
+                  },
+                }}>
+                <ClearIcon fontSize="small" />
+              </Box>
+            )}
+          </>
+        ) : (
+          <Typography sx={{ color: 'text.secondary', flex: 1 }}>{label || 'Select country...'}</Typography>
+        )}
         <Box
           sx={{
             position: 'absolute',
@@ -418,18 +566,21 @@ export default function CountrySelect({
         onClose={() => setOpen(false)}
         fullWidth
         maxWidth="xs"
-        // @ts-expect-error
-        TransitionComponent={Transition}
-        PaperProps={{
-          sx: {
-            position: 'absolute',
-            bottom: 0,
-            m: 0,
-            p: 0,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            width: '100%',
+        slotProps={{
+          paper: {
+            sx: {
+              position: 'absolute',
+              bottom: 0,
+              m: 0,
+              p: 0,
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              width: '100%',
+            },
           },
+        }}
+        slots={{
+          transition: Transition,
         }}>
         <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <Typography variant="h6">Select Country</Typography>

package/src/components/source-data-viewer.tsx

@@ -180,7 +180,13 @@ function SourceDataViewer({
 
   if (compact) {
     return (
-      <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+      <Stack
+        direction="row"
+        spacing={1}
+        useFlexGap
+        sx={{
+          flexWrap: 'wrap',
+        }}>
         {displayItems.map((field) => (
           <Chip
             key={field.key}
@@ -241,8 +247,8 @@ function SourceDataViewer({
                   }}>
                   <Typography
                     variant="body2"
-                    color="text.secondary"
                     sx={{
+                      color: 'text.secondary',
                       fontSize: '0.8rem',
                       minWidth: 100,
                       fontWeight: 600,
@@ -276,8 +282,8 @@ function SourceDataViewer({
           }}>
           <Typography
             variant="body2"
-            color="text.secondary"
             sx={{
+              color: 'text.secondary',
               fontSize: '0.8rem',
               minWidth: 100,
               fontWeight: 600,

package/src/history/credit/transactions-list.tsx

@@ -269,7 +269,12 @@ const TransactionsTable = React.memo((props: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
           return (
-            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+                fontSize: '0.875rem',
+              }}>
               {formatToDate(item.created_at, locale, 'YYYY-MM-DD HH:mm')}
             </Typography>
           );

package/src/index.ts

@@ -107,3 +107,5 @@ export {
   PromotionCode,
   SourceDataViewer,
 };
+
+export type { CountrySelectProps } from './components/country-select';

package/src/libs/validator.ts

@@ -1,69 +1,181 @@
-import isPostalCode, { PostalCodeLocale } from 'validator/lib/isPostalCode';
 import { t } from '../locales';
 
-const POSTAL_CODE_SUPPORTED_COUNTRIES: PostalCodeLocale[] = [
-  'AD',
-  'AT',
-  'AU',
-  'BE',
-  'BG',
-  'BR',
-  'CA',
-  'CH',
-  'CN',
-  'CZ',
-  'DE',
-  'DK',
-  'DZ',
-  'EE',
-  'ES',
-  'FI',
-  'FR',
-  'GB',
-  'GR',
-  'HR',
-  'HU',
-  'ID',
-  'IE',
-  'IL',
-  'IN',
-  'IR',
-  'IS',
-  'IT',
-  'JP',
-  'KE',
-  'KR',
-  'LI',
-  'LT',
-  'LU',
-  'LV',
-  'MX',
-  'MT',
-  'NL',
-  'NO',
-  'NZ',
-  'PL',
-  'PR',
-  'PT',
-  'RO',
-  'RU',
-  'SA',
-  'SE',
-  'SI',
-  'SK',
-  'TN',
-  'TW',
-  'UA',
-  'US',
-  'ZA',
-  'ZM',
-];
+const threeDigit = /^\d{3}$/;
+const fourDigit = /^\d{4}$/;
+const fiveDigit = /^\d{5}$/;
+const sixDigit = /^\d{6}$/;
+
+export const postalCodePatterns = {
+  GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
+  JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+
+  US: /^\d{5}([ -]\d{4})?$/,
+  CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+  DE: /^\d{5}$/,
+  JP: /^\d{3}-?\d{4}$/,
+  FR: /^\d{2}[ ]?\d{3}$/,
+  AU: fourDigit,
+  IT: /^\d{5}$/,
+  CH: fourDigit,
+  AT: fourDigit,
+  ES: /^\d{5}$/,
+  NL: /^\d{4}[ ]?[A-Z]{2}$/i,
+  BE: fourDigit,
+  DK: fourDigit,
+  SE: /^\d{3}[ ]?\d{2}$/,
+  NO: fourDigit,
+  BR: /^\d{5}-?\d{3}$/,
+  PT: /^\d{4}(-\d{3})?$/,
+  FI: fiveDigit,
+  AX: /^22\d{3}$/,
+  KR: /^\d{5}$/, // 2015年起使用5位数字邮编
+  CN: /^\d{6}$/,
+  TW: /^\d{3}(\d{2})?$/,
+  SG: sixDigit,
+  DZ: fiveDigit,
+  AD: /^AD\d{3}$/,
+  AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
+  AM: /^(37)?\d{4}$/,
+  AZ: /^\d{4}$/,
+  BH: /^((1[0-2]|[2-9])\d{2})?$/,
+  BD: fourDigit,
+  BB: /^(BB\d{5})?$/i,
+  BY: sixDigit,
+  BM: /^[A-Z]{2}[ ]?[A-Z0-9]{2}$/i,
+  BA: /^\d{5}$/,
+  IO: /^BBND 1ZZ$/i,
+  BN: /^[A-Z]{2}[ ]?\d{4}$/i,
+  BG: fourDigit,
+  KH: fiveDigit,
+  CV: fourDigit,
+  CL: /^\d{7}$/,
+  CR: /^\d{4,5}|\d{3}-\d{4}$/,
+  HR: /^\d{5}$/,
+  CY: fourDigit,
+  CZ: /^\d{3}[ ]?\d{2}$/,
+  DO: fiveDigit,
+  EC: /^([A-Z]\d{4}[A-Z]|(?:[A-Z]{2})?\d{6})?$/i,
+  EG: fiveDigit,
+  EE: fiveDigit,
+  FO: threeDigit,
+  GE: fourDigit,
+  GR: /^\d{3}[ ]?\d{2}$/,
+  GL: /^39\d{2}$/,
+  GT: fiveDigit,
+  HT: /^\d{4}$/,
+  HN: /^(?:\d{5})?$/,
+  HU: fourDigit,
+  IS: threeDigit,
+  IN: /^[1-9]\d{5}$/,
+  ID: fiveDigit,
+  IL: fiveDigit,
+  JO: fiveDigit,
+  KZ: sixDigit,
+  KE: fiveDigit,
+  KW: fiveDigit,
+  LA: fiveDigit,
+  LV: fourDigit,
+  LB: /^(\d{4}([ ]?\d{4})?)?$/,
+  LI: /^(948[5-9])|(949[0-7])$/,
+  LT: fiveDigit,
+  LU: fourDigit,
+  MK: fourDigit,
+  MY: fiveDigit,
+  MV: fiveDigit,
+  MT: /^[A-Z]{3}[ ]?\d{2,4}$/i,
+  MU: /^(\d{3}[A-Z]{2}\d{3})?$/i,
+  MX: fiveDigit,
+  MD: fourDigit,
+  MC: /^980\d{2}$/,
+  MA: fiveDigit,
+  NP: fiveDigit,
+  NZ: fourDigit,
+  NI: /^((\d{4}-)?\d{3}-\d{3}(-\d{1})?)?$/,
+  NG: /^(\d{6})?$/,
+  OM: /^(PC )?\d{3}$/i,
+  PK: fiveDigit,
+  PY: fourDigit,
+  PH: fourDigit,
+  PL: /^\d{2}-\d{3}$/,
+  PR: /^00[679]\d{2}([ -]\d{4})?$/,
+  RO: sixDigit,
+  RU: sixDigit,
+  SM: /^4789\d$/,
+  SA: fiveDigit,
+  SN: fiveDigit,
+  SK: /^\d{3}[ ]?\d{2}$/,
+  SI: fourDigit,
+  ZA: fourDigit,
+  LK: fiveDigit,
+  TJ: sixDigit,
+  TH: fiveDigit,
+  TN: fourDigit,
+  TR: fiveDigit,
+  TM: sixDigit,
+  UA: fiveDigit,
+  UY: fiveDigit,
+  UZ: sixDigit,
+  VA: /^00120$/,
+  VE: fourDigit,
+  ZM: fiveDigit,
+
+  // Territories & special regions
+  AS: /^96799$/,
+  CC: /^6799$/,
+  CK: fourDigit,
+  RS: sixDigit,
+  ME: /^8\d{4}$/,
+  CS: /^\d{5}$/, // historical
+  YU: /^\d{5}$/, // historical
+  CX: /^6798$/,
+  ET: fourDigit,
+  FK: /^FIQQ 1ZZ$/i,
+  NF: /^2899$/,
+  FM: /^(9694[1-4])([ -]\d{4})?$/,
+  GF: /^9[78]3\d{2}$/,
+  GN: threeDigit,
+  GP: /^9[78][01]\d{2}$/,
+  GS: /^SIQQ 1ZZ$/i,
+  GU: /^969[123]\d([ -]\d{4})?$/,
+  GW: fourDigit,
+  HM: fourDigit,
+  IQ: fiveDigit,
+  KG: sixDigit,
+  LR: fourDigit,
+  LS: threeDigit,
+  MG: threeDigit,
+  MH: /^969[67]\d([ -]\d{4})?$/,
+  MN: sixDigit,
+  MP: /^9695[012]([ -]\d{4})?$/,
+  MQ: /^9[78]2\d{2}$/,
+  NC: /^988\d{2}$/,
+  NE: fourDigit,
+  VI: /^008(([0-4]\d)|(5[01]))([ -]\d{4})?$/,
+  VN: sixDigit,
+  PF: /^987\d{2}$/,
+  PG: threeDigit,
+  PM: /^9[78]5\d{2}$/,
+  PN: /^PCRN 1ZZ$/i,
+  PW: /^96940$/,
+  RE: /^9[78]4\d{2}$/,
+  SH: /^(ASCN|STHL) 1ZZ$/i,
+  SJ: fourDigit,
+  SO: fiveDigit,
+  SZ: /^[HLMS]\d{3}$/i,
+  TC: /^TKCA 1ZZ$/i,
+  WF: /^986\d{2}$/,
+  XK: fiveDigit,
+  YT: /^976\d{2}$/,
+};
+
 export function validatePostalCode(postalCode: string, country?: string): boolean {
   if (!postalCode) return true;
-  const countryUpper = country?.toUpperCase();
-  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper as PostalCodeLocale);
   try {
-    return isPostalCode(postalCode, isSupported ? (countryUpper as PostalCodeLocale) : 'any');
+    const countryUpper = country?.toUpperCase() as keyof typeof postalCodePatterns;
+    if (!countryUpper) return false;
+    return !postalCodePatterns[countryUpper] || postalCodePatterns[countryUpper].test(postalCode);
   } catch (error) {
     console.error(error);
     return false;

package/src/locales/en.tsx

@@ -227,6 +227,7 @@ export default flat({
         phonePlaceholder: 'Phone number',
         phoneTip: 'In case we need to contact you about your order',
       },
+      customerInfo: 'Customer Information',
       upsell: {
         save: 'Save with {recurring} billing',
         revert: 'Switch to {recurring} billing',

package/src/locales/zh.tsx

@@ -224,6 +224,7 @@ export default flat({
         phonePlaceholder: '电话号码',
         phoneTip: '以防需要与您联系有关您的订单',
       },
+      customerInfo: '客户信息',
       upsell: {
         save: '使用{recurring}计费方式',
         revert: '切换到{recurring}计费方式',