@anker-in/campaign-ui 0.2.0 → 0.2.1

package/dist/esm/templates/index.js

@@ -0,0 +1,2 @@
+export*from"./credits";
+//# sourceMappingURL=index.js.map

package/dist/esm/templates/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/templates/index.ts"],
+  "sourcesContent": ["export * from './credits'\n"],
+  "mappings": "AAAA,WAAc",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -44,6 +44,7 @@
     "@babel/preset-typescript": "^7.24.6",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
+    "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "babel-jest": "^29.7.0",
@@ -59,8 +60,7 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "crypto-js": "^4.1.1"
   },
   "dependencies": {
     "@copilotkit/react-core": "1.1.2",
@@ -78,6 +78,7 @@
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.7",
     "gsap": "^3.12.5",
     "monaco-editor": "^0.52.0",
@@ -87,7 +88,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "@anker-in/headless-ui": "1.0.26",
-    "@anker-in/lib": "1.1.0"
+    "@anker-in/lib": "1.1.1"
   },
   "publishConfig": {
     "access": "public",

package/src/components/chat/index.tsx

@@ -8,7 +8,7 @@ import Messages from './messages'
 import ResponseButton from './response'
 import Suggestions from './suggestions'
 import { CopilotAction } from './action'
-import fetcher from '../../helpers/fetcher'
+import { fetcher } from '@anker-in/lib'
 
 export interface ChatProps {
   title: string

package/src/components/credits/context/hooks/useRedeemAndBuy.ts

@@ -3,7 +3,6 @@ import { useRedeemCoupon } from './useRedeemCoupon'
 import type { ProductVariant } from '@anker-in/lib'
 import { useCreditsContext } from '../provider'
 import { useBuyNow } from '@anker-in/lib'
-import { AlpcErrorCode } from '../const'
 
 export const useRedeemAndBuy = (
   _: any,
@@ -39,7 +38,6 @@ export const useRedeemAndBuy = (
         user_id: profile?.user_id,
         rule_id: arg.redeemId,
       })
-      console.log('res', res)
       if (res && res?.data?.coupon_code) {
         buyNow({
           discountCodes: [res.data.coupon_code],

package/src/components/credits/context/hooks/useSubscribed.ts

@@ -2,9 +2,8 @@ import { useMemo } from 'react'
 
 import { TaskSubType } from '../const'
 import useActivities from './useActivities'
-import { useSubscriptions } from './useSubscriptions'
 import { useCreditsContext } from '../provider'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, useSubscriptions } from '@anker-in/lib'
 
 export const useSubscribed = () => {
   const { profile } = useCreditsContext()

package/src/components/credits/context/provider.tsx

@@ -1,8 +1,9 @@
-import React, { createContext, useContext } from 'react'
+import { createContext, PropsWithChildren, useContext } from 'react'
 import type { DTC_TASK_TYPE } from './const'
 import type { CreditInfoResponse } from './response'
+import { CreditsPageCommon } from '../type'
 
-export const CreditsContext = createContext<{
+type Context = {
   profile: any
   isLoadingProfile: boolean
   removeProfile: () => void
@@ -16,7 +17,10 @@ export const CreditsContext = createContext<{
   gtm: {
     pageGroup: string
   }
-}>({
+  pageCommon: CreditsPageCommon
+}
+
+export const CreditsContext = createContext<Context>({
   profile: null,
   isLoadingProfile: false,
   taskIdToTypeMapping: {},
@@ -29,6 +33,7 @@ export const CreditsContext = createContext<{
   gtm: {
     pageGroup: '',
   },
+  pageCommon: {},
 })
 
 export function CreditsProvider({
@@ -44,22 +49,8 @@ export function CreditsProvider({
   customerLoading,
   fetchCreditInfo,
   gtm,
-}: {
-  children: React.ReactNode
-  profile: any
-  removeProfile: () => void
-  isLoadingProfile: boolean
-  openSignInPopup: () => void
-  openSignUpPopup: () => void
-  taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
-  creditInfo?: CreditInfoResponse
-  customer: any
-  fetchCreditInfo: (user_id: string) => void
-  customerLoading: boolean
-  gtm: {
-    pageGroup: string
-  }
-}) {
+  pageCommon,
+}: PropsWithChildren<Context>) {
   return (
     <CreditsContext.Provider
       value={{
@@ -74,6 +65,7 @@ export function CreditsProvider({
         customer,
         customerLoading,
         gtm,
+        pageCommon,
       }}
     >
       {children}
@@ -82,5 +74,9 @@ export function CreditsProvider({
 }
 
 export function useCreditsContext() {
-  return useContext(CreditsContext)
+  const context = useContext(CreditsContext)
+  if (!context) {
+    throw new Error('useCreditsContext must be used within a CreditsProvider')
+  }
+  return context
 }

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

@@ -6,25 +6,23 @@ type Img = {
   url: string
   alt: string
 }
-type BannerProps = {
-  copy: {
-    pcImg: Img
-    laptopImg: Img
-    mobileImg: Img
-    joinNow: string
-    loginIn: string
-    login: {
-      title: string
-      description: string
-    }
-    unLogin: {
-      title: string
-      description: string
-    }
+export type CreditsBannerCopy = {
+  pcImg: Img
+  laptopImg: Img
+  mobileImg: Img
+  joinNow: string
+  loginIn: string
+  login: {
+    title: string
+    description: string
+  }
+  unLogin: {
+    title: string
+    description: string
   }
 }
 
-export function CreditsBanner({ copy }: BannerProps) {
+export function CreditsBanner({ copy }: { copy: CreditsBannerCopy }) {
   const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()
   const isLogin = profile ? Object.keys(profile).length !== 0 : false
 

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

@@ -1,5 +1,5 @@
 import { Heading, Picture, Text } from '@anker-in/headless-ui'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import IconInfo from './iconInfo'
 
 export interface BenefitItemCopy {
@@ -22,9 +22,14 @@ const BenefitItem = ({
   isNoteActive: boolean
   index: number
 }) => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   return (
     <div
-      className="relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      className={cn(
+        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',
+        !rounded && 'rounded-none'
+      )}
       style={{
         background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
       }}
@@ -56,9 +61,19 @@ const BenefitItem = ({
                   isNoteActive ? 'block' : 'hidden'
                 )}
               >
-                <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
+                <div
+                  className={cn(
+                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                    !rounded && 'rounded-none'
+                  )}
+                >
                   <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
+                    className={cn(
+                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                      !rounded && 'rounded-none'
+                    )}
+                  />
                 </div>
               </div>
             </div>

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

@@ -9,20 +9,16 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 
 import BenefitItem, { type BenefitItemCopy } from './benefitItem'
 import { useCreditsContext } from '../context/provider'
-import { gaTrack } from '../../../helpers/track'
-import { cn } from '../../../helpers/utils'
+import { gaTrack, classNames as cn } from '@anker-in/lib'
 
-interface CreditsBenefitsProps {
-  copy: {
-    title: string
-    benefits: BenefitItemCopy[]
-  }
+export type CreditsBenefitsCopy = {
+  title: string
+  benefits: BenefitItemCopy[]
 }
 
-export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
+export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
   const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
   const { profile, gtm } = useCreditsContext()
-
   const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
     gaTrack({
       event: 'ga4Event',
@@ -80,7 +76,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
             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'>
+              return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
               </div>`
             },
           }}

package/src/components/credits/creditsCash/{index.tsx → CreditsCash.tsx}

@@ -3,30 +3,16 @@ 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 { useHeadlessContext, useProductsByHandles } from '@anker-in/lib'
+import { useProductsByHandles } from '@anker-in/lib'
 import { CreditsCashCopy, RedeemItem } from './type'
-import { Product } from '@anker-in/lib'
+import { Product, classNames as cn } from '@anker-in/lib'
+import { useCreditsContext } from '../context/provider'
 
-export const CreditsCash = ({
-  copy,
-  className = '',
-  hideTitle = false,
-  cardClassName,
-  authCodeActivate,
-}: {
-  copy: CreditsCashCopy
-  className?: string
-  hideTitle?: boolean
-  cardClassName?: string
-  authCodeActivate: {
-    openAuthCodePopup: Function
-    isSuccess: boolean
-  }
-}) => {
+export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
   const [rules, setRules] = useState<string | string[]>()
   const { redeemableList } = useRedeemableList()
+  const { pageCommon } = useCreditsContext()
 
   const variantMetafieldIdentifiers: any[] = []
 
@@ -63,11 +49,9 @@ export const CreditsCash = ({
       .filter(Boolean) 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} />}
+    <Container className={cn('bg-[#F5F5F5]')}>
+      <Heading as="h2" size="4" html={copy.title} />
       <div className="relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3">
         {list?.map((item, index: number) => (
           <RedeemableItem
@@ -75,9 +59,7 @@ export const CreditsCash = ({
             copy={copy}
             itemData={item}
             setRules={setRules}
-            className={cardClassName}
             currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}
-            authCodeActivate={authCodeActivate}
           />
         ))}
       </div>
@@ -91,7 +73,7 @@ export const CreditsCash = ({
           titleClassName="border-b-transparent h-[56px]"
           rules={rules}
           scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
-          title={copy?.ruleLabel}
+          title={pageCommon?.ruleLabel}
           ruleClassName="text-[#1d1d1f] font-bold"
         />
       )}

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,6 +113,7 @@ 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',
         className
       )}
     >
@@ -147,7 +147,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,16 +160,29 @@ function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
-        <div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+        <Text
+          html={formatPrice({
+            amount: itemData?.productVariant?.price.amount,
+            currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+            locale: locale,
+          })}
+          className="mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]"
+          as="p"
+        />
+        <div className="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}`}
+            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] "
@@ -186,7 +199,7 @@ function RedeemableItem({
             onClick={() => {
               handleRedeem()
             }}
-            title={inSufficientCredit ? copy.insufficientCredits : redeemButtonText}
+            title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
           >
             {redeemButtonText}
           </Button>
@@ -196,8 +209,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 }: { 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])
@@ -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 => {