@anker-in/campaign-ui 0.1.9 → 0.2.10-beta.1

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

@@ -0,0 +1,195 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCallback, useMemo, useState } from 'react'
+
+import RedeemCouponModal from './RedeemCouponModal'
+import RedeemProductModal from './RedeemProductModal'
+import { useCreditsContext } from '../context/provider'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
+import { useProductsByHandles } from '../../../shopify/hooks/useProductsByHandles'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { RedeemableItem } from './RedeemableItem'
+import RulesModal from '../modal/rulesModal'
+import { CreditsRedeemListCopy } from './type'
+import { gaTrack } from '../../../helpers/track'
+
+export function CreditsRedeemList({
+  copy,
+  className = '',
+  tabClassName = '',
+  hideTitle = false,
+  cardClassName,
+  activate,
+}: {
+  copy: CreditsRedeemListCopy
+  className?: string
+  tabClassName?: string
+  hideTitle?: boolean
+  cardClassName?: string
+  activate: {
+    openAuthCodePopup: () => void
+    isSuccess: boolean
+    setOnSuccess: (callback: Function) => void
+  }
+}) {
+  const {
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  const isLogin = Object.keys(profile || {}).length > 0
+
+  const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)
+
+  const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)
+
+  const [rules, setRules] = useState<string | string[]>()
+
+  const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()
+
+  const alpcList = useMemo(() => {
+    return redeemableList.map(item => {
+      return {
+        id: item.id.toString(),
+        title: item.name,
+        consumeCredits: item.consume_credits,
+        remainingInventory: item.remaining_inventory,
+        isLimited: !!item.is_limited,
+        consumeType: item.consume_type,
+        handle: item.sku_handle,
+        sku: item.goods_sku,
+        image: item.goods_url,
+      }
+    })
+  }, [copy.list, activeTab, redeemableList])
+
+  const handles = alpcList.map(item => item.handle)
+  const { data: products } = useProductsByHandles({ handles })
+
+  const list = useMemo(() => {
+    const currentList = copy.list.find(item => item.label === activeTab)
+    return currentList?.list
+      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))
+      .map(item => {
+        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)
+        const product = products?.find(product => product.handle === alpcItem?.handle)
+        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)
+        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
+        return {
+          alpc: alpcList.find(alpcItem => alpcItem.id === item.id),
+          config: item,
+          product,
+          variant,
+        }
+      })
+      .filter(item => item !== null) as unknown as RedeemableItemType[]
+  }, [alpcList, products])
+
+  const handleRedeemError = useCallback(
+    (errorCode: AlpcErrorCode) => {
+      if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+        getRedeemableList()
+      }
+    },
+    [getRedeemableList]
+  )
+
+  console.log('popRedeemData', popRedeemData)
+
+  return (
+    <Container className={classNames('relative bg-[#F5F5F7]', className)}>
+      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
+
+      <Tabs
+        shape="rounded"
+        align="left"
+        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center', tabClassName)}
+        value={activeTab.toString()}
+        onValueChange={value => {
+          setActiveTab(value)
+          gaTrack({
+            event: 'ga4Event',
+            event_name: 'lp_navigation',
+            event_parameters: {
+              navigation: value,
+              page_group: pageGroup,
+            },
+          })
+        }}
+      >
+        <TabsList>
+          {copy.list.map(item => (
+            <TabsTrigger key={item.label} value={item.label}>
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      {/* PC端 */}
+      {!!alpcList?.length && !listLoading && (
+        <div
+          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}
+        >
+          {list?.map(item => (
+            <RedeemableItem
+              key={item?.alpc?.id}
+              copy={copy}
+              item={item}
+              onRedeem={(item: RedeemableItemType) => {
+                if (!isLogin) {
+                  openSignUpPopup()
+                } else if (!profile?.activated && !activate.isSuccess) {
+                  activate.openAuthCodePopup()
+                  activate.setOnSuccess(() => {
+                    setPopRedeemData(item)
+                  })
+                } else {
+                  setPopRedeemData(item)
+                }
+              }}
+              onRulesOpen={setRules}
+              className={cardClassName}
+            />
+          ))}
+        </div>
+      )}
+
+      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (
+        <RedeemCouponModal
+          isOpen={!!popRedeemData}
+          item={popRedeemData}
+          copy={copy}
+          onError={handleRedeemError}
+          onClose={() => {
+            setPopRedeemData(undefined)
+          }}
+        />
+      )}
+      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (
+        <RedeemProductModal
+          isOpen={!!popRedeemData}
+          item={popRedeemData}
+          copy={copy}
+          onError={handleRedeemError}
+          onClose={() => {
+            setPopRedeemData(undefined)
+          }}
+        />
+      )}
+      {rules && (
+        <RulesModal
+          overlayClassName="md:px-[16px] md:items-center"
+          className="md:h-fit md:rounded-b-[16px]"
+          isOpen={rules.length > 0}
+          onClose={() => setRules([])}
+          titleClassName="border-b-transparent h-[56px]"
+          rules={rules}
+          scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
+          title={copy?.ruleLabel}
+          ruleClassName="text-[#1d1d1f] font-bold"
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,78 @@
+import { CreditsPageCommon } from '../type'
+
+export type CreditsRedeemListCopy = {
+  title: string
+  giftCardLabel: string
+  unlockRewards: string
+  btnRedeem: string
+  list: {
+    label: string
+    list: {
+      id: string
+      type: string
+      value: string
+      rules: string[]
+    }[]
+  }[]
+  validatorInfo: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
+  redeemModal: {
+    confirmTitle: string
+    confirmButton: string
+    commonError: string
+    redeemLimitError: string
+    inventoryNotEnough: string
+    creditsNotEnough: string
+    crossSiteError: string
+    errorImageUrl: string
+    coupon: {
+      successDesc: string
+      successTitle: string
+      successButton: string
+      successButtonUrl: string
+    }
+    product: {
+      required: string
+      invalidEmail: string
+      shippingAddress: string
+      shippingProduct: string
+      addressForm: {
+        key: string
+        type: string
+        label: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      form: {
+        key: string
+        type: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      successDesc: string[]
+      rules: string[]
+      steps: {
+        imageUrl: string
+        title: string
+      }[]
+      quantityLabel: string
+      totalPriceLabel: string
+      variantLabel: string
+      shippingFeeLabel: string
+      paymentButton: string
+      stepTitle: string
+    }
+  }
+  copied: string
+  off: string
+  copy: string
+} & CreditsPageCommon

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

@@ -0,0 +1,189 @@
+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"
+                    loading={item.id === TaskType.Activate && activate.isSendingActivateEmail}
+                    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 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,64 @@
+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
+    isSendingActivateEmail: boolean
+  }
+  subscribe: {
+    openSubscribePopup: () => void
+    isSuccess: boolean
+  }
+  uploadReceipt: {
+    openUploadReceiptPopup: () => void
+    isSuccess: boolean
+  }
+}