@anker-in/campaign-ui 0.1.10 → 0.2.0-beta.2

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,57 @@
+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'
+
+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,
+      })
+      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
+  )
+}

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

@@ -0,0 +1,77 @@
+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 { useHeadlessContext } from '@anker-in/lib'
+
+function useRedeemableList() {
+  let locale = '' as string
+  const { profile, isLoadingProfile } = useCreditsContext()
+  const { locale: contextLocale, brand } = useHeadlessContext()
+
+  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(() => {
+    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/useSubscribed.ts

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

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

@@ -0,0 +1,29 @@
+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()
+  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,85 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react'
+import type { DTC_TASK_TYPE } from './const'
+import type { CreditInfoResponse } from './response'
+import { AuthCodeActivate, useRegistration } from '../../registration'
+import { CreditsPageCommon } from '../type'
+
+type Context = {
+  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
+  }
+  pageCommon: CreditsPageCommon
+}
+
+export const CreditsContext = createContext<Context>({
+  profile: null,
+  isLoadingProfile: false,
+  taskIdToTypeMapping: {},
+  removeProfile: () => {},
+  openSignInPopup: () => {},
+  openSignUpPopup: () => {},
+  creditInfo: undefined,
+  customerLoading: false,
+  fetchCreditInfo: (user_id: string) => {},
+  gtm: {
+    pageGroup: '',
+  },
+  pageCommon: {},
+})
+
+export function CreditsProvider({
+  children,
+  profile,
+  removeProfile,
+  isLoadingProfile,
+  openSignInPopup,
+  openSignUpPopup,
+  taskIdToTypeMapping,
+  creditInfo,
+  customer,
+  customerLoading,
+  fetchCreditInfo,
+  gtm,
+  pageCommon,
+}: PropsWithChildren<Context>) {
+  const { copy } = useRegistration()
+  return (
+    <CreditsContext.Provider
+      value={{
+        profile,
+        isLoadingProfile,
+        removeProfile,
+        openSignInPopup,
+        openSignUpPopup,
+        taskIdToTypeMapping,
+        creditInfo,
+        fetchCreditInfo,
+        customer,
+        customerLoading,
+        gtm,
+        pageCommon,
+      }}
+    >
+      {children}
+      {copy?.authCodeActivate && <AuthCodeActivate copy={copy.authCodeActivate} autoSendEmail />}
+    </CreditsContext.Provider>
+  )
+}
+
+export function useCreditsContext() {
+  const context = useContext(CreditsContext)
+  if (!context) {
+    throw new Error('useCreditsContext must be used within a CreditsProvider')
+  }
+  return context
+}

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
+}