@anker-in/campaign-ui 0.1.10 → 0.2.0

package/src/components/credits/creditsWaysToGetCredits/index.tsx

@@ -0,0 +1,188 @@
+import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import { motion } from 'framer-motion'
+import { useMemo, useState } from 'react'
+
+import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
+import { useActions } from './useActions'
+import { useCreditsContext } from '../context/provider'
+import { cn } from '../../../helpers/index'
+
+export const CreditsWaysToGetCredits = ({
+  copy,
+  activate,
+  subscribe,
+  uploadReceipt,
+  classNames,
+}: CreditsWaysToGetCreditsProps) => {
+  const [showMore, setShowMore] = useState(false)
+  const { profile } = useCreditsContext()
+  const isLogin = !!profile
+
+  const { actions } = useActions({ copy, activate, subscribe, uploadReceipt })
+
+  const list = useMemo(() => {
+    const list = copy.list
+      .map(item => {
+        if (!actions[item.id as keyof typeof actions]) {
+          return undefined
+        }
+        const { finished, notLogin, notFinished, completed } = actions[item.id as keyof typeof actions]
+        let buttonLabel = ''
+        let handleClick = undefined
+        let link = undefined
+        if (!isLogin) {
+          buttonLabel = notLogin.buttonLabel
+          handleClick = notLogin.handleClick
+        } else if (finished) {
+          buttonLabel = completed.buttonLabel
+          handleClick = undefined
+        } else {
+          buttonLabel = notFinished.buttonLabel
+          handleClick = notFinished.handleClick
+          link = (notFinished as { link: string }).link
+        }
+        return {
+          ...item,
+          buttonLabel,
+          handleClick,
+          finished,
+          link,
+        }
+      })
+      .filter(Boolean) as {
+      title: string
+      credits: string
+      id: TaskType
+      buttonLabel: string
+      finished: boolean
+      link: string
+      handleClick: (() => void) | undefined
+    }[]
+
+    // 登录后，保留原顺序，将已完成的任务放在最后
+    if (isLogin) {
+      return list.sort((a, b) => {
+        if (a?.finished && !b?.finished) {
+          return 1 // a已完成，b未完成，a排在后面
+        }
+        if (!a?.finished && b?.finished) {
+          return -1 // a未完成，b已完成，a排在前面
+        }
+        return 0 // 都已完成或都未完成，保持原顺序
+      })
+    } else {
+      return list
+    }
+  }, [actions, copy.list, isLogin])
+
+  return (
+    <Container id="ways-to-get-credits" className=" bg-[#F5F5F7] [&>div]:l:!px-0">
+      <div className="rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]">
+        <Heading as="h2" size={4} html={copy?.title} className="text-center l:pl-[16px] l:text-left" />
+        <div className="mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]">
+          <div className="pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]">
+            <Heading size={3} as="h3" html={copy.subtitle} className={classNames?.subtitle} />
+            <div className="mt-[8px] flex items-center">
+              {copy.creditsIcon?.url && (
+                <Picture
+                  className="size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand"
+                  source={copy.creditsIcon.url}
+                  alt={copy.creditsIcon.alt || 'credits'}
+                />
+              )}
+              <Heading
+                html={copy.equalCredits}
+                size={4}
+                as="h3"
+                className={cn('mt-2 text-white md:text-[24px]', classNames?.equalCreditsText)}
+              />
+            </div>
+          </div>
+          <Picture className="w-full laptop:w-[50%]" source={copy.mainImage?.url} />
+        </div>
+
+        <div className="relative">
+          <motion.div
+            className={cn(
+              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden md:mt-[16px] md:grid-cols-1 l:gap-[12px]  min-md:!h-auto md-l:mt-[32px] md-l:grid-cols-2'
+            )}
+            initial={{ height: 512 }}
+            animate={{ height: showMore ? 'auto' : 512 }}
+            transition={{ duration: 0.3 }}
+            onAnimationComplete={() => {
+              if (!showMore && window.screen.width < 768) {
+                const section = document.getElementById('ways-to-get-credits')
+                if (section) {
+                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+                }
+              }
+            }}
+          >
+            {list.map(item => (
+              <div
+                key={item.id}
+                className="flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]"
+              >
+                <div>
+                  <Heading as="h4" html={item.title} size={2} className="text-pretty" />
+                  <div className="mt-[4px] flex items-center">
+                    <Picture
+                      className="size-[24px] xl:size-[18px] [&_path]:size-full"
+                      source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
+                    />
+                    <Text as="p" html={item.credits} size={2} className="ml-[4px] mt-[6px] lg-desktop:text-[18px]" />
+                  </div>
+                </div>
+
+                {item.handleClick &&
+                !(item.id === TaskType.UploadReceipt && uploadReceipt.isSuccess) &&
+                !(item.id === TaskType.Activate && activate.isSuccess) &&
+                !(item.id === TaskType.Subscribe && subscribe.isSuccess) ? (
+                  <Button
+                    as={item.link ? 'a' : 'button'}
+                    {...(item.link && { href: item.link })}
+                    {...(item.handleClick && { onClick: item.handleClick })}
+                    variant="primary"
+                    size="lg"
+                    className="mt-[24px] w-fit"
+                  >
+                    {item.buttonLabel}
+                  </Button>
+                ) : (
+                  <Button variant="primary" size="lg" className="mt-[24px] w-fit" disabled>
+                    {item.buttonLabel}
+                  </Button>
+                )}
+              </div>
+            ))}
+            {!showMore && (
+              <div
+                className="absolute inset-0 pointer-events-none min-md:hidden"
+                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%' }}
+              ></div>
+            )}
+          </motion.div>
+          {showMore ? (
+            <button
+              className="mx-auto mt-[12px] block w-fit min-md:hidden"
+              onClick={() => {
+                setShowMore(false)
+              }}
+            >
+              <ChevronUpIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronUpIcon>
+            </button>
+          ) : (
+            <>
+              <div className="absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden">
+                <button className="w-fit" onClick={() => setShowMore(!showMore)}>
+                  <ChevronDownIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronDownIcon>
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </Container>
+  )
+}

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

@@ -0,0 +1,63 @@
+import type { ReceiptCopy } from '../modal/creditsUploadReceiptModal'
+
+export type BenefitItem = {
+  title: string
+  credits: string
+  id: string
+}
+
+export type WaysToGetCreditsCopy = {
+  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
+  subscribe: string
+  sendEmailSuccess: string
+  creditsIcon: {
+    url: string
+    alt: string
+  }
+  receipt: ReceiptCopy
+}
+
+export enum TaskType {
+  Activate = 'activate',
+  Subscribe = 'subscribe',
+  CompleteProfile = 'completeProfile',
+  FirstPurchase = 'firstPurchase',
+  UploadReceipt = 'uploadReceipt',
+  Shop = 'shop',
+}
+
+export type CreditsWaysToGetCreditsProps = {
+  copy: WaysToGetCreditsCopy
+  classNames?: {
+    equalCreditsText?: string
+    subtitle?: string
+  }
+  activate: {
+    openAuthCodePopup: () => void
+    isSuccess: boolean
+  }
+  subscribe: {
+    openSubscribePopup: () => void
+    isSuccess: boolean
+  }
+  uploadReceipt: {
+    openUploadReceiptPopup: () => void
+    isSuccess: boolean
+  }
+}

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

@@ -0,0 +1,217 @@
+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 { CreditsWaysToGetCreditsProps } from './type'
+import { useHeadlessContext } from '@anker-in/lib'
+import { gaTrack } from '../../../helpers/track'
+
+export const useActions = ({
+  copy,
+  subscribe,
+  uploadReceipt,
+  activate,
+  gaParameters,
+}: CreditsWaysToGetCreditsProps & {
+  gaParameters?: {
+    position: string
+  }
+}) => {
+  const { openSignUpPopup, gtm, profile } = useCreditsContext()
+  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: () => activate.openAuthCodePopup(),
+                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?.subscribe,
+            handleClick: () =>
+              handleClickWithTrack({
+                buttonName: copy?.subscribe,
+                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'