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

package/src/components/credits/creditsWaysToGetCredits/type.ts

@@ -0,0 +1,53 @@
+import type { ReceiptCopy } from '../modal/creditsUploadReceiptModal'
+import type { CreditsSubscribeModalCopy } from '../modal/subscribeModal'
+
+export type BenefitItem = {
+  title: string
+  credits: string
+  id: string
+}
+
+export type CreditsWaysToGetCreditsCopy = {
+  title: string
+  subtitle: string
+  equalCredits: string
+  musicIcon: string
+  list: BenefitItem[]
+  mainImage: {
+    url: string
+    alt: string
+  }
+  joinNow: string
+  activate: string
+  completed: string
+  completeProfile: string
+  makeFirstPurchase: string
+  goShopLink: string
+  uploadReceipt: string
+  shopNow: string
+  subscribeLabel: string
+  sendEmailSuccess: string
+  creditsIcon: {
+    url: string
+    alt: string
+  }
+  receipt: ReceiptCopy
+  subscribe: CreditsSubscribeModalCopy
+}
+
+export enum TaskType {
+  Activate = 'activate',
+  Subscribe = 'subscribe',
+  CompleteProfile = 'completeProfile',
+  FirstPurchase = 'firstPurchase',
+  UploadReceipt = 'uploadReceipt',
+  Shop = 'shop',
+}
+
+export type CreditsWaysToGetCreditsProps = {
+  copy: CreditsWaysToGetCreditsCopy
+  classNames?: {
+    equalCreditsText?: string
+    subtitle?: string
+  }
+}

package/src/components/credits/creditsWaysToGetCredits/useActions.ts

@@ -0,0 +1,231 @@
+import { useHeadlessContext, gaTrack } from '@anker-in/lib'
+
+import { TaskType } from './type'
+import { useCreditsContext } from '../context/provider'
+import { useMemo } from 'react'
+import useReceiptUploaded from '../context/hooks/useReceiptUploaded'
+import { useFirstPurchaseFinished } from '../context/hooks/useFirstPurchaseFinished'
+import { useSubscribed } from '../context/hooks/useSubscribed'
+import type { CreditsWaysToGetCreditsCopy } from './type'
+
+import { useRegistration } from '../../registration'
+
+export const useActions = ({
+  copy,
+  subscribe,
+  uploadReceipt,
+  gaParameters,
+}: {
+  copy: CreditsWaysToGetCreditsCopy
+  subscribe: {
+    openSubscribePopup: () => void
+    isSuccess: boolean
+  }
+  uploadReceipt: {
+    openUploadReceiptPopup: () => void
+    isSuccess: boolean
+  }
+  gaParameters?: {
+    position: string
+  }
+}) => {
+  const { openSignUpPopup, gtm, profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const isSubscribed = useSubscribed()
+  const firstPurchaseFinished = useFirstPurchaseFinished()
+  const uploadedReceipt = useReceiptUploaded()
+  const { appName, passportUrl } = useHeadlessContext()
+
+  const profileCompleted = useMemo(() => {
+    return (profile?.first_name || profile?.last_name) && profile?.phone_number && profile?.dob
+  }, [profile])
+
+  return useMemo(() => {
+    const handleClickWithTrack = ({
+      buttonName,
+      id,
+      callback,
+    }: {
+      buttonName: string
+      id?: string
+      callback: () => void
+    }) => {
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        member_active_status: profile?.activated ? 'active' : 'not active',
+        event_parameters: {
+          page_group: gtm.pageGroup,
+          position: gaParameters?.position || copy.title,
+          button_name: buttonName,
+          info: id,
+        },
+      })
+      callback()
+    }
+    return {
+      actions: {
+        [TaskType.Activate]: {
+          finished: profile?.activated,
+          notLogin: {
+            buttonLabel: copy?.joinNow,
+            handleClick: () =>
+              handleClickWithTrack({ buttonName: copy?.joinNow, callback: openSignUpPopup, id: TaskType.Activate }),
+          },
+          notFinished: {
+            buttonLabel: copy?.activate,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.activate,
+                callback: () => {
+                  authCodeActivate.setAutoSendEmail(true)
+                  authCodeActivate.open()
+                },
+                id: TaskType.Activate,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+        [TaskType.Subscribe]: {
+          finished: isSubscribed,
+          notLogin: {
+            buttonLabel: copy?.joinNow,
+            handleClick: () =>
+              handleClickWithTrack({ buttonName: copy?.joinNow, callback: openSignUpPopup, id: TaskType.Subscribe }),
+          },
+          notFinished: {
+            buttonLabel: copy?.subscribeLabel,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.subscribeLabel,
+                callback: () => subscribe.openSubscribePopup(),
+                id: TaskType.Subscribe,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+        [TaskType.CompleteProfile]: {
+          finished: profileCompleted,
+          notLogin: {
+            buttonLabel: copy?.joinNow,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.joinNow,
+                callback: openSignUpPopup,
+                id: TaskType.CompleteProfile,
+              }),
+          },
+          notFinished: {
+            buttonLabel: copy?.completeProfile,
+            link: `${passportUrl}/account/profile?app=${appName}`,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.completeProfile,
+                callback: () => {},
+                id: TaskType.CompleteProfile,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+        [TaskType.FirstPurchase]: {
+          finished: firstPurchaseFinished,
+          notLogin: {
+            buttonLabel: copy?.makeFirstPurchase,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.makeFirstPurchase,
+                callback: openSignUpPopup,
+                id: TaskType.FirstPurchase,
+              }),
+          },
+          notFinished: {
+            buttonLabel: copy?.makeFirstPurchase,
+            link: copy?.goShopLink,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.makeFirstPurchase,
+                callback: () => {},
+                id: TaskType.FirstPurchase,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+        [TaskType.UploadReceipt]: {
+          finished: uploadedReceipt,
+          notLogin: {
+            buttonLabel: copy?.joinNow,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.joinNow,
+                callback: openSignUpPopup,
+                id: TaskType.UploadReceipt,
+              }),
+          },
+          notFinished: {
+            buttonLabel: copy?.uploadReceipt,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.uploadReceipt,
+                callback: () => uploadReceipt.openUploadReceiptPopup(),
+                id: TaskType.UploadReceipt,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+        [TaskType.Shop]: {
+          finished: false,
+          notLogin: {
+            buttonLabel: copy?.joinNow,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.joinNow,
+                callback: openSignUpPopup,
+                id: TaskType.Shop,
+              }),
+          },
+          notFinished: {
+            buttonLabel: copy?.shopNow,
+            link: copy?.goShopLink,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.shopNow,
+                callback: () => {},
+                id: TaskType.Shop,
+              }),
+          },
+          completed: {
+            buttonLabel: copy?.completed,
+          },
+        },
+      },
+    }
+  }, [
+    profile?.activated,
+    copy?.joinNow,
+    copy?.activate,
+    copy?.completed,
+    copy?.subscribe,
+    copy?.completeProfile,
+    copy?.makeFirstPurchase,
+    copy?.uploadReceipt,
+    copy?.shopNow,
+    copy.title,
+    copy?.goShopLink,
+    isSubscribed,
+    profileCompleted,
+    firstPurchaseFinished,
+    uploadedReceipt,
+    gaParameters?.position,
+    openSignUpPopup,
+  ])
+}

package/src/components/credits/index.ts

@@ -0,0 +1,11 @@
+export { CreditsProvider, useCreditsContext } from './context/provider'
+
+export { useUploadReceipt as useCreditsUploadReceipt } from './context/hooks/useUploadReceipt'
+export { CreditsUploadReceiptModal } from './modal/creditsUploadReceiptModal'
+export { CreditsBanner } from './creditsBanner'
+export { CreditsBenefits } from './creditsBenefits'
+export { CreditsInfoCard } from './creditsInfoCard'
+export { CreditsWaysToGetCredits } from './creditsWaysToGetCredits'
+export { CreditsFaq } from './creditsFaq'
+export { CreditsCash } from './creditsCash'
+export { CreditsRedeemList } from './creditsRedeemList'

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -0,0 +1,329 @@
+import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import clipboard from 'copy-to-clipboard'
+import dayjs from 'dayjs'
+import { useCallback, useMemo, useState } from 'react'
+
+import { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import Tip from './tip'
+import LoadingDots from './loadingDots'
+import useMyRewards from '../context/hooks/useMyRewards'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+
+export interface MyRewardsMetafields {
+  title: string
+  orderNumberLabel: string
+  valueLabel: string
+  receivedLabel: string
+  failedLabel: string
+  approveSuccessLabel: string
+  couponTab: string
+  productTab: string
+  pendingLabel: string
+  unfulfilledLabel: string
+  fulfilledLabel: string
+  confirmedTip: string
+  pendingTip: string
+  processingTip: string
+  ShippedTip: string
+  emptyListLabel: string
+  pointUnit: string
+  code: string
+  copied: string
+  copy: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
+}
+interface MyRewardsModalProps extends ModalContainerProps {
+  data: MyRewardsMetafields
+}
+
+function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
+  const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const [couponPage, setCouponPage] = useState(1)
+  const [productPage, setProductPage] = useState(1)
+  const [copied, setCopied] = useState(-1)
+
+  const tabs = useMemo(() => {
+    const availableTabs: { title: string; type: number }[] = []
+
+    if (data.couponTab) {
+      availableTabs.push({
+        title: data.couponTab,
+        type: AlpcConsumeType.Coupon,
+      })
+    }
+
+    if (data.productTab) {
+      availableTabs.push({
+        title: data.productTab,
+        type: AlpcConsumeType.Product,
+      })
+    }
+
+    return availableTabs
+  }, [data.couponTab, data.productTab])
+
+  const myProductRewardsOptions = useMemo(() => {
+    return {
+      page: props.isOpen ? productPage : 0,
+      pageSize: 1000,
+      consumeType: AlpcConsumeType.Product,
+    }
+  }, [props.isOpen, productPage])
+  const myCouponRewardsOptions = useMemo(() => {
+    return {
+      page: props.isOpen ? couponPage : 0,
+      pageSize: 1000,
+      consumeType: AlpcConsumeType.Coupon,
+    }
+  }, [props.isOpen, couponPage])
+
+  const {
+    myRewards: myCouponRewards = [],
+    canNext: couponCanNext,
+    isLoading: couponIsLoading,
+  } = useMyRewards(myCouponRewardsOptions)
+  const {
+    myRewards: myProductRewards = [],
+    canNext: productCanNext,
+    isLoading: productIsLoading,
+  } = useMyRewards(myProductRewardsOptions)
+
+  const list = useMemo(() => {
+    if (activeTab === AlpcConsumeType.Coupon) {
+      return myCouponRewards.map(item => ({
+        title: item.goods_title,
+        value: item.consume_credits,
+        type: RewardType.Received,
+        date: new Date(item.create_time * 1000),
+        couponCode: item.coupon_code,
+        orderNumber: '',
+      }))
+    }
+
+    if (activeTab === AlpcConsumeType.Product) {
+      return myProductRewards.map(item => {
+        let type = RewardType.Pending
+
+        if (item.fulfillment_status && item.fulfillment_status !== 'null') {
+          // 物流状态
+          if (item.fulfillment_status === 'fulfilled') {
+            type = RewardType.Fulfilled
+          } else {
+            type = RewardType.Unfulfilled
+          }
+        } else {
+          if (
+            item.approval_status === ApprovalStatus.Success ||
+            item.approval_status === ApprovalStatus.DoubleConfirm
+          ) {
+            type = RewardType.ApproveSuccess
+          } else if (item.approval_status === ApprovalStatus.Failed) {
+            type = RewardType.Failed
+          }
+        }
+
+        return {
+          title: item.goods_title,
+          value: item.consume_credits,
+          type,
+          date: new Date(item.create_time * 1000),
+          orderNumber: item.order_number,
+          couponCode: '',
+        }
+      })
+    }
+
+    return []
+  }, [activeTab, myProductRewards, myCouponRewards])
+
+  const canNext = useMemo(() => {
+    if (activeTab === AlpcConsumeType.Coupon) {
+      return couponCanNext
+    }
+
+    if (activeTab === AlpcConsumeType.Product) {
+      return productCanNext
+    }
+
+    return false
+  }, [activeTab, couponCanNext, productCanNext])
+
+  const TypeMap = useMemo(() => {
+    return {
+      [RewardType.Received]: data.receivedLabel,
+      [RewardType.Pending]: data.pendingLabel,
+      [RewardType.ApproveFail]: data.failedLabel,
+      [RewardType.ApproveSuccess]: data.approveSuccessLabel,
+      [RewardType.Unfulfilled]: data.unfulfilledLabel,
+      [RewardType.Fulfilled]: data.fulfilledLabel,
+      [RewardType.Failed]: data.failedLabel,
+    }
+  }, [data])
+
+  const TipMap = useMemo(() => {
+    return {
+      [RewardType.Received]: '',
+      [RewardType.Pending]: data.pendingTip,
+      [RewardType.ApproveFail]: '',
+      [RewardType.ApproveSuccess]: data.confirmedTip,
+      [RewardType.Unfulfilled]: data.processingTip,
+      [RewardType.Fulfilled]: data.ShippedTip,
+      [RewardType.Failed]: '',
+    }
+  }, [data])
+
+  const ColorMap = useMemo(() => {
+    return {
+      [RewardType.Received]: '#52C41A',
+      [RewardType.Pending]: '#999',
+      [RewardType.ApproveFail]: '#F84D4F',
+      [RewardType.ApproveSuccess]: '#999',
+      [RewardType.Unfulfilled]: '#999',
+      [RewardType.Fulfilled]: '#999',
+      [RewardType.Failed]: '#F84D4F',
+    }
+  }, [])
+
+  const handleScrollEnd = useCallback(() => {
+    if (!canNext) {
+      return
+    }
+
+    if (activeTab === AlpcConsumeType.Coupon) {
+      setCouponPage(couponPage + 1)
+    } else if (activeTab === AlpcConsumeType.Product) {
+      setProductPage(productPage + 1)
+    }
+  }, [activeTab, productPage, couponPage, canNext])
+
+  const handleCopy = useCallback((code: string, idx: number) => {
+    setCopied(idx)
+    clipboard(code)
+    setTimeout(() => {
+      setCopied(-1)
+    }, 2000)
+  }, [])
+
+  const isLoading = activeTab === AlpcConsumeType.Coupon ? couponIsLoading : productIsLoading
+
+  return (
+    <CreditsModalContainer
+      title={data.title}
+      className={classNames('h-[800px] w-[640px]')}
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      scrollClassName="md:mb-0"
+      {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <div className="">
+        <Tabs
+          align="left"
+          shape={rounded ? 'rounded' : 'square'}
+          value={activeTab.toString()}
+          onValueChange={value => {
+            setActiveTab(Number(value))
+          }}
+        >
+          <TabsList>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.type} value={tab.type.toString()}>
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {isLoading && (
+        <div className="flex h-full flex-col items-center justify-center">
+          <LoadingDots />
+        </div>
+      )}
+
+      {!isLoading && (
+        <div className="mt-[24px] overflow-auto overscroll-contain">
+          {list.length > 0 ? (
+            <div className="grid gap-[18px] md:gap-[12px]">
+              {list.map((item, index) => (
+                <div key={index} className="grid gap-[8px]">
+                  {item?.orderNumber && (
+                    <div className="text-[15px] font-semibold leading-[1.4] text-[#777]">
+                      {data.orderNumberLabel}: {item.orderNumber}
+                    </div>
+                  )}
+                  <div
+                    className={classNames(
+                      'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',
+                      !rounded && 'rounded-none'
+                    )}
+                  >
+                    <div className="grid gap-[4px]">
+                      <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {data.valueLabel}: {item.value} {data?.pointUnit}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
+                        {item?.couponCode && (
+                          <span
+                            className="cursor-pointer text-[14px] font-semibold text-brand underline"
+                            onClick={() => {
+                              handleCopy(item.couponCode, index)
+                            }}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault()
+                              }
+                            }}
+                          >
+                            {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="grid gap-[4px] text-right">
+                      <div
+                        className={classNames(
+                          'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
+                          `text-[${ColorMap[item.type]}]`
+                        )}
+                      >
+                        <span>{TypeMap[item.type]}</span>
+                        {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center">
+              <Picture
+                className="mb-[12px] w-[160px]"
+                source={data?.emptyListImage?.url}
+                alt={data?.emptyListImage?.alt || 'empty list image'}
+              ></Picture>
+              <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
+            </div>
+          )}
+        </div>
+      )}
+    </CreditsModalContainer>
+  )
+}
+
+export default MyRewardsModal