@anker-in/campaign-ui 0.1.10 → 0.2.0

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

@@ -0,0 +1,321 @@
+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'
+
+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 [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"
+          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="flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]">
+                    <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

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

@@ -0,0 +1,258 @@
+import { useCallback, useMemo, useState } from 'react'
+import { useCreditsContext } from '../context/provider'
+import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'
+import useActivities from '../context/hooks/useActivities'
+import type { Task } from '../context/response'
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { cn } from '../../../helpers/utils'
+import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import LoadingDots from './loadingDots'
+import { Picture, Text } from '@anker-in/headless-ui'
+import dayjs from 'dayjs'
+
+export interface MyActivitiesMetafields {
+  title: string
+  tips: string
+  allTab: string
+  earnedTab: string
+  deductedTab: string
+  expiredTab: string
+  activationTask: string
+  updateNameTask: string
+  updatePhoneTask: string
+  updateBirthdayTask: string
+  updateAppNameTask: string
+  subscriptionTask: string
+  refundTask: string
+  productUnApprovedTask: string
+  pendingTips?: string
+  pendingTips2?: string
+  firstPurchaseTask: string
+  uploadReceiptTask: string
+  shoppingTask: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
+  emptyListLabel: string
+}
+
+interface ActivitiesModalProps extends ModalContainerProps {
+  data: MyActivitiesMetafields
+}
+
+function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
+  const [page, setPage] = useState(1)
+  const { taskIdToTypeMapping } = useCreditsContext()
+
+  const myActivitiesOptions = useMemo(() => {
+    return {
+      page: props.isOpen ? page : 0,
+      pageSize: 1000,
+    }
+  }, [props.isOpen, page])
+
+  const [activeTab, setActiveTab] = useState(CreditType.All)
+  const tabs = useMemo(() => {
+    const tabs = [
+      {
+        title: data.allTab,
+        type: CreditType.All,
+      },
+      {
+        title: data.earnedTab,
+        type: CreditType.Earned,
+      },
+      {
+        title: data.deductedTab,
+        type: CreditType.Deducted,
+      },
+    ]
+    if (data.expiredTab) {
+      tabs.push({
+        title: data.expiredTab,
+        type: CreditType.Expired,
+      })
+    }
+    return tabs
+  }, [data])
+
+  const { activities = [], canNext, isLoading } = useActivities(myActivitiesOptions)
+
+  const list = useMemo(() => {
+    const taskNameMap = {
+      [TaskSubType.Activation]: data.activationTask,
+      [TaskSubType.UpdateName]: data.updateNameTask,
+      [TaskSubType.UpdatePhone]: data.updatePhoneTask,
+      [TaskSubType.UpdateBirthday]: data.updateBirthdayTask,
+      [TaskSubType.Subscription]: data.subscriptionTask,
+      [TaskSubType.UpadteAppName]: data.updateAppNameTask,
+      [TaskSubType.Refund]: data.refundTask,
+      [TaskSubType.ProductUnApproved]: data.productUnApprovedTask,
+    }
+    const dtcTaskTypeToNameMap = {
+      [DTC_TASK_TYPE.FirstPurchase]: data.firstPurchaseTask,
+      [DTC_TASK_TYPE.UploadReceipt]: data.uploadReceiptTask,
+      [DTC_TASK_TYPE.Shopping]: data.shoppingTask,
+    }
+
+    function getTitle(item: Task) {
+      if (
+        item.task_type === TaskType.Redeem &&
+        item.task_sub_type === TaskSubType.ProductUnApproved &&
+        data.productUnApprovedTask
+      ) {
+        // 新增的部分任务都使用了 alpc 同一个任务类型，需要用任务 id 来区分
+        return item.task_name.replace('Refund', data.productUnApprovedTask)
+      } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {
+        return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]]
+      } else {
+        return taskNameMap[item.task_sub_type] || item.task_name
+      }
+    }
+
+    const all = activities.map(item => ({
+      title: getTitle(item),
+      date: new Date(item.create_time * 1000),
+      value: item.credit,
+      type: item.credit_type,
+      pending_time: item.pending_time,
+      credit_type: item.credit_type,
+      status: item.status,
+    }))
+
+    let filtered = all || []
+    if (activeTab === CreditType.Earned) {
+      filtered = filtered?.filter(item => item.type === 1)
+    } else if (activeTab === CreditType.Deducted) {
+      filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)
+    } else if (activeTab === CreditType.Expired) {
+      filtered = filtered?.filter(item => item.type === 2 && item.status === 3)
+    }
+
+    return filtered.map(item => {
+      let { value, ...otherItem } = item
+      if (item.type === CreditType.Deducted && value > 0) {
+        value = -value
+      }
+
+      return {
+        value,
+        ...otherItem,
+      }
+    })
+  }, [
+    data.activationTask,
+    data.updateNameTask,
+    data.updatePhoneTask,
+    data.updateBirthdayTask,
+    data.subscriptionTask,
+    data.updateAppNameTask,
+    data.refundTask,
+    data.productUnApprovedTask,
+    data.firstPurchaseTask,
+    data.uploadReceiptTask,
+    data.shoppingTask,
+    activities,
+    activeTab,
+    taskIdToTypeMapping,
+  ])
+
+  const handleScrollEnd = useCallback(() => {
+    if (!canNext) {
+      return
+    }
+    setPage(page + 1)
+  }, [page, canNext])
+
+  return (
+    <CreditsModalContainer
+      title={data.title}
+      className={cn('h-[800px] w-[640px]')}
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      scrollClassName=""
+      {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
+        <Tabs
+          align="left"
+          shape="rounded"
+          value={activeTab.toString()}
+          onValueChange={value => {
+            setActiveTab(Number(value))
+          }}
+          className=""
+        >
+          <TabsList>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.type} value={tab.type.toString()}>
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <div className="grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]">
+        {isLoading && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <LoadingDots />
+          </div>
+        )}
+
+        {!isLoading && (
+          <>
+            {list.length > 0 ? (
+              list.map((item, index) => (
+                <div
+                  key={index}
+                  className="flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]"
+                >
+                  <div className="grid gap-[6px]">
+                    <div className="font-bold">{item.title}</div>
+                    <div className="text-[14px] font-semibold text-[#999]">
+                      {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                    </div>
+                    {!data.pendingTips && (
+                      <div
+                        className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                      >
+                        <Text html={data.pendingTips} />
+                        <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
+                        {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                      </div>
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      'font-bold',
+                      item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
+                    )}
+                  >
+                    {item.value >= 0 && '+'}
+                    {item.value}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="flex h-full flex-col items-center justify-center">
+                <Picture
+                  className="mb-[16px] h-[120px] w-[160px]"
+                  source={data?.emptyListImage?.url}
+                  alt={data?.emptyListImage?.alt || 'empty list image'}
+                ></Picture>
+                <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {/* 积分到账时间提醒 */}
+      {list.length > 0 && <div className="mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]">{data.tips}</div>}
+    </CreditsModalContainer>
+  )
+}
+
+export default ActivitiesModal