@anker-in/campaign-ui 0.1.10 → 0.2.0

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

@@ -0,0 +1,295 @@
+import Cookies from 'js-cookie'
+import { useCallback, useRef, useState } from 'react'
+import useSWR, { type SWRConfiguration } from 'swr'
+import { useHeadlessContext } from '@anker-in/lib'
+
+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, brand: string) => {
+  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: `.${brand}.com`,
+        })
+      } else {
+        Cookies.set('alpcEU', '1', {
+          expires: 30,
+          domain: `.${brand}.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 = '', brand } = useHeadlessContext()
+
+  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, brand)
+
+              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 = '', brand } = useHeadlessContext()
+
+  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, brand)
+
+          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 { useEffect, useState } from 'react'
+
+import { useHeadlessContext } from '@anker-in/lib'
+import { type ShippingCountry, type ShippingZone } from '../../type'
+
+function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
+  const { locale = '' } = useHeadlessContext()
+
+  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

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

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+
+import { DTC_TASK_TYPE } from '../const'
+import useActivities from './useActivities'
+import { useCreditsContext } from '../provider'
+
+export const useFirstPurchaseFinished = () => {
+  const { taskIdToTypeMapping } = useCreditsContext()
+
+  const activitiesOptions = useMemo(() => ({ page: 1, pageSize: 50 }), [])
+  const { activities } = useActivities(activitiesOptions)
+
+  const firstPurchaseFinished = useMemo(() => {
+    return activities?.some(item => {
+      const firstPurchaseTaskId = Object.keys(taskIdToTypeMapping || {}).find(
+        type => taskIdToTypeMapping?.[type] === DTC_TASK_TYPE.FirstPurchase
+      )
+
+      return item.task_rule_id === Number(firstPurchaseTaskId)
+    })
+  }, [activities, taskIdToTypeMapping])
+
+  return firstPurchaseFinished
+}

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

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { ALPC_COUNTRY_MAP, AlpcConsumeType } from '../const'
+import { useAlpcMutation } from './useAlpcFetch'
+import type { RedeemLogResponse } from '../response'
+import { useCreditsContext } from '../provider'
+import { useHeadlessContext } from '@anker-in/lib'
+
+function useMyRewards({
+  page,
+  pageSize,
+  consumeType,
+}: {
+  page: number
+  pageSize: number
+  consumeType?: AlpcConsumeType
+}) {
+  const { isLoadingProfile, profile } = useCreditsContext()
+  const { brand, locale, appName } = useHeadlessContext()
+  const isLogin = !!profile
+
+  const [myRewards, setMyRewards] = useState<RedeemLogResponse[]>([])
+  const [total, setTotal] = useState(0)
+
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const { isMutating: isLoading, trigger } = useAlpcMutation<
+    { data: { redeem_logs: RedeemLogResponse[]; total: number } },
+    {
+      page: number
+      page_size: number
+      consume_type: AlpcConsumeType
+      user_id: string
+    }
+  >({
+    url: `/v1/credit/log/coupon`,
+    initData: {
+      brand: brand,
+      country: ALPC_COUNTRY_MAP.get(locale) || locale,
+      app_name: appName,
+    },
+  })
+
+  useEffect(() => {
+    if (isLoadingProfile || !profile || isLoading) {
+      return
+    }
+
+    if (page !== currentPage && page) {
+      trigger(
+        {
+          consume_type: consumeType || AlpcConsumeType.Coupon,
+          page,
+          page_size: pageSize,
+          user_id: profile?.user_id,
+        },
+        {
+          onSuccess(responseData) {
+            setCurrentPage(page)
+            setTotal(responseData?.data?.total)
+            setMyRewards(myRewards.concat(responseData?.data?.redeem_logs || []))
+          },
+        }
+      )
+    }
+  }, [trigger, myRewards, consumeType, page, pageSize, currentPage, profile, isLoadingProfile, isLoading])
+
+  const getMyRewards = useCallback(async () => {
+    if (isLoadingProfile || !isLogin || !profile || isLoading) {
+      return
+    }
+    await trigger(
+      {
+        consume_type: consumeType || AlpcConsumeType.Coupon,
+        page,
+        page_size: pageSize,
+        user_id: profile?.user_id,
+      },
+      {
+        // 仅支持1页的
+        onSuccess(responseData) {
+          setMyRewards(responseData?.data?.redeem_logs || [])
+        },
+      }
+    )
+  }, [consumeType, isLoading, isLoadingProfile, page, pageSize, profile, trigger])
+
+  return {
+    myRewards,
+    isLoading,
+    total,
+    getMyRewards,
+    canNext: total > myRewards.length && !isLoading,
+  }
+}
+
+export default useMyRewards

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

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+
+import useActivities from './useActivities'
+import { useCreditsContext } from '../provider'
+import { DTC_TASK_TYPE } from '../const'
+
+export const useReceiptUploaded = () => {
+  const { taskIdToTypeMapping } = useCreditsContext()
+  const activitiesOptions = useMemo(() => ({ page: 1, pageSize: 50 }), [])
+  const { activities } = useActivities(activitiesOptions)
+
+  const uploadedReceipt = useMemo(() => {
+    return activities?.some(item => {
+      const uploadReceiptTaskId = Object.keys(taskIdToTypeMapping || {}).find(
+        type => taskIdToTypeMapping?.[type] === DTC_TASK_TYPE.UploadReceipt
+      )
+      return item.task_rule_id === Number(uploadReceiptTaskId)
+    })
+  }, [activities, taskIdToTypeMapping])
+
+  return uploadedReceipt
+}
+
+export default useReceiptUploaded

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

@@ -0,0 +1,59 @@
+import useSWRMutation, { SWRMutationConfiguration } from 'swr/mutation'
+import { useRedeemCoupon } from './useRedeemCoupon'
+import type { ProductVariant } from '@anker-in/lib'
+import { useCreditsContext } from '../provider'
+import { useBuyNow } from '@anker-in/lib'
+import { AlpcErrorCode } from '../const'
+
+export const useRedeemAndBuy = (
+  _: any,
+  swrOptions?: SWRMutationConfiguration<undefined, Error, string, any> & {
+    throwOnError?: boolean
+  }
+) => {
+  const { trigger } = useRedeemCoupon()
+  const { profile } = useCreditsContext()
+
+  const { trigger: buyNow } = useBuyNow(
+    {},
+    {
+      throwOnError: true,
+    }
+  )
+
+  return useSWRMutation(
+    'redeemAndBuy',
+    async (
+      _,
+      {
+        arg,
+      }: {
+        arg: {
+          productVariant: ProductVariant
+          quantity?: number
+          redeemId: number
+        }
+      }
+    ) => {
+      const res = await trigger({
+        user_id: profile?.user_id,
+        rule_id: arg.redeemId,
+      })
+      console.log('res', res)
+      if (res && res?.data?.coupon_code) {
+        buyNow({
+          discountCodes: [res.data.coupon_code],
+          lineItems: [
+            {
+              variant: arg.productVariant,
+              quantity: arg.quantity || 1,
+            },
+          ],
+        })
+      } else {
+        throw new Error(`Redeem failed: ${res?.msg}`)
+      }
+    },
+    swrOptions
+  )
+}

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

@@ -0,0 +1,34 @@
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
+import { useHeadlessContext } from '@anker-in/lib'
+
+type RedeemCouponResponse = {
+  data: {
+    success: boolean
+    coupon_code: string
+  }
+  msg: string // 报错信息
+  code: number // 报错码
+}
+
+export const useRedeemCoupon = (mutationOptions: UseMutationConfig<RedeemCouponResponse> = {}) => {
+  const { locale, appName, brand } = useHeadlessContext()
+
+  return useAlpcMutation<
+    RedeemCouponResponse,
+    {
+      user_id?: string
+      rule_id: number
+    }
+  >(
+    {
+      url: `/v1/credit/redeem/coupon`,
+      initData: {
+        brand,
+        country: ALPC_COUNTRY_MAP.get(locale) || locale,
+        app_name: appName,
+      },
+    },
+    mutationOptions
+  )
+}

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

@@ -0,0 +1,34 @@
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
+import { useHeadlessContext } from '@anker-in/lib'
+
+type RedeemProductResponse = {
+  code: number
+  data: {
+    success: boolean
+  }
+}
+
+export const useRedeemProduct = (mutationOptions: UseMutationConfig<RedeemProductResponse> = {}) => {
+  const { storeDomain, locale, appName, brand } = useHeadlessContext()
+
+  return useAlpcMutation<
+    RedeemProductResponse,
+    {
+      rule_id: number
+      address: string
+    }
+  >(
+    {
+      url: `/v1/credit/exchange/goods`,
+      initData: {
+        quantity: 1,
+        brand,
+        country: (ALPC_COUNTRY_MAP.get(locale || '') || locale)?.toUpperCase(),
+        domain: storeDomain,
+        app_name: appName,
+      },
+    },
+    mutationOptions
+  )
+}