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

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -0,0 +1,207 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
+
+import { CreditsCashCopy, RedeemItem } from './type'
+import { useCreditsContext } from '../context/provider'
+import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
+import { numberFormat } from '../context/utils'
+import { gaTrack, classNames as cn } from '@anker-in/lib'
+import { useRegistration } from '../../../components/registration'
+
+function RedeemableItem({
+  copy,
+  itemData,
+  setRules,
+  className,
+}: {
+  copy: CreditsCashCopy
+  itemData: RedeemItem
+  className?: string
+  setRules: (rules: string[]) => void
+  currencyCode: string
+}) {
+  const {
+    creditInfo,
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const [error, setError] = useState<string | null>(null)
+  const { trigger, isMutating } = useRedeemAndBuy(
+    {},
+    {
+      onError: error => {
+        setError(error.message)
+      },
+    }
+  )
+
+  const isLogin = useMemo(() => {
+    return !!profile
+  }, [profile?.activated])
+
+  const inSufficientCredit = useMemo(() => {
+    return (
+      isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)
+    )
+  }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])
+
+  const isDisabled = useMemo(() => {
+    // 兑换限制
+    if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {
+      return true
+    }
+
+    // 商品库存限制
+    if (!itemData.productVariant?.availableForSale) {
+      return true
+    }
+
+    // 积分不足
+    if (inSufficientCredit) {
+      return true
+    }
+    return false
+  }, [
+    itemData.alpcData?.remainingInventory,
+    itemData.alpcData?.isLimited,
+    itemData.productVariant?.availableForSale,
+    inSufficientCredit,
+  ])
+
+  const handleRedeem = () => {
+    setError(null)
+    if (!isLogin) {
+      openSignUpPopup()
+    } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+      authCodeActivate.open()
+    } else {
+      trigger({
+        productVariant: itemData?.productVariant,
+        redeemId: itemData?.config?.redeemId,
+      })
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        member_active_status: profile?.activated ? 'active' : 'not active',
+        event_parameters: {
+          page_group: pageGroup,
+          position: copy.title,
+          button_name: redeemButtonText,
+          info: itemData?.alpcData?.id?.toString(),
+        },
+      })
+    }
+  }
+
+  const redeemButtonText = useMemo(() => {
+    // 缺货文案
+    if (!itemData.productVariant?.availableForSale) {
+      return copy?.soldOut || 'Sold Out'
+    } else if (!isLogin) {
+      return copy.unlockRewards
+    } else {
+      return copy.btnRedeem
+    }
+  }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        className
+      )}
+    >
+      <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>
+        <Picture
+          className="mx-auto h-full w-auto"
+          imgClassName="h-full object-contain"
+          source={
+            itemData?.config?.image?.url ||
+            itemData?.productVariant?.metafields?.global?.transparentImg ||
+            itemData?.productVariant?.image?.url
+          }
+        ></Picture>
+      </div>
+      <div className={cn('mt-[22px] w-full l:mt-[8px]')}>
+        <Text
+          html={itemData?.product?.title}
+          title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}
+          size={2}
+          className="line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"
+        />
+        {itemData?.config?.rules?.split('<br>')?.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              setRules(itemData?.config?.rules?.split('<br>'))
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: copy?.ruleLabel,
+                  info: itemData?.alpcData?.id?.toString(),
+                },
+              })
+            }}
+            className="mt-[8px] text-[16px] font-bold underline xxl:text-[14px]"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {copy?.ruleLabel}
+          </button>
+        )}
+        <div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+          <Picture
+            className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
+            source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
+          />
+          <Text
+            html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}
+            size={2}
+            as="p"
+            className="ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+          />
+        </div>
+
+        <div className="group relative w-full">
+          <Button
+            disabled={isDisabled}
+            variant="primary"
+            size="lg"
+            className="mt-[8px] md:px-[10px] l:w-full"
+            loading={isMutating}
+            onClick={() => {
+              handleRedeem()
+            }}
+            title={inSufficientCredit ? copy.insufficientCredits : redeemButtonText}
+          >
+            {redeemButtonText}
+          </Button>
+          <div
+            className={cn(
+              'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',
+              inSufficientCredit ? 'block' : 'hidden'
+            )}
+          >
+            <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]">
+              <Text as="p" size="2" html={copy?.insufficientCredits} className="text-[14px]" />
+              <div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+            </div>
+          </div>
+        </div>
+      </div>
+      {error && <div className="mt-[8px] text-[14px] text-[#FF0000]">{error}</div>}
+    </div>
+  )
+}
+
+export default RedeemableItem

package/src/components/credits/creditsCash/index.ts

@@ -0,0 +1,2 @@
+export * from './type'
+export * from './CreditsCash'

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

@@ -0,0 +1,46 @@
+import { ProductVariant, Product } from '@anker-in/lib'
+import { AlpcConsumeType } from '../context/const'
+
+type RedeemableItemConfig = {
+  title: string
+  desc: string
+  price: string
+  credit: string
+  rules: string
+  image: {
+    url: string
+  }
+  mobileImage: {
+    url: string
+  }
+  redeemId: number
+}
+
+export type CreditsCashCopy = {
+  title: string
+  list: (RedeemableItemConfig & {
+    products: { handle: string; sku: string }[]
+  })[]
+  soldOut: string
+  ruleLabel: string
+  unlockRewards: string
+  btnRedeem: string
+  off: string
+  insufficientCredits: string
+}
+
+export type RedeemItem = {
+  product: Product
+  productVariant: ProductVariant
+  alpcData: {
+    id: number
+    consumeCredits: number
+    remainingInventory: number
+    isLimited: boolean
+    consumeType: AlpcConsumeType.Product
+    showCredit: boolean
+    title: string
+    desc: string
+  }
+  config: RedeemableItemConfig
+}

package/src/components/credits/creditsFaq/faqItem/FaqItem.tsx

@@ -0,0 +1,95 @@
+import { Heading, Text } from '@anker-in/headless-ui'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { classNames as cn } from '@anker-in/lib'
+import { motion } from 'framer-motion'
+import { type ReactNode, useEffect, useState } from 'react'
+
+type FaqItemProps = {
+  index: number
+  question?: string
+  answer?: string | number
+  showDots: boolean
+  itemRightIconRender?: ({ expanded }: { expanded: boolean }) => ReactNode
+  defaultExpended?: boolean
+}
+
+export const FaqItem = ({
+  index,
+  question,
+  answer,
+  showDots,
+  itemRightIconRender,
+  defaultExpended = false,
+}: FaqItemProps) => {
+  const [expanded, setExpanded] = useState(defaultExpended)
+  useEffect(() => {
+    if (index == 0) {
+      setExpanded(true)
+    }
+    if (!question) {
+      setExpanded(true)
+    }
+  }, [index, question])
+
+  return (
+    <div key={index} className={cn('relative mx-0  border-b-[1px] border-[#e4e5e6] py-[24px] l:py-[16px]')}>
+      <div
+        className="relative flex items-center"
+        onClick={() => {
+          setExpanded(!expanded)
+        }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+          }
+        }}
+      >
+        <Heading
+          html={question}
+          as="h3"
+          className={cn(
+            showDots
+              ? 'before:absolute before:left-[-15px] before:top-[8px] before:h-[6px] before:w-[6px] before:rounded-[50%] before:bg-[#000] before:content-[""]'
+              : '',
+            'relative block flex-1 cursor-pointer pr-[10px] text-[18px] font-bold text-[#1D1D1F] l:text-[16px]'
+          )}
+        ></Heading>
+        {itemRightIconRender ? (
+          itemRightIconRender({ expanded })
+        ) : (
+          <ChevronDownIcon
+            className={cn(
+              'size-[16px] shrink-0 cursor-pointer stroke-[2.5px] transition-all',
+              expanded ? 'rotate-180' : ''
+            )}
+          />
+        )}
+      </div>
+      <motion.div
+        initial={false}
+        animate={{ height: !expanded ? 0 : 'auto' }}
+        className="overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]"
+      >
+        {answer?.toString()?.includes('https://www.youtube.com') ? (
+          <Text
+            as="div"
+            className={cn('mt-[8px]')}
+            data-ratio="16:9"
+            data-content={answer}
+            html={answer?.toString()}
+          ></Text>
+        ) : (
+          <Text
+            as="div"
+            html={answer?.toString()}
+            className={cn(
+              'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
+            )}
+          ></Text>
+        )}
+      </motion.div>
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useMemo, useState } from 'react'
+
+import { FaqItem } from './faqItem/FaqItem'
+
+export type CreditsFaqCopy = {
+  title: string
+  subTitle: string
+  learnMore: {
+    link: string
+    label: string
+  }
+  items: {
+    category_name: string
+    question: string
+    answer: string
+  }[]
+}
+export const CreditsFaq = ({ copy }: { copy: CreditsFaqCopy }) => {
+  const { title, items: faqList, subTitle = '' } = copy || {}
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const categoryList = useMemo(() => {
+    return Array.from(new Set(faqList?.map?.(faq => faq.category_name).filter(item => !!item)))
+  }, [faqList])
+  const [activeTab, setActiveTab] = useState<string>(categoryList[0]?.toString() || '')
+
+  const currentList = useMemo(() => {
+    if (!faqList) return []
+    if (categoryList.length) {
+      return faqList.filter(item => item?.category_name === activeTab)
+    }
+    return faqList
+  }, [faqList, categoryList.length, activeTab])
+
+  return (
+    <Container className="bg-[#F5F5F7]" id="faq">
+      {title && <Heading as="h2" size="4" html={copy?.title} />}
+      {subTitle && (
+        <div className="mt-[8px] flex flex-row">
+          <Text size="4" as="p" html={subTitle} className="flex-1" />
+        </div>
+      )}
+      {/* faq-nav */}
+      <Tabs
+        align="left"
+        shape={rounded ? 'rounded' : 'square'}
+        className="mt-[24px]"
+        value={activeTab.toString()}
+        onValueChange={value => {
+          setActiveTab(value)
+        }}
+      >
+        <TabsList>
+          {categoryList.map((item, index) => (
+            <TabsTrigger key={index} value={item?.toString() || ''}>
+              {item}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      <div className={cn('mt-[24px] flex flex-col overflow-auto pt-0')}>
+        {currentList?.map((item, index) => {
+          return (
+            <FaqItem
+              key={index}
+              index={index}
+              defaultExpended={faqList.length === 1}
+              question={item.question}
+              answer={item.answer}
+              showDots={false}
+            ></FaqItem>
+          )
+        })}
+      </div>
+      {copy.learnMore?.link && copy.learnMore?.label && (
+        <a
+          href={copy.learnMore?.link}
+          target="_blank"
+          className="mt-[24px] block w-full text-center text-[18px] font-bold text-brand hover:underline l:text-[16px]"
+        >
+          {copy.learnMore?.label}
+        </a>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,182 @@
+import { Button, Container, Text } from '@anker-in/headless-ui'
+
+import { useCallback, useState } from 'react'
+import { useCreditsContext } from '../context/provider'
+import { numberFormat } from '../context/utils'
+import ActivitiesModal from '../modal/activitiesModal'
+import MyRewardsModal from '../modal/MyRewardsModal'
+import { gaNormalClick, classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+
+type ButtonConfig = {
+  text: string
+  type: 'activities' | 'rewards'
+}
+export type CreditsInfoCardCopy = {
+  balanceLabel: string
+  comingSoonLabel: string
+  comingSoonTips: string
+  buttons: ButtonConfig[]
+}
+
+export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
+  const [openActivities, setOpenActivities] = useState(false)
+  const [openRewards, setOpenRewards] = useState(false)
+  const [hover, setHover] = useState<boolean>(false)
+  const { creditInfo, pageCommon } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
+    gaNormalClick({ position: 'info_card', label: buttonConfig.text })
+
+    if (buttonConfig.type) {
+      switch (buttonConfig.type) {
+        case 'activities':
+          setOpenActivities(true)
+          break
+        case 'rewards':
+          setOpenRewards(true)
+          break
+      }
+    }
+  }, [])
+
+  return (
+    <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
+      <div
+        className={cn(
+          'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
+          'l:flex-col l:items-start',
+          'min-l:px-[48px]',
+          'min-xl:px-[100px]',
+          !rounded && 'rounded-none'
+        )}
+        style={{
+          background:
+            'linear-gradient(119.61deg, rgba(250, 250, 250, 0.6) 38.58%, rgba(255, 255, 255, 0.6) 63.73%, rgba(249, 252, 255, 0.6) 89.37%)',
+          backdropFilter: 'blur(8px)',
+        }}
+      >
+        <div
+          className={cn(
+            'grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
+          )}
+        >
+          <div className="mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]">
+            <div
+              className={cn(
+                'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'
+              )}
+            >
+              {copy.balanceLabel}
+            </div>
+            <div className="flex items-baseline">
+              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
+                {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
+              </div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
+            </div>
+          </div>
+          <div className="w-fit md:flex-1">
+            <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>
+              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={copy.comingSoonLabel} />
+              {copy.comingSoonTips && (
+                <div className="group relative ml-[4px] flex cursor-pointer items-start">
+                  <Text
+                    as="div"
+                    html={pageCommon?.infoIcon}
+                    className="size-[18px] cursor-pointer [&_svg]:size-full"
+                    onClick={() => {
+                      if (hover) {
+                        setHover(false)
+                      } else {
+                        setHover(true)
+                        setTimeout(() => {
+                          setHover(false)
+                        }, 5000)
+                      }
+                    }}
+                  />
+                  <div
+                    className={cn(
+                      'absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]',
+                      hover ? 'block' : 'hidden'
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                        !rounded && 'rounded-none'
+                      )}
+                    >
+                      <Text size="2" html={copy.comingSoonTips} className="desktop:text-[18px]" />
+                      <div
+                        className={cn(
+                          'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                          !rounded && 'rounded-none'
+                        )}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-baseline ">
+              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>
+                {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}
+              </div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'
+          )}
+        >
+          {copy.buttons?.map((item, index) => (
+            <Button
+              key={index}
+              variant={index === 0 ? 'secondary' : 'primary'}
+              size="lg"
+              className="min-w-[156px] laptop:min-w-[189px]"
+              onClick={() => {
+                handleButtonClick(item)
+              }}
+            >
+              {item.text}
+            </Button>
+          ))}
+        </div>
+
+        {pageCommon?.activitiesModal && (
+          <ActivitiesModal
+            isOpen={openActivities}
+            data={pageCommon?.activitiesModal}
+            onClose={() => {
+              setOpenActivities(false)
+            }}
+          />
+        )}
+        {pageCommon?.rewardsModal && (
+          <MyRewardsModal
+            isOpen={openRewards}
+            data={pageCommon?.rewardsModal}
+            onClose={() => {
+              setOpenRewards(false)
+            }}
+          ></MyRewardsModal>
+        )}
+      </div>
+      {hover && (
+        <div
+          role="button"
+          tabIndex={0}
+          className="fixed inset-0 z-10"
+          onClick={() => setHover(false)}
+          onKeyDown={e => e.key === 'Escape' && setHover(false)}
+        />
+      )}
+    </Container>
+  )
+}