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

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 { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+function useMyRewards({
+  page,
+  pageSize,
+  consumeType,
+}: {
+  page: number
+  pageSize: number
+  consumeType?: AlpcConsumeType
+}) {
+  const { isLoadingProfile, profile } = useCreditsContext()
+  const { brand, locale, appName } = useShopifyContext()
+  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,60 @@
+import useSWRMutation from 'swr/mutation'
+import { useRedeemCoupon } from './useRedeemCoupon'
+import { useCreateCartMutation } from '../../../../shopify/hooks/useCreateCart'
+import type { ProductVariant } from '../../../../shopify/types/product'
+import { useCreditsContext } from '../provider'
+
+export const useRedeemAndBuy = () => {
+  const { trigger } = useRedeemCoupon()
+  const { profile } = useCreditsContext()
+
+  const { trigger: buyNow } = useCreateCartMutation()
+
+  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,
+      })
+      if (res && res?.data?.coupon_code) {
+        const cart = await buyNow({
+          discountCodes: [res.data.coupon_code],
+          lines: [
+            {
+              merchandiseId: String(arg.productVariant.id),
+              quantity: arg.quantity || 1,
+            },
+          ],
+        })
+        if (cart?.url) {
+          return {
+            success: true,
+            url: cart.url,
+          }
+        } else {
+          return {
+            success: false,
+            error: 'Create cart failed',
+          }
+        }
+      } else {
+        return {
+          success: false,
+          error: 'Redeem failed',
+        }
+      }
+    }
+  )
+}

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

@@ -0,0 +1,33 @@
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+type RedeemCouponResponse = {
+  code: number
+  data: {
+    success: boolean
+    coupon_code: string
+  }
+}
+
+export const useRedeemCoupon = (mutationOptions: UseMutationConfig<RedeemCouponResponse> = {}) => {
+  const { locale, appName, brand } = useShopifyContext()
+
+  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 { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+type RedeemProductResponse = {
+  code: number
+  data: {
+    success: boolean
+  }
+}
+
+export const useRedeemProduct = (mutationOptions: UseMutationConfig<RedeemProductResponse> = {}) => {
+  const { storeDomain, locale, appName, brand } = useShopifyContext()
+
+  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
+  )
+}

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

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useAlpcMutation } from './useAlpcFetch'
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useCreditsContext } from '../provider'
+import type { ConsumeCreditRuleResponse } from '../response'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+function useRedeemableList() {
+  let locale = '' as string
+  const { profile, isLoadingProfile } = useCreditsContext()
+  const { locale: contextLocale, brand } = useShopifyContext()
+
+  if (contextLocale === 'pl') {
+    locale = 'eu'
+  } else {
+    locale = contextLocale
+  }
+
+  const [redeemableList, setRedeemableList] = useState<ConsumeCreditRuleResponse[]>([])
+  const { isMutating: listLoading, trigger } = useAlpcMutation<
+    {
+      data: { consume_credit_rules: ConsumeCreditRuleResponse[] }
+    },
+    { user_id?: string }
+  >({
+    url: `/v1/credit/consume_credit_rules`,
+    initData: {
+      brand,
+      page: 1,
+      page_size: 20,
+      country: (ALPC_COUNTRY_MAP.get(locale) || locale)?.toUpperCase(),
+      task_target: 1, // 1: 'app', 2: 'website'
+    },
+  })
+
+  const getRedeemableList = useCallback(() => {
+    const cacheName = `consume_credit_rules-${locale}`
+
+    const cacheStr = localStorage?.getItem(cacheName)
+    if (cacheStr) {
+      try {
+        const cache = JSON.parse(cacheStr)
+        if (cache.expire > Date.now() && cache.consume_credit_rules.length) {
+          // 缓存未过期
+          setRedeemableList(cache.consume_credit_rules)
+          return
+        }
+      } catch (e) {}
+      localStorage?.removeItem(cacheName)
+    }
+    trigger(
+      {
+        user_id: profile?.user_id,
+      },
+      {
+        onSuccess(responseData) {
+          let list = responseData.data.consume_credit_rules || []
+          let cList = list.filter(i => i.consume_type == 1) || []
+          let pList = list.filter(i => i.consume_type == 2) || []
+          cList = cList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          pList = pList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          const resultList = cList.concat(pList)
+          setRedeemableList(resultList)
+
+          localStorage?.setItem(
+            `consume_credit_rules-${locale}`,
+            JSON.stringify({
+              expire: Date.now() + 10 * 60 * 1000,
+              consume_credit_rules: resultList,
+            })
+          )
+        },
+      }
+    )
+  }, [profile, trigger, locale])
+
+  useEffect(() => {
+    if (!isLoadingProfile) {
+      getRedeemableList()
+    }
+  }, [getRedeemableList, isLoadingProfile])
+
+  return {
+    listLoading,
+    redeemableList,
+    getRedeemableList,
+  }
+}
+
+export default useRedeemableList

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

@@ -0,0 +1,20 @@
+import fetcher from '../../../../helpers/fetcher'
+import useSWRMutation from 'swr/mutation'
+import { useCreditsContext } from '../provider'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+export function useSendEmailValidation() {
+  const { profile } = useCreditsContext()
+  const { appName, locale } = useShopifyContext()
+
+  return useSWRMutation('send-email-validation', () =>
+    fetcher({
+      locale,
+      url: '/api/multipass/account/users/send_validation_email',
+      method: 'POST',
+      body: { email: profile?.email, app: appName },
+      needRecaptcha: true,
+      action: 'verifyAccount',
+    })
+  )
+}

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+
+import { TaskSubType } from '../const'
+import useActivities from './useActivities'
+import useSubscriptions from './useSubscriptions'
+import { useCreditsContext } from '../provider'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+export const useSubscribed = () => {
+  const { profile } = useCreditsContext()
+  const { brand } = useShopifyContext()
+
+  const activitiesOptions = useMemo(() => ({ page: 1, pageSize: 50 }), [])
+
+  const { activities } = useActivities(activitiesOptions)
+  const { subscriptionData } = useSubscriptions(profile?.email)
+
+  const isSubscribed = useMemo(() => {
+    if (!subscriptionData?.preference) {
+      return false
+    }
+
+    const subscribeResult = subscriptionData.preference.some(item => {
+      return item.brand === brand && item.subscribe
+    })
+
+    if (subscribeResult) {
+      return true
+    }
+
+    return activities?.some(item => {
+      return item.task_sub_type === TaskSubType.Subscription
+    })
+  }, [subscriptionData, activities])
+
+  return isSubscribed
+}

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

@@ -0,0 +1,54 @@
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Subscription } from '../../type'
+import fetcher from '../../../../helpers/fetcher'
+
+function useSubscriptions(email?: string) {
+  const loading = useRef(false)
+  const [subscriptionData, setSubscriptionData] = useState<Subscription>()
+  const { locale } = useRouter()
+
+  const fetchSubscription = useCallback(async () => {
+    if (!email) {
+      return
+    }
+
+    if (loading.current) {
+      return
+    }
+
+    loading.current = true
+
+    try {
+      const response = await fetcher({
+        method: 'GET',
+        url: '/api/multipass/account/subscriptions',
+        body: {
+          email,
+        },
+        action: 'login',
+        locale,
+        headers: {},
+        type: '',
+      })
+
+      if (response) {
+        setSubscriptionData(response)
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.current = false
+    }
+  }, [email, locale, loading])
+
+  useEffect(() => {
+    fetchSubscription()
+  }, [fetchSubscription])
+
+  return {
+    subscriptionData,
+  }
+}
+
+export default useSubscriptions

package/src/components/credits/context/hooks/useUploadReceipt.tsx

@@ -0,0 +1,30 @@
+import useSWRMutation from 'swr/mutation'
+
+export const uploadReceipt = async (
+  _: any,
+  { arg: { orderName } }: { arg: { orderName: string } }
+): Promise<{
+  ok: boolean
+  code: number
+}> => {
+  const response = await fetch(`/api/multipass/mktsrv/v1/credit/upload_third_party_order`, {
+    credentials: 'include',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      order_name: orderName,
+    }),
+  })
+  const { data } = await response.json()
+  console.log('data', data)
+  return {
+    ok: data?.code === 0,
+    code: data?.code,
+  }
+}
+
+export const useUploadReceipt = () => {
+  return useSWRMutation('/api/multipass/mktsrv/v1/credit/upload_third_party_order', uploadReceipt)
+}

package/src/components/credits/context/provider.tsx

@@ -0,0 +1,86 @@
+import React, { createContext, useContext } from 'react'
+import type { DTC_TASK_TYPE } from './const'
+import type { CreditInfoResponse } from './response'
+
+export const CreditsContext = createContext<{
+  profile: any
+  isLoadingProfile: boolean
+  removeProfile: () => void
+  taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+  openSignInPopup: () => void
+  openSignUpPopup: () => void
+  creditInfo?: CreditInfoResponse
+  customer?: any
+  customerLoading: boolean
+  fetchCreditInfo: (user_id: string) => void
+  gtm: {
+    pageGroup: string
+  }
+}>({
+  profile: null,
+  isLoadingProfile: false,
+  taskIdToTypeMapping: {},
+  removeProfile: () => {},
+  openSignInPopup: () => {},
+  openSignUpPopup: () => {},
+  creditInfo: undefined,
+  customerLoading: false,
+  fetchCreditInfo: (user_id: string) => {},
+  gtm: {
+    pageGroup: '',
+  },
+})
+
+export function CreditsProvider({
+  children,
+  profile,
+  removeProfile,
+  isLoadingProfile,
+  openSignInPopup,
+  openSignUpPopup,
+  taskIdToTypeMapping,
+  creditInfo,
+  customer,
+  customerLoading,
+  fetchCreditInfo,
+  gtm,
+}: {
+  children: React.ReactNode
+  profile: any
+  removeProfile: () => void
+  isLoadingProfile: boolean
+  openSignInPopup: () => void
+  openSignUpPopup: () => void
+  taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+  creditInfo?: CreditInfoResponse
+  customer: any
+  fetchCreditInfo: (user_id: string) => void
+  customerLoading: boolean
+  gtm: {
+    pageGroup: string
+  }
+}) {
+  return (
+    <CreditsContext.Provider
+      value={{
+        profile,
+        isLoadingProfile,
+        removeProfile,
+        openSignInPopup,
+        openSignUpPopup,
+        taskIdToTypeMapping,
+        creditInfo,
+        fetchCreditInfo,
+        customer,
+        customerLoading,
+        gtm,
+      }}
+    >
+      {children}
+    </CreditsContext.Provider>
+  )
+}
+
+export function useCreditsContext() {
+  return useContext(CreditsContext)
+}

package/src/components/credits/context/response.ts

@@ -0,0 +1,72 @@
+import { ApprovalStatus, AlpcConsumeType, CreditType, TaskSubType, TaskType } from './const'
+
+// ALPC服务响应数据类型
+
+interface BaseResponse {
+  brand: string
+}
+
+export interface Task extends BaseResponse {
+  goods_sku?: string
+  task_type: TaskType
+  task_sub_type: TaskSubType
+  task_rule_id: number
+  task_name: string
+  task_note: string
+  app_name: string
+}
+
+// 积分流水
+export interface CreditLogResponse extends Task {
+  credit: number
+  task_name: string
+  create_time: number
+  credit_type: CreditType
+  pending_time: number
+  status: number
+  expired_time?: number
+}
+
+export interface ConsumeCreditRuleResponse extends BaseResponse {
+  id: number
+  name: string
+  note: string
+  consume_credits: number
+  consume_type: AlpcConsumeType
+  coupon_rule: string
+  remaining_inventory: number
+  is_limited: number
+  sku_handle: string
+  goods_sku: string
+  goods_url: string
+  extra?: string // discount, type
+}
+
+export interface RedeemLogResponse extends BaseResponse {
+  goods_title: string
+  coupon_code: string
+  order_number: string
+  create_time: number
+  consume_credits: number
+  fulfillment_status: string
+  approval_status: ApprovalStatus
+  rule_id: number
+  code_status: number
+}
+
+export interface CreditTaskResponse extends Task {
+  status: number
+  is_enable: number
+  id: number
+  weight: number
+  reward_type: number
+}
+
+export interface CreditInfoResponse extends BaseResponse {
+  total_credit: number
+  available_credit: number
+  pending_credit: number
+  expired_credit: number
+  cancel_credit: number
+  consumed_credit: number
+}