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

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -0,0 +1,73 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { cn } from '../../../helpers/utils'
+import IconInfo from './iconInfo'
+
+export interface BenefitItemCopy {
+  icon: {
+    alt: string
+    url: string
+  }
+  text: string
+  note?: string
+  tag?: string
+}
+const BenefitItem = ({
+  item,
+  handleClick,
+  isNoteActive,
+  index,
+}: {
+  item: BenefitItemCopy
+  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void
+  isNoteActive: boolean
+  index: number
+}) => {
+  return (
+    <div
+      className="relative h-full rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      style={{
+        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
+      }}
+    >
+      <div className="flex flex-col">
+        <Picture
+          className="mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0"
+          alt={item.icon?.alt}
+          source={item.icon?.url}
+        />
+        <div className="flex items-center">
+          <Heading html={item.text} size="2" className="break-all" />
+          {item.note && (
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                }
+              }}
+              className="relative mb-1 ml-[4px]"
+              onClick={() => handleClick({ item, index })}
+            >
+              <IconInfo />
+              <div
+                className={cn(
+                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',
+                  isNoteActive ? 'block' : 'hidden'
+                )}
+              >
+                <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
+                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
+                  <div className="absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        {item.tag && <Text as="div" html={item.tag} className="mt-[2px] text-[16px] font-bold text-[#6D6D6F]" />}
+      </div>
+    </div>
+  )
+}
+
+export default BenefitItem

package/src/components/credits/creditsBenefits/iconInfo.tsx

@@ -0,0 +1,23 @@
+export const IconInfo = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      className='size-[18px] cursor-pointer [&_svg]:size-full'
+      width='18'
+      height='18'
+      viewBox='0 0 18 18'
+      fill='none'
+    >
+      <path
+        d='M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z'
+        fill='#6D6D6F'
+      />
+      <path
+        d='M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z'
+        fill='#6D6D6F'
+      />
+    </svg>
+  )
+}
+
+export default IconInfo

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

@@ -0,0 +1,119 @@
+import 'swiper/css'
+import 'swiper/css/grid'
+import 'swiper/css/pagination'
+
+import { Container, Heading } from '@anker-in/headless-ui'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { Grid, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import BenefitItem, { type BenefitItemCopy } from './benefitItem'
+import { useCreditsContext } from '../context/provider'
+import { gaTrack, getGtmGroup } from '../../../helpers/track'
+import { cn } from '../../../helpers/utils'
+
+interface CreditsBenefitsProps {
+  copy: {
+    title: string
+    benefits: BenefitItemCopy[]
+  }
+}
+
+export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
+  const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
+  const { profile } = useCreditsContext()
+  const router = useRouter()
+
+  const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      member_active_status: profile?.activated ? 'active' : 'not active',
+      event_parameters: {
+        page_group: getGtmGroup(router),
+        position: copy.title,
+        button_name: item.text,
+        info: '',
+      },
+    })
+    if (activeNoteIndex === index) {
+      setActiveNoteIndex(null)
+    } else {
+      setActiveNoteIndex(index)
+      setTimeout(() => {
+        setActiveNoteIndex(null)
+      }, 5000)
+    }
+  }
+
+  return (
+    <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy?.title} />
+      <div className="mt-[24px] grid grid-cols-2 gap-[16px] l:hidden min-md:grid-cols-3 min-xl:grid-cols-4">
+        {copy.benefits.map((item, index) => (
+          <BenefitItem
+            key={index}
+            item={item}
+            handleClick={handleClick}
+            isNoteActive={activeNoteIndex === index}
+            index={index}
+          />
+        ))}
+      </div>
+      <div className="mt-[24px] hidden l:block">
+        <Swiper
+          spaceBetween={16}
+          slidesPerView={2}
+          slidesPerGroup={2}
+          grid={{
+            rows: 2,
+            fill: 'row',
+          }}
+          breakpoints={{
+            768: {
+              slidesPerView: 3,
+              slidesPerGroup: 3,
+            },
+          }}
+          wrapperClass="items-stretch"
+          modules={[Grid, Pagination]}
+          pagination={{
+            clickable: true,
+            el: '#benefits-pagination',
+            renderBullet(index, className) {
+              return `<div class='${className}  !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
+              </div>`
+            },
+          }}
+        >
+          {copy.benefits.map((item, index) => (
+            <SwiperSlide key={index} className={cn('!h-auto', activeNoteIndex === index && '!z-[100]')}>
+              <BenefitItem
+                item={item}
+                handleClick={handleClick}
+                isNoteActive={activeNoteIndex === index}
+                index={index}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div
+          id="benefits-pagination"
+          className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
+          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full"
+        ></div>
+      </div>
+
+      {activeNoteIndex && (
+        <div
+          role="button"
+          tabIndex={0}
+          className="fixed inset-0 z-10"
+          onClick={() => setActiveNoteIndex(null)}
+          onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,216 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+import { cn } from '../../../helpers'
+
+import { CreditsCashCopy, RedeemItem } from './type'
+import { useCreditsContext } from '../context/provider'
+import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
+import { numberFormat } from '../context/utils'
+import { gaTrack } from '../../../helpers/track'
+
+function RedeemableItem({
+  copy,
+  itemData,
+  setRules,
+  className,
+  authCodeActivate,
+}: {
+  copy: CreditsCashCopy
+  itemData: RedeemItem
+  className?: string
+  setRules: (rules: string[]) => void
+  currencyCode: string
+  authCodeActivate: {
+    openAuthCodePopup: Function
+    isSuccess: boolean
+    setOnSuccess: (arg: Function) => void
+    isSendingActivateEmail: boolean
+  }
+}) {
+  const {
+    creditInfo,
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  const { trigger, isMutating } = useRedeemAndBuy()
+
+  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 = () => {
+    if (!isLogin) {
+      openSignUpPopup()
+    } else if (!profile?.activated && !(authCodeActivate.isSendingActivateEmail || authCodeActivate.isSuccess)) {
+      authCodeActivate.openAuthCodePopup()
+      authCodeActivate.setOnSuccess(async () => {
+        const { success, url, error } = await trigger({
+          productVariant: itemData?.productVariant,
+          redeemId: itemData?.config?.redeemId,
+        })
+        if (success) {
+          window.open(url, '_blank')
+        } else {
+          console.error(error)
+        }
+      })
+    } else {
+      try {
+        trigger({
+          productVariant: itemData?.productVariant,
+          redeemId: itemData?.config?.redeemId,
+        })
+      } catch (error) {}
+      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:line-clamp-3 l:h-[56px] 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-[20px]"
+            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] text-[28px] font-bold leading-[1.2] 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 ? 'Insufficient credit' : 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>
+    </div>
+  )
+}
+
+export default RedeemableItem

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

@@ -0,0 +1,102 @@
+import { Container, Heading } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
+
+import RedeemableItem from './RedeemableItem'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import { cn } from '../../../helpers'
+import RulesModal from '../modal/rulesModal'
+import { useProductsByHandles } from '@shopify/hooks/useProductsByHandles'
+import { CreditsCashCopy, RedeemItem } from './type'
+import { Product } from '@shopify/types'
+
+export const CreditsCash = ({
+  copy,
+  className = '',
+  hideTitle = false,
+  cardClassName,
+  authCodeActivate,
+}: {
+  copy: CreditsCashCopy
+  className?: string
+  hideTitle?: boolean
+  cardClassName?: string
+  authCodeActivate: {
+    openAuthCodePopup: Function
+    isSuccess: boolean
+    setOnSuccess: (arg: Function) => void
+    isSendingActivateEmail: boolean
+  }
+}) => {
+  const [rules, setRules] = useState<string | string[]>()
+  const { redeemableList } = useRedeemableList()
+
+  // Temporary variables until proper configuration
+  const locale = 'us'
+  const variantMetafieldIdentifiers: any[] = []
+
+  const { data: productByHandles } = useProductsByHandles({
+    locale,
+    handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],
+    metafieldIdentifiers: {
+      variant: variantMetafieldIdentifiers,
+    },
+  })
+
+  const list = useMemo(() => {
+    return productByHandles?.map((product: Product) => {
+      const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)
+      const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
+
+      return {
+        product,
+        productVariant:
+          product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0],
+        alpcData: {
+          id: alpcData?.id,
+          consumeCredits: alpcData?.consume_credits,
+          remainingInventory: alpcData?.remaining_inventory,
+          isLimited: alpcData?.is_limited,
+          consumeType: alpcData?.consume_type,
+          title: alpcData?.name,
+          desc: alpcData?.note,
+        },
+        config,
+      }
+    }) as unknown as RedeemItem[]
+  }, [productByHandles, copy.list, redeemableList])
+
+  console.log('list', list)
+
+  return (
+    <Container className={cn('bg-[#F5F5F5]', className)}>
+      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
+      <div className="relative mt-[24px] grid grid-cols-4 gap-[16px] md:grid-cols-2 md-xl:grid-cols-3">
+        {list?.map((item, index: number) => (
+          <RedeemableItem
+            key={index}
+            copy={copy}
+            itemData={item}
+            setRules={setRules}
+            className={cardClassName}
+            currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}
+            authCodeActivate={authCodeActivate}
+          />
+        ))}
+      </div>
+
+      {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/creditsCash/type.ts

@@ -0,0 +1,46 @@
+import { ProductVariant, Product } from '@shopify/types'
+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 { cn } from '../../../../helpers/index'
+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>
+  )
+}