@anker-in/campaign-ui 0.2.0 → 0.2.2-beta.1

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

@@ -1,36 +1,35 @@
 import { Button, Text, Picture } from '@anker-in/headless-ui'
 import { useMemo, useState } 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'
+import { formatPrice, numberFormat } from '../context/utils'
+import { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'
+import { useRegistration } from '../../../components/registration'
 
 function RedeemableItem({
   copy,
   itemData,
   setRules,
   className,
-  authCodeActivate,
 }: {
   copy: CreditsCashCopy
   itemData: RedeemItem
   className?: string
   setRules: (rules: string[]) => void
   currencyCode: string
-  authCodeActivate: {
-    openAuthCodePopup: Function
-    isSuccess: boolean
-  }
 }) {
   const {
     creditInfo,
     profile,
     openSignUpPopup,
+    pageCommon,
     gtm: { pageGroup },
   } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand, locale } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [error, setError] = useState<string | null>(null)
   const { trigger, isMutating } = useRedeemAndBuy(
     {},
@@ -78,8 +77,8 @@ function RedeemableItem({
     setError(null)
     if (!isLogin) {
       openSignUpPopup()
-    } else if (!profile?.activated && !authCodeActivate.isSuccess) {
-      authCodeActivate.openAuthCodePopup()
+    } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+      authCodeActivate.open()
     } else {
       trigger({
         productVariant: itemData?.productVariant,
@@ -114,10 +113,14 @@ function RedeemableItem({
     <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]',
+        !rounded && 'rounded-none md:rounded-none',
         className
       )}
     >
-      <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>
+      <a
+        href={`/products/${itemData.product.handle}`}
+        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"
@@ -127,13 +130,13 @@ function RedeemableItem({
             itemData?.productVariant?.image?.url
           }
         ></Picture>
-      </div>
+      </a>
       <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]"
+          className="line-clamp-2 h-[58px] text-[24px] l-xxl:text-[20px] l:text-[16px] leading-[1.2] l:h-[40px] l-xxl:h-[48px]"
         />
         {itemData?.config?.rules?.split('<br>')?.length > 0 && (
           <button
@@ -147,7 +150,7 @@ function RedeemableItem({
                 event_parameters: {
                   page_group: pageGroup,
                   position: copy.title,
-                  button_name: copy?.ruleLabel,
+                  button_name: pageCommon?.ruleLabel,
                   info: itemData?.alpcData?.id?.toString(),
                 },
               })
@@ -160,19 +163,33 @@ function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
-        <div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+
+        <div className="flex flex-wrap 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}`}
+            html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${formatPrice({
+              amount: Number(itemData?.config?.price),
+              currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+              locale: locale,
+            })}`}
             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] "
+            className="ml-[4px] mt-[4px] font-bold leading-none text-[24px] l-xxl:text-[20px] l:text-[16px]"
+          />
+          <Text
+            html={formatPrice({
+              amount: itemData?.productVariant?.price.amount,
+              currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+              locale: locale,
+            })}
+            className="l-xxl:text-[20px] mt-[4px] l:text-[16px] ml-[4px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through"
+            as="p"
           />
         </div>
 
@@ -186,7 +203,7 @@ function RedeemableItem({
             onClick={() => {
               handleRedeem()
             }}
-            title={inSufficientCredit ? copy.insufficientCredits : redeemButtonText}
+            title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
           >
             {redeemButtonText}
           </Button>
@@ -196,8 +213,13 @@ function RedeemableItem({
               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={cn(
+                'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',
+                !rounded && 'rounded-none'
+              )}
+            >
+              <Text as="p" size="2" html={pageCommon?.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>

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

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

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

@@ -4,7 +4,7 @@ import { AlpcConsumeType } from '../context/const'
 type RedeemableItemConfig = {
   title: string
   desc: string
-  price: string
+  price: number
   credit: string
   rules: string
   image: {
@@ -22,11 +22,9 @@ export type CreditsCashCopy = {
     products: { handle: string; sku: string }[]
   })[]
   soldOut: string
-  ruleLabel: string
   unlockRewards: string
   btnRedeem: string
   off: string
-  insufficientCredits: string
 }
 
 export type RedeemItem = {

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

@@ -1,6 +1,6 @@
 import { Heading, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import { cn } from '../../../../helpers/index'
+import { classNames as cn } from '@anker-in/lib'
 import { motion } from 'framer-motion'
 import { type ReactNode, useEffect, useState } from 'react'
 
@@ -34,13 +34,13 @@ export const FaqItem = ({
   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'
+        className="relative flex items-center"
         onClick={() => {
           setExpanded(!expanded)
         }}
-        role='button'
+        role="button"
         tabIndex={0}
-        onKeyDown={(e) => {
+        onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault()
           }
@@ -48,12 +48,12 @@ export const FaqItem = ({
       >
         <Heading
           html={question}
-          as='h3'
+          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]',
+            'relative block flex-1 cursor-pointer pr-[10px] text-[18px] font-bold text-[#1D1D1F] l:text-[16px]'
           )}
         ></Heading>
         {itemRightIconRender ? (
@@ -62,7 +62,7 @@ export const FaqItem = ({
           <ChevronDownIcon
             className={cn(
               'size-[16px] shrink-0 cursor-pointer stroke-[2.5px] transition-all',
-              expanded ? 'rotate-180' : '',
+              expanded ? 'rotate-180' : ''
             )}
           />
         )}
@@ -70,22 +70,22 @@ export const FaqItem = ({
       <motion.div
         initial={false}
         animate={{ height: !expanded ? 0 : 'auto' }}
-        className='overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]'
+        className="overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]"
       >
         {answer?.toString()?.includes('https://www.youtube.com') ? (
           <Text
-            as='div'
+            as="div"
             className={cn('mt-[8px]')}
-            data-ratio='16:9'
+            data-ratio="16:9"
             data-content={answer}
             html={answer?.toString()}
           ></Text>
         ) : (
           <Text
-            as='div'
+            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',
+              'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
             )}
           ></Text>
         )}

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

@@ -1,10 +1,10 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
-import { cn } from '../../../helpers/index'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useMemo, useState } from 'react'
 
 import { FaqItem } from './faqItem/FaqItem'
 
-export type FaqCopy = {
+export type CreditsFaqCopy = {
   title: string
   subTitle: string
   learnMore: {
@@ -17,8 +17,10 @@ export type FaqCopy = {
     answer: string
   }[]
 }
-export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
+export const CreditsFaq = ({ copy, id }: { copy: CreditsFaqCopy; id?: string }) => {
   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])
@@ -33,7 +35,7 @@ export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
   }, [faqList, categoryList.length, activeTab])
 
   return (
-    <Container className="bg-[#F5F5F7]" id="faq">
+    <Container id={id} className="bg-[#F5F5F7]">
       {title && <Heading as="h2" size="4" html={copy?.title} />}
       {subTitle && (
         <div className="mt-[8px] flex flex-row">
@@ -43,7 +45,7 @@ export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
       {/* faq-nav */}
       <Tabs
         align="left"
-        shape="rounded"
+        shape={rounded ? 'rounded' : 'square'}
         className="mt-[24px]"
         value={activeTab.toString()}
         onValueChange={value => {

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

@@ -2,33 +2,29 @@ import { Button, Container, Text } from '@anker-in/headless-ui'
 
 import { useCallback, useState } from 'react'
 import { useCreditsContext } from '../context/provider'
-import { cn } from '../../../helpers'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
-import MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'
-import { type MyActivitiesMetafields } from '../modal/activitiesModal'
-import { gaNormalClick } from '../../../helpers/track'
+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 interface InfoCardProps {
-  data: {
-    balanceLabel: string
-    comingSoonLabel: string
-    comingSoonTips: string
-    buttons: ButtonConfig[]
-    pointUnit: string
-    infoIcon: string
-    myActivities: MyActivitiesMetafields
-    myRewards: MyRewardsMetafields
-  }
+export type CreditsInfoCardCopy = {
+  balanceLabel: string
+  comingSoonLabel: string
+  comingSoonTips: string
+  buttons: ButtonConfig[]
 }
-export function CreditsInfoCard({ data }: InfoCardProps) {
+
+export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?: string }) {
   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 })
@@ -45,16 +41,15 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
     }
   }, [])
 
-  const { creditInfo } = useCreditsContext()
-
   return (
-    <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
+    <Container asChild id={id} 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]'
+          'min-xl:px-[100px]',
+          !rounded && 'rounded-none'
         )}
         style={{
           background:
@@ -73,23 +68,23 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                 'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'
               )}
             >
-              {data.balanceLabel}
+              {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]">{data?.pointUnit}</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={data.comingSoonLabel} />
-              {data.comingSoonTips && (
+              <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={data?.infoIcon}
+                    html={pageCommon?.infoIcon}
                     className="size-[18px] cursor-pointer [&_svg]:size-full"
                     onClick={() => {
                       if (hover) {
@@ -108,9 +103,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                       hover ? 'block' : 'hidden'
                     )}
                   >
-                    <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
-                      <Text size="2" html={data.comingSoonTips} className="desktop:text-[18px]" />
-                      <div className="absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                    <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>
@@ -120,7 +125,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
               <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]">{data?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
         </div>
@@ -129,7 +134,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
             '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'
           )}
         >
-          {data.buttons?.map((item, index) => (
+          {copy.buttons?.map((item, index) => (
             <Button
               key={index}
               variant={index === 0 ? 'secondary' : 'primary'}
@@ -144,19 +149,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
           ))}
         </div>
 
-        {data?.myActivities && (
+        {pageCommon?.activitiesModal && (
           <ActivitiesModal
             isOpen={openActivities}
-            data={data?.myActivities}
+            data={pageCommon?.activitiesModal}
             onClose={() => {
               setOpenActivities(false)
             }}
           />
         )}
-        {data?.myRewards && (
+        {pageCommon?.rewardsModal && (
           <MyRewardsModal
             isOpen={openRewards}
-            data={data?.myRewards}
+            data={pageCommon?.rewardsModal}
             onClose={() => {
               setOpenRewards(false)
             }}