@anker-in/campaign-ui 0.1.9 → 0.2.10-beta.1

package/src/components/credits/context/hooks/useAddressValidate.ts

@@ -0,0 +1,281 @@
+import { useRouter } from 'next/router'
+import { useCallback, useMemo, useState } from 'react'
+import { emailValidate } from '../utils'
+
+type ValidatorCallback = (value: string, params?: Record<string, any>) => boolean
+
+const US_SPECIAL_CHARACTERS = /[&%*<>^#;-]/
+const EU_SPECIAL_CHARACTERS = /[&^*%<>;,?]/
+const SC_CHARACTERS = /[^a-zA-Z0-9\s]/
+const PURE_DIGITAL = /^\d+(\s+\d+)*$/
+const PACKSTATION = /(Packstation|Postfiliale)/gi
+const POBOX = /(P(\.)?\s*?O(\.)?\s*?box|Post(al)?(\s*)?(Office(\s*))?Box)/gi
+
+const ruleValidators: Record<string, ValidatorCallback> = {
+  minLength: (value, params) => value?.length > 0 && value?.length < params?.length,
+  maxLength: (value, params) => value?.length > params?.length,
+  isUSSpecialCharacters: value => US_SPECIAL_CHARACTERS.test(value),
+  isEUSpecialCharacters: value => EU_SPECIAL_CHARACTERS.test(value),
+  isSC: value => SC_CHARACTERS.test(value),
+  isPureDigital: value => PURE_DIGITAL.test(value),
+  isPackstation: value => PACKSTATION.test(value),
+  isPobox: value => POBOX.test(value),
+}
+
+export interface Rule {
+  key: string
+  error: string
+  rule?: string
+  params?: Record<string, any>
+  required?: boolean
+  validator?: (value: string, key: string, address: Record<string, any>) => boolean | string
+}
+
+export type FormData = {
+  key: string
+  label: string
+  tips: string
+  required: boolean
+  placeholder: string
+  type?: string
+}[]
+
+// 国家/地区配置映射
+const LOCALE_CONFIGS = {
+  us: {
+    nameRules: ['isUSSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isUSSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital'],
+      address2: ['isPobox', 'isUSSpecialCharacters', 'maxLength', 'isPureDigital'],
+    },
+    addressLengths: { min: 4, max: 32 },
+  },
+  'eu-en': {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital', 'isPackstation'],
+      address2: ['isPobox', 'isEUSpecialCharacters', 'maxLength', 'isPackstation'],
+    },
+    addressLengths: { min: 3, max: 70 },
+  },
+  uk: {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital'],
+      address2: ['isPobox', 'isEUSpecialCharacters', 'maxLength'],
+    },
+    addressLengths: { min: 3, max: 35 },
+  },
+  'eu-de': {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital', 'isPackstation'],
+      address2: ['isPobox', 'isPackstation', 'isEUSpecialCharacters', 'maxLength'],
+    },
+    addressLengths: { min: 3, max: 35 },
+  },
+  ca: {
+    nameRules: ['isUSSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'maxLength'],
+      address2: ['isPobox', 'maxLength'],
+    },
+    addressLengths: { max: 35 },
+  },
+}
+
+// 城市规则配置
+const CITY_CONFIGS = {
+  uk: { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  'eu-en': { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  'eu-de': { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  ca: { rules: ['minLength', 'maxLength'], lengths: { min: 2, max: 15 } },
+}
+
+export const useAddressValidate = ({
+  address,
+  validatorInfo,
+  formData,
+  errorLabel,
+}: {
+  address: Record<string, any>
+  validatorInfo: any
+  formData: any
+  errorLabel: {
+    require: string
+    email: string
+  }
+}) => {
+  const { locale } = useRouter()
+  const [errors, setErrors] = useState<{ key: string; message: string }[]>([])
+
+  const addressRules: Rule[] = useMemo(() => {
+    const {
+      city_rules = {},
+      name_rules = {},
+      address1_rules,
+      address2_rules,
+      POboxErr,
+      packstationErr,
+    } = validatorInfo || {}
+
+    const localeConfig = LOCALE_CONFIGS[locale as keyof typeof LOCALE_CONFIGS]
+    const cityConfig = CITY_CONFIGS[locale as keyof typeof CITY_CONFIGS]
+
+    // 基础规则
+    const baseRules: Rule[] = [
+      // 表单字段规则
+      ...formData.map((item: any) => ({
+        key: item.key,
+        required: item.required,
+        error: errorLabel.require || 'This field is required',
+      })),
+
+      // 邮箱校验
+      {
+        key: 'email',
+        error: errorLabel.email || 'Invalid email format',
+        validator(value) {
+          return !emailValidate(value)
+        },
+      },
+
+      // 姓名规则
+      {
+        key: 'first_name',
+        required: true,
+        error: errorLabel.require || 'First name is required',
+      },
+      {
+        key: 'last_name',
+        required: true,
+        error: errorLabel.require || 'Last name is required',
+      },
+      {
+        key: 'name',
+        error: name_rules.maxLengthErr || errorLabel.require || 'Name is too long',
+        validator: value => value?.length >= 31,
+      },
+    ]
+
+    // 城市规则
+    const cityRules: Rule[] = cityConfig
+      ? cityConfig.rules.map(rule => {
+          const ruleConfig: Rule = { key: 'city', rule, error: '' }
+
+          if (rule === 'minLength') {
+            ruleConfig.params = { length: cityConfig.lengths.min }
+            ruleConfig.error = city_rules.minLengthErr || errorLabel.require || 'City is too short'
+          } else if (rule === 'maxLength') {
+            ruleConfig.params = { length: cityConfig.lengths.max }
+            ruleConfig.error = city_rules.maxLengthErr || errorLabel.require || 'City is too long'
+          } else if (rule === 'isEUSpecialCharacters') {
+            ruleConfig.error = city_rules.characterErr || errorLabel.require || 'Invalid characters in city'
+          }
+
+          return ruleConfig
+        })
+      : []
+
+    // 姓名特殊字符规则
+    const nameRules: Rule[] =
+      localeConfig?.nameRules
+        .map(rule => ({
+          key: 'first_name',
+          rule,
+          error: name_rules.characterErr,
+        }))
+        .concat(
+          localeConfig?.nameRules.map(rule => ({
+            key: 'last_name',
+            rule,
+            error: name_rules.characterErr,
+          })) || []
+        ) || []
+
+    // 地址规则
+    const addressRules: Rule[] = localeConfig
+      ? Object.entries(localeConfig.addressRules).flatMap(([addressKey, rules]) =>
+          rules.map(rule => {
+            const ruleConfig: Rule = { key: addressKey, rule, error: '' }
+            const rulesConfig = addressKey === 'address1' ? address1_rules : address2_rules
+
+            if (rule === 'isPobox') {
+              ruleConfig.error = POboxErr || errorLabel.require || 'PO Box not allowed'
+            } else if (rule === 'isPackstation') {
+              ruleConfig.error = packstationErr || errorLabel.require || 'Packstation not allowed'
+            } else if (rule === 'isUSSpecialCharacters' || rule === 'isEUSpecialCharacters') {
+              ruleConfig.error = rulesConfig?.characterErr || errorLabel.require || 'Invalid characters'
+            } else if (rule === 'minLength') {
+              ruleConfig.params = { length: 'min' in localeConfig.addressLengths ? localeConfig.addressLengths.min : 0 }
+              ruleConfig.error = rulesConfig?.minLengthErr || errorLabel.require || 'Address is too short'
+            } else if (rule === 'maxLength') {
+              ruleConfig.params = { length: localeConfig.addressLengths.max }
+              ruleConfig.error = rulesConfig?.maxLengthErr || errorLabel.require || 'Address is too long'
+            } else if (rule === 'isPureDigital') {
+              ruleConfig.error = rulesConfig?.pureDigitalErr || errorLabel.require || 'Address cannot be only numbers'
+            }
+
+            return ruleConfig
+          })
+        )
+      : []
+
+    return [...baseRules, ...cityRules, ...nameRules, ...addressRules]
+  }, [locale, validatorInfo, formData, errorLabel])
+
+  const validate = useCallback(
+    ({ force, ignoreKeys }: { force?: boolean; ignoreKeys?: string[] }) => {
+      let newErrors: { key: string; message: string }[] = []
+
+      addressRules.forEach(({ key, rule, params, required, error, validator }) => {
+        const defaultValidator = rule ? ruleValidators[rule] : undefined
+
+        let result
+
+        const value = address[key]
+
+        if (ignoreKeys?.includes(key)) {
+          return
+        }
+
+        if (value === undefined && !force) {
+          return
+        }
+
+        if (newErrors.find(item => item.key == key)) {
+          return
+        }
+
+        if (required && !value) {
+          result = error
+        } else if (validator) {
+          result = validator(value, key, address)
+        } else if (defaultValidator) {
+          result = defaultValidator(value, params)
+        }
+
+        if (result) {
+          newErrors.push({
+            key,
+            message: typeof result === 'string' ? result : error,
+          })
+        }
+      })
+
+      setErrors(newErrors)
+
+      if (newErrors.length) {
+        return true
+      }
+
+      return false
+    },
+    [address, addressRules]
+  )
+
+  return {
+    validate,
+    errors,
+  }
+}

package/src/components/credits/context/hooks/useAlpcFetch.ts

@@ -0,0 +1,295 @@
+import Cookies from 'js-cookie'
+import { useRouter } from 'next/router'
+import { useCallback, useRef, useState } from 'react'
+import useSWR, { type SWRConfiguration } from 'swr'
+
+import { getAlpcPath } from '../utils'
+import { useCreditsContext } from '../provider'
+
+interface UseAlpcFetchOptionsSwrOptions<TData, Error> extends SWRConfiguration<TData, Error> {
+  enable?: boolean
+}
+
+interface FetchOptions extends RequestInit {
+  queryKey: [string, Record<string, any>]
+  data?: Record<string, any>
+}
+
+interface MutationOptions extends RequestInit {
+  url: string
+  initData: Record<string, any>
+}
+
+interface FetcherOptions {
+  url: string
+  locale: string
+  fetchOptions: RequestInit
+  onReAuth: () => Promise<boolean>
+  onUnAuth: () => void
+}
+
+let reAuthPromise: Promise<boolean> | undefined
+
+type Fetcher<TData, TBody> = (url: string, data: { arg: TBody }) => Promise<TData>
+
+const fetcher = (options: FetcherOptions) => {
+  return fetch(getAlpcPath(options.locale) + options.url, options.fetchOptions).then(async response => {
+    if (response.status < 300) {
+      const responseData = await response.json()
+      return responseData.data
+    }
+
+    // 错误处理
+    if (response.status === 401) {
+      // 重新登录尝试
+      if (options.onReAuth) {
+        if (!reAuthPromise) {
+          reAuthPromise = options.onReAuth()
+        }
+
+        const result = await reAuthPromise
+
+        reAuthPromise = undefined
+
+        if (result) {
+          // 跨区重新登录后需要替换区域标志，所以不能用最开始请求的那个链接
+          return fetch(getAlpcPath(options.locale) + options.url, options.fetchOptions).then(async response => {
+            if (response.status < 300) {
+              const responseData = await response.json()
+              return responseData.data
+            }
+
+            if (response.status === 401) {
+              if (options.onUnAuth) {
+                options.onUnAuth()
+              }
+              return
+            }
+          })
+        } else {
+          if (options.onUnAuth) {
+            options.onUnAuth()
+          }
+          return
+        }
+      }
+    }
+  })
+}
+
+const reAuth = async (locale: string, retry: boolean) => {
+  let reloginResponse = await fetch(`${getAlpcPath(locale)}/cloud/login`, {
+    method: 'POST',
+  })
+  let reloginResponseData = await reloginResponse.json()
+
+  if (reloginResponse!.status < 300 && !retry) {
+    if (reloginResponseData?.data?.code === 27004) {
+      // 跨区登录错误
+      const alpcEUCookie = Cookies.get('alpcEU')
+
+      if (Number(alpcEUCookie) === 1) {
+        Cookies.set('alpcEU', '0', {
+          expires: 30,
+          domain: '.soundcore.com',
+        })
+      } else {
+        Cookies.set('alpcEU', '1', {
+          expires: 30,
+          domain: '.soundcore.com',
+        })
+      }
+
+      // 重新尝试换区登录
+      reloginResponse = await fetch(`${getAlpcPath(locale)}/cloud/login`, {
+        method: 'POST',
+      })
+      reloginResponseData = await reloginResponse.json()
+
+      if (reloginResponse.status > 300) {
+        return false
+      }
+    }
+  }
+  if (!reloginResponseData?.data?.code) {
+    // 重新登录成功
+    return true
+  }
+
+  return false
+}
+
+export interface UseMutationConfig<TData> {
+  onSuccess?: (response: TData) => any
+  onError?: (error: Error) => any
+}
+
+const useMutation = <TData, TBody>(
+  url: string,
+  fetcher: Fetcher<TData, TBody>,
+  mutationConfig: UseMutationConfig<TData> = {}
+) => {
+  const innerMutating = useRef<boolean>(false)
+
+  const [data, setData] = useState<TData>()
+  const [isMutating, setIsMutating] = useState(false)
+
+  const urlRef = useRef(url)
+  const fetcherRef = useRef(fetcher)
+  const configRef = useRef(mutationConfig)
+
+  const trigger = useCallback(
+    async (fetchData: TBody, opts: UseMutationConfig<TData> = {}) => {
+      if (innerMutating.current) {
+        return
+      }
+
+      innerMutating.current = true
+      setIsMutating(true)
+
+      const config = {
+        ...configRef.current,
+        ...opts,
+      }
+
+      const { onSuccess, onError } = config || {}
+
+      try {
+        const fetchResult = await fetcherRef.current(urlRef.current, {
+          arg: fetchData,
+        })
+        setData(fetchResult)
+
+        setIsMutating(false)
+        innerMutating.current = false
+
+        if (onSuccess) {
+          onSuccess(fetchResult)
+        }
+        return fetchResult
+      } catch (err: any) {
+        setIsMutating(false)
+        innerMutating.current = false
+
+        if (onError) {
+          onError(err)
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  return {
+    isMutating,
+    trigger,
+    data,
+  }
+}
+
+export const useAlpcFetch = <TData>(
+  options: FetchOptions,
+  swrOptions?: UseAlpcFetchOptionsSwrOptions<TData, Error>
+) => {
+  const [retry, setRetry] = useState(false)
+  const { removeProfile } = useCreditsContext()
+
+  const { enable, ...otherSwrOptions } = swrOptions || {}
+
+  const { locale = '' } = useRouter()
+
+  const { queryKey = [], body: fetchBody = {}, headers, ...fetchOptions } = options
+  const fetchEnable = enable ?? true
+
+  const [url, requestBody] = queryKey
+
+  const context = useSWR<TData>(
+    [url, requestBody],
+    !fetchEnable
+      ? null
+      : ([requestUrl, data]: [string, Record<string, any>]) =>
+          fetcher({
+            url: requestUrl,
+            locale,
+            fetchOptions: {
+              method: 'POST',
+              headers: {
+                'current-language': locale,
+                ...headers,
+              },
+              body: JSON.stringify({
+                ...fetchBody,
+                ...data,
+              }),
+              ...fetchOptions,
+            },
+            onReAuth: async () => {
+              const result = await reAuth(locale, retry)
+
+              if (result) {
+                setRetry(true)
+                return true
+              }
+
+              return false
+            },
+            onUnAuth() {
+              // 失败后退出登录
+              removeProfile()
+            },
+          }),
+    {
+      revalidateOnFocus: false,
+      ...otherSwrOptions,
+    }
+  )
+
+  return context
+}
+
+export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutationOptions?: UseMutationConfig<TData>) => {
+  const [retry, setRetry] = useState(false)
+  const { removeProfile } = useCreditsContext()
+
+  const { locale = '' } = useRouter()
+
+  const { url, initData, headers, ...fetchOptions } = options
+
+  const context = useMutation<TData, TBody>(
+    url,
+    (requestUrl, data: { arg: TBody }) =>
+      fetcher({
+        url: requestUrl,
+        locale,
+        fetchOptions: {
+          method: 'POST',
+          headers: {
+            'current-language': locale,
+            ...headers,
+          },
+          ...fetchOptions,
+          body: JSON.stringify({
+            ...initData,
+            ...data.arg,
+          }),
+        },
+        onReAuth: async () => {
+          const result = await reAuth(locale, retry)
+
+          if (result) {
+            setRetry(true)
+            return true
+          }
+
+          return false
+        },
+        onUnAuth() {
+          // 失败后退出登录
+          removeProfile()
+        },
+      }),
+    mutationOptions
+  )
+
+  return context
+}

package/src/components/credits/context/hooks/useClickOutside.ts

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react'
+
+function useClickOutside<T extends HTMLElement = HTMLElement>(
+  onClickOutside: (event: MouseEvent | TouchEvent) => void,
+): React.RefObject<T> {
+  const ref = useRef<T>(null)
+
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const el = ref?.current
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return
+      }
+
+      onClickOutside(event)
+    }
+
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+
+    // Reload only if onClickOutside changes
+  }, [onClickOutside, ref])
+
+  return ref
+}
+
+export default useClickOutside

package/src/components/credits/context/hooks/useCopy.ts

@@ -0,0 +1,35 @@
+import clipboard from 'copy-to-clipboard'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const useCopy = () => {
+  const copyTimer = useRef<any>()
+  const [copied, setCopied] = useState(false)
+
+  const copy = useCallback((val: string) => {
+    clipboard(val)
+
+    if (copyTimer.current) {
+      clearTimeout(copyTimer.current)
+    }
+
+    setCopied(true)
+    copyTimer.current = setTimeout(() => {
+      setCopied(false)
+    }, 2000)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (copyTimer.current) {
+        clearTimeout(copyTimer.current)
+      }
+    }
+  }, [])
+
+  return {
+    copy,
+    copied,
+  }
+}
+
+export default useCopy

package/src/components/credits/context/hooks/useCountries.ts

@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+import { type ShippingCountry, type ShippingZone } from '../../type'
+
+function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
+  const { locale = '' } = useRouter()
+
+  const [isLoading, setLoading] = useState(false)
+  const [countries, setCountries] = useState<ShippingCountry[]>([])
+
+  useEffect(() => {
+    const fetchCountries = async () => {
+      setLoading(true)
+      try {
+        const response = await fetch(`/api/multipass/rainbowbridge/uc/shop/shipping_zones?shop=${shopifyStoreDomain}`)
+        const res: any = await response.json()
+
+        // 国家过滤
+        let shipsToCountries: ShippingCountry[] = []
+        const countrySet = new Set()
+        res.data.data.forEach((shippingZoneItem: ShippingZone) => {
+          shippingZoneItem.countries.forEach(shippingZoneCountryItem => {
+            if (!countrySet.has(shippingZoneCountryItem.code)) {
+              countrySet.add(shippingZoneCountryItem.code)
+              shipsToCountries.push(shippingZoneCountryItem)
+            }
+          })
+        })
+
+        // 字母顺序排序
+        shipsToCountries = shipsToCountries.sort((a, b) => {
+          return a.code.localeCompare(b.code)
+        })
+
+        console.log('fetch shipsToCountries', shipsToCountries)
+        setCountries(shipsToCountries)
+      } catch (e) {
+        setCountries([])
+        console.error(e)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchCountries()
+  }, [locale])
+
+  return {
+    isLoading,
+    countries,
+  }
+}
+
+export default useCountries