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

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

@@ -0,0 +1,263 @@
+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 { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+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 { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  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 ? 'rounded' : 'square'}
+          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={cn(
+                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                    !rounded && 'rounded-none'
+                  )}
+                >
+                  <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

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

@@ -0,0 +1,149 @@
+import { Button, Heading, Text } from '@anker-in/headless-ui'
+import { useCallback, useState } from 'react'
+import { CreditsModalContainer } from './modalContainer'
+import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import classNames from 'classnames'
+
+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 { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  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={classNames(
+          '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]',
+          !rounded && 'rounded-none'
+        )}
+        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>
+  )
+}

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

@@ -0,0 +1,19 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+interface LoadingProps {
+  className?: string
+}
+
+const LoadingDots: FC<LoadingProps> = props => {
+  const { className } = props
+  return (
+    <span className={classNames('inline-flex min-h-[19px] items-center text-center leading-7', className)}>
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current" key={`dot_1`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.2s]" key={`dot_2`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.4s]" key={`dot_3`} />
+    </span>
+  )
+}
+
+export default LoadingDots

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

@@ -0,0 +1,116 @@
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useEffect, useState, type UIEvent } from 'react'
+import ReactModal from 'react-modal'
+
+export type ModalContainerProps = {
+  overlayClassName?: string
+  className?: string
+  scrollClassName?: string
+  title?: string
+  titleClassName?: string
+  useAnimation?: boolean // 使用动画展示
+  animationClassName?: string // 动画展示控制的classname
+  isOpen: boolean
+  children?: any
+  onClose: () => void
+  onScrollEnd?: (event: UIEvent<HTMLDivElement>) => void
+}
+
+export const CreditsModalContainer = ({
+  isOpen,
+  title,
+  className = '',
+  overlayClassName = '',
+  scrollClassName = '',
+  onClose,
+  onScrollEnd,
+  children,
+  useAnimation,
+  animationClassName,
+  titleClassName = '',
+  ...props
+}: ModalContainerProps): React.ReactElement => {
+  const [animationShow, setAnimationShow] = useState(false)
+
+  useEffect(() => {
+    if (!useAnimation) {
+      return
+    }
+    requestAnimationFrame(() => {
+      setAnimationShow(isOpen ?? false)
+    })
+  }, [isOpen, useAnimation])
+
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  return (
+    <ReactModal
+      isOpen={isOpen ?? false}
+      overlayClassName={cn(
+        'fixed inset-0 z-[999] flex items-center justify-center bg-black/70 leading-[1.2] md:items-end',
+        overlayClassName
+      )}
+      className={cn(
+        'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
+        !rounded && 'rounded-none',
+        animationShow ? '' : animationClassName,
+        className
+      )}
+      onRequestClose={onClose}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex w-full shrink-0 items-center justify-between',
+          title ? 'min-l:px-[32px] h-[70px] border-b border-[#e2e2e2] px-[24px]' : 'h-[48px] px-[16px]',
+          titleClassName
+        )}
+      >
+        <div className="text-[18px] font-bold">{title}</div>
+        <div
+          className="size-[22px] cursor-pointer"
+          onClick={onClose}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose?.()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M16.8525 5.31015C16.4558 4.91337 15.8125 4.91338 15.4157 5.31015L11.1268 9.5991L6.83815 5.31049C6.44138 4.91372 5.79808 4.91372 5.40131 5.31049C5.00454 5.70726 5.00455 6.35055 5.40131 6.74732L9.68993 11.0359L5.40105 15.3248C5.00428 15.7216 5.00428 16.3649 5.40105 16.7616C5.79782 17.1584 6.44111 17.1584 6.83788 16.7616L11.1268 12.4728L15.416 16.762C15.8128 17.1588 16.456 17.1588 16.8528 16.762C17.2496 16.3652 17.2496 15.7219 16.8528 15.3252L12.5636 11.0359L16.8525 6.74698C17.2493 6.35021 17.2493 5.70692 16.8525 5.31015ZM16.921 6.02856C16.921 6.22992 16.8441 6.43127 16.6905 6.5849L14.465 8.8104L12.2395 11.0359L12.2395 11.0359L16.6905 6.58493C16.8441 6.43129 16.921 6.22993 16.921 6.02856ZM5.34966 6.19087C5.37992 6.3354 5.45115 6.47307 5.56336 6.58528L10.014 11.0359L10.014 11.0359L5.56336 6.58524C5.45116 6.47304 5.37992 6.33539 5.34966 6.19087ZM5.35087 16.2121C5.38193 16.3541 5.45267 16.4891 5.56309 16.5996C5.87037 16.9068 6.36856 16.9068 6.67583 16.5996L11.1268 12.1486L15.578 16.5999C15.8853 16.9072 16.3835 16.9072 16.6908 16.5999C16.8498 16.4409 16.9265 16.2307 16.9209 16.0223C16.9265 16.2307 16.8498 16.4409 16.6908 16.5999C16.3835 16.9072 15.8853 16.9072 15.578 16.5999L11.1268 12.1487L6.67583 16.5996C6.36856 16.9069 5.87037 16.9069 5.56309 16.5996C5.45267 16.4892 5.38192 16.3541 5.35087 16.2121Z"
+              fill="#333333"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'my-[32px] flex-1 overflow-auto overscroll-contain px-[24px] md:mb-[48px]',
+          !title && 'mt-0',
+          'min-l:px-[32px]',
+          scrollClassName
+        )}
+        onScroll={event => {
+          const targetElement = event.target as HTMLDivElement
+
+          if (targetElement.scrollHeight <= targetElement.clientHeight) {
+            return
+          }
+
+          if (targetElement.scrollTop + targetElement.clientHeight >= targetElement.scrollHeight - 50) {
+            onScrollEnd && onScrollEnd(event)
+          }
+        }}
+      >
+        {children}
+      </div>
+    </ReactModal>
+  )
+}

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

@@ -0,0 +1,44 @@
+import { Text } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { classNames as cn } from '@anker-in/lib'
+
+function RulesModal({
+  rules,
+  className,
+  ruleClassName,
+  ...props
+}: {
+  rules: string | string[]
+  ruleClassName?: string
+  className?: string
+} & ModalContainerProps) {
+  const rulesComponent = useMemo(() => {
+    if (typeof rules === 'string') {
+      return <Text className={cn('text-[16px] font-semibold', ruleClassName)} html={rules}></Text>
+    } else {
+      return (
+        <ul className="ml-4 text-[16px]">
+          {rules?.map((rule, index) => (
+            <li key={index} className={cn('mb-[10px] list-disc')}>
+              <Text
+                as="div"
+                className={cn('text-[16px] font-semibold leading-[1.4] text-[#777777]', ruleClassName)}
+                html={rule}
+              ></Text>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+  }, [ruleClassName, rules])
+
+  return (
+    <CreditsModalContainer className={cn('max-h-[90vh] w-[640px]', className)} {...props}>
+      {rulesComponent}
+    </CreditsModalContainer>
+  )
+}
+
+export default RulesModal