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

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

@@ -0,0 +1,309 @@
+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
+  emptyListImageUrl: string
+  emptyListLabel: string
+  pointUnit: string
+  code: string
+  copied: string
+  copy: 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)
+  }, [])
+
+  return (
+    <CreditsModalContainer
+      title={data.title}
+      className={classNames('h-[800px] w-[640px]')}
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      scrollClassName="min-l:px-0 md:mb-0 md:px-0"
+      {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <div className="px-[24px] md:px-[16px]">
+        <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>
+
+      <div className="mt-[24px] overflow-auto overscroll-contain px-[24px] md:px-[16px]">
+        {!list.length && !couponIsLoading && !productIsLoading && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <Picture className="mb-[12px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
+            <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
+          </div>
+        )}
+        {couponIsLoading ||
+          (productIsLoading && (
+            <div className="flex h-full flex-col items-center justify-center">
+              <LoadingDots />
+            </div>
+          ))}
+        <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>
+    </CreditsModalContainer>
+  )
+}
+
+export default MyRewardsModal

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

@@ -0,0 +1,248 @@
+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
+  emptyListImageUrl: 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="min-l:px-0 md:mb-0 md:px-0"
+      {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <div className="w-full overflow-x-auto">
+        <Tabs
+          align="left"
+          shape="rounded"
+          value={activeTab.toString()}
+          onValueChange={value => {
+            setActiveTab(Number(value))
+          }}
+          className="px-[24px] md:px-[16px]"
+        >
+          <TabsList>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.type} value={tab.type.toString()}>
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <div className="mt-[24px] grid gap-[18px] overflow-auto overscroll-contain px-[24px] md:gap-[12px] md:px-[16px]">
+        {isLoading && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <LoadingDots />
+          </div>
+        )}
+        {!list.length && !isLoading && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <Picture className="mb-[16px] h-[120px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
+            <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
+          </div>
+        )}
+        {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>
+      {!!list.length && (
+        <div className="mt-[12px] px-[24px] pb-[24px] text-[14px] font-semibold text-[#999] md:px-[16px]">
+          {data.tips}
+        </div>
+      )}
+    </CreditsModalContainer>
+  )
+}
+
+export default ActivitiesModal

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

@@ -0,0 +1,141 @@
+import { Button, Heading, Text } from '@anker-in/headless-ui'
+import { useCallback, useState } from 'react'
+import { CreditsModalContainer } from './modalContainer'
+import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
+
+export type ReceiptCopy = {
+  title: string
+  description: string
+  placeholder: string
+  note: string
+  submit: string
+  successTitle: string
+  successDescription: string
+  gotIt: string
+  failedTitle: string
+  successIcon: string
+  failedIcon: string
+  failedReasons: {
+    code: string
+    id: string
+    description: string
+  }[]
+}
+
+export function CreditsUploadReceiptModal({
+  isOpen,
+  onClose,
+  copy,
+  onSuccess,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  copy: ReceiptCopy
+  onSuccess: () => void
+}) {
+  const { trigger, isMutating } = useUploadReceipt()
+  const [orderName, setOrderName] = useState('')
+  const [resultPopup, setResultPopup] = useState(false)
+  const [resultPopupContent, setResultPopupContent] = useState({
+    icon: '',
+    title: '',
+    description: '',
+    isSuccess: false,
+  })
+
+  const handleSubmit = useCallback(() => {
+    trigger(
+      { orderName },
+      {
+        onSuccess: result => {
+          setResultPopup(true)
+          if (result?.ok) {
+            onSuccess()
+            setResultPopupContent({
+              icon: copy.successIcon,
+              title: copy.successTitle || 'Success',
+              description: copy.successDescription || 'Your receipt has been uploaded successfully',
+              isSuccess: true,
+            })
+          } else {
+            const error = copy.failedReasons.find(reason => reason.code === result.code?.toString())
+            setResultPopupContent({
+              icon: copy.failedIcon,
+              title: copy.failedTitle || 'Failed',
+              description: error?.description || 'Please try again',
+              isSuccess: false,
+            })
+          }
+        },
+      }
+    )
+  }, [
+    trigger,
+    orderName,
+    onSuccess,
+    copy.successIcon,
+    copy.successTitle,
+    copy.successDescription,
+    copy.failedReasons,
+    copy.failedIcon,
+    copy.failedTitle,
+  ])
+
+  const handleResultClose = () => {
+    setResultPopup(false)
+    setOrderName('')
+    // 如果上传成功，全部弹窗关闭
+    if (resultPopupContent.isSuccess) {
+      onClose()
+    }
+  }
+
+  return (
+    <CreditsModalContainer
+      isOpen={isOpen}
+      onClose={onClose}
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-[48px] md:mb-0 md:pb-[24px] md:px-[16px]"
+      titleClassName="h-[56px]"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+    >
+      <Heading size="3">{copy.title}</Heading>
+      <Text size="3" className="mt-[8px] md:mt-[4px]">
+        {copy.description}
+      </Text>
+      <input
+        placeholder={copy.placeholder}
+        className="mt-[24px] h-[50px] w-full rounded-[2px] border border-[#6D6D6F] pl-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0 md:rounded-[4px] md:placeholder:text-[14px]"
+        value={orderName}
+        onChange={e => setOrderName(e.target.value)}
+      />
+      <Text size="1" as="p" className="mt-[8px] text-[#6D6D6F]">
+        {copy.note}
+      </Text>
+      <Button variant="primary" className="mt-[24px] w-full" loading={isMutating} onClick={handleSubmit}>
+        {copy.submit}
+      </Button>
+      {resultPopup && (
+        <CreditsModalContainer
+          isOpen={resultPopup}
+          onClose={handleResultClose}
+          className="w-[540px] md:h-auto"
+          scrollClassName="mb-[40px] min-l:px-[48px] md:mb-0 md:pb-[24px] md:px-[16px] flex flex-col items-center text-center"
+          titleClassName="h-[56px]"
+        >
+          <Text size="3" className="size-[64px]" as="div" html={resultPopupContent.icon} />
+          <Heading size="3" className="mt-[16px]">
+            {resultPopupContent.title}
+          </Heading>
+          <Text size="3" className="mt-[8px] md:mt-[4px]">
+            {resultPopupContent.description}
+          </Text>
+          <Button variant="primary" className="mt-[24px]" onClick={handleResultClose}>
+            {copy.gotIt}
+          </Button>
+        </CreditsModalContainer>
+      )}
+    </CreditsModalContainer>
+  )
+}