@anker-in/campaign-ui 0.2.1 → 0.2.2-beta.2

package/src/components/credits/creditsNavigation/CreditsNavigation.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { classNames as cn } from '@anker-in/lib'
+import { Container } from '@anker-in/headless-ui'
+import { CreditsNavigationCopy } from './type'
+
+export const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) => {
+  const [activeId, setActiveId] = useState<string>('')
+  const observerRef = useRef<IntersectionObserver | null>(null)
+
+  // 平滑滚动到目标模块
+  const scrollToSection = (targetId: string) => {
+    const element = document.getElementById(targetId)
+    if (element) {
+      const navHeight = 56 // 导航栏高度
+      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
+      const offsetPosition = elementPosition - navHeight
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  // 使用 Intersection Observer 监听模块可见性
+  const setupObserver = useCallback(() => {
+    // 清理之前的 observer
+    if (observerRef.current) {
+      observerRef.current.disconnect()
+    }
+
+    // 计算每个元素在视口中的可见面积
+    const visibilityMap = new Map<string, number>()
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach(entry => {
+        const id = entry.target.id
+        if (!id) return
+
+        // 计算可见面积
+        const visibleHeight = entry.intersectionRect.height
+        const visibleWidth = entry.intersectionRect.width
+        const visibleArea = visibleHeight * visibleWidth
+
+        visibilityMap.set(id, entry.isIntersecting ? visibleArea : 0)
+      })
+
+      // 找出可见面积最大的元素
+      let maxArea = 0
+      let maxId = ''
+
+      visibilityMap.forEach((area, id) => {
+        if (area > maxArea) {
+          maxArea = area
+          maxId = id
+        }
+      })
+
+      if (maxId && maxId !== activeId) {
+        setActiveId(maxId)
+      }
+    }
+
+    // 创建新的 observer
+    observerRef.current = new IntersectionObserver(observerCallback, {
+      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+      rootMargin: '-56px 0px 0px 0px', // 考虑导航栏高度
+    })
+
+    // 观察所有目标元素
+    copy.items.forEach(item => {
+      const element = document.getElementById(item.targetId)
+      if (element && observerRef.current) {
+        observerRef.current.observe(element)
+      }
+    })
+  }, [copy.items, activeId])
+
+  useEffect(() => {
+    setupObserver()
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect()
+      }
+    }
+  }, [setupObserver])
+
+  return (
+    <nav className={cn('sticky top-0 z-50 bg-white')}>
+      <Container asChild>
+        <div
+          className={cn(
+            'md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]',
+            'md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]'
+          )}
+        >
+          <ul className={cn('flex items-end gap-[24px] pt-[16px] md:gap-[16px] md:pr-[16px]')}>
+            {copy.items.map((item, index) => {
+              const isActive = activeId === item.targetId
+              return (
+                <li key={index} className={cn('md:flex-shrink-0')}>
+                  <button
+                    onClick={() => scrollToSection(item.targetId)}
+                    className={cn(
+                      'pb-[16px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]',
+                      'transition-all duration-200 relative border-b-4 whitespace-nowrap',
+                      isActive
+                        ? 'text-[#080a0f] border-brand-1'
+                        : 'text-[#4a4c56] hover:text-[#080a0f] border-transparent'
+                    )}
+                  >
+                    {item.label}
+                  </button>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </Container>
+    </nav>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { CreditsNavigation } from './CreditsNavigation'
+export type { CreditsNavigationCopy, NavigationItem } from './type'

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

@@ -0,0 +1,10 @@
+// 导航项配置
+export type NavigationItem = {
+  label: string
+  targetId: string // 对应组件的DOM id
+}
+
+// 导航组件配置
+export type CreditsNavigationCopy = {
+  items: NavigationItem[]
+}

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

@@ -1,4 +1,4 @@
-import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
@@ -13,19 +13,22 @@ import { RedeemableItem } from './RedeemableItem'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
 import { useRegistration } from '../../../components/registration'
+import { numberFormat } from '../context/utils'
 
-export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
+export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {
   const {
     profile,
     openSignUpPopup,
     gtm: { pageGroup },
     pageCommon,
+    creditInfo,
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isLogin = Object.keys(profile || {}).length > 0
+  const isActivated = profile?.activated
 
   const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)
 
@@ -62,6 +65,8 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
         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?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null
         if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
         return {
           alpc: alpcList.find(alpcItem => alpcItem.id === item.id),
@@ -83,9 +88,18 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
   )
 
   return (
-    <Container className={classNames('relative bg-[#F5F5F7]')}>
+    <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>
       <Heading as="h2" size="4" html={copy.title} />
 
+      {/* 可用积分展示 */}
+      {isLogin && isActivated && (
+        <Text
+          html={copy.availableCredits?.replace('$credits', numberFormat(creditInfo?.available_credit || 0).toString())}
+          className="mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]"
+          as="p"
+        />
+      )}
+
       <Tabs
         shape={rounded ? 'rounded' : 'square'}
         align="left"

package/src/components/credits/creditsRedeemList/RedeemProductModal/Error.tsx

@@ -6,7 +6,7 @@ type ErrorProps = {
 
 export const Error = ({ errorInfo }: ErrorProps) => {
   return (
-    <div className="mx-auto max-w-[404px] text-[16px] text-black/40">
+    <div className="mx-auto max-w-[404px] text-[16px] text-black/40 py-[56px]">
       <Picture className="mx-auto mb-[12px] h-[140px] w-[220px]" source={errorInfo.imageUrl} />
       <Text as="div" className="mt-[16px] text-center" html={errorInfo.message} />
     </div>

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

@@ -1,5 +1,6 @@
 export type CreditsRedeemListCopy = {
   title: string
+  availableCredits: string
   unlockRewards: string
   btnRedeem: string
   list: {

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

@@ -11,7 +11,7 @@ import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
 
-export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
+export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
@@ -91,7 +91,7 @@ export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCr
   }, [actions, copy.list, isLogin])
 
   return (
-    <Container id="ways-to-get-credits" className=" bg-[#F5F5F7] [&>div]:l:!px-0">
+    <Container id={id} className=" bg-[#F5F5F7] [&>div]:l:!px-0">
       <div
         className={cn(
           'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',

package/src/templates/{credits.tsx → Credits.tsx}

@@ -4,23 +4,30 @@ import { RegistrationProvider } from '../components/registration/context/provide
 import { DTC_TASK_TYPE } from '../components/credits/context/const'
 import { CreditsProvider } from '../components/credits/context/provider'
 import { CreditsPageCommon } from '../components/credits/type'
+import { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'
 
 import { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'
 import { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'
 import { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'
 import { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'
+import { CreditsAnkersolixTask, CreditsAnkersolixTaskCopy } from '../components/credits/creditsAnkersolixTask'
 import { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
 import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
+import { CreditsMemberPrice, CreditsMemberPriceCopy } from '../components/credits/creditsMemberPrice'
 import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
+import { CreditsNavigation, CreditsNavigationCopy } from '../components/credits/creditsNavigation'
 import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
 
 export enum ComponentKey {
+  Navigation = 'creditsNavigation',
   Banner = 'creditsBanner',
   InfoCard = 'creditsInfoCard',
   Benefits = 'creditsBenefits',
   WaysToGetCredits = 'creditsWaysToGetCredits',
+  AnkersolixTask = 'creditsAnkersolixTask',
   RedeemList = 'creditsRedeemList',
   SpendCreditsLikeCash = 'creditsCash',
+  MemberPrice = 'creditsMemberPrice',
   Faqs = 'creditsFaq',
 }
 export type CreditsTemplateProps = {
@@ -30,17 +37,24 @@ export type CreditsTemplateProps = {
       authCodeActivate: AuthCodeActivateCopy
     }
     taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+    memberPriceDiscount?: FunctionMemberPriceConfig[]
+  }
+  creditsConfig?: {
+    alpcBrand?: string
   }
   pageConfig: {
     order: ComponentKey[]
     common: CreditsPageCommon
     components: {
+      [ComponentKey.Navigation]?: CreditsNavigationCopy
       [ComponentKey.Banner]?: CreditsBannerCopy
       [ComponentKey.InfoCard]?: CreditsInfoCardCopy
       [ComponentKey.Benefits]?: CreditsBenefitsCopy
       [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy
+      [ComponentKey.AnkersolixTask]?: CreditsAnkersolixTaskCopy
       [ComponentKey.RedeemList]?: CreditsRedeemListCopy
       [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy
+      [ComponentKey.MemberPrice]?: CreditsMemberPriceCopy
       [ComponentKey.Faqs]?: CreditsFaqCopy
     }
   }
@@ -65,11 +79,14 @@ export type CreditsTemplateProps = {
 export const CreditsTemplate = ({
   headlessConfig,
   siteConfig,
+  creditsConfig,
   userContext,
   pageConfig,
   registrationContext,
   gtm,
 }: CreditsTemplateProps) => {
+
+  console.log('siteConfig', siteConfig)
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
       <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>
@@ -86,21 +103,30 @@ export const CreditsTemplate = ({
           customerLoading={userContext?.customerLoading}
           gtm={gtm}
           pageCommon={pageConfig.common}
+          memberPriceDiscount={siteConfig.memberPriceDiscount}
+          alpcBrand={creditsConfig?.alpcBrand}
         >
+          {/* 导航组件 - 固定位置，不参与 order 排序 */}
+          {pageConfig.components[ComponentKey.Navigation] && (
+            <CreditsNavigation copy={pageConfig.components[ComponentKey.Navigation]} />
+          )}
           <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
             {pageConfig.order.map(key => {
+              // 跳过导航组件，因为它已经固定渲染在上方
+              if (key === ComponentKey.Navigation) return null
               const componentCopy = pageConfig.components?.[key]
               if (!componentCopy) return null
               return (
                 <>
-                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}
+                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} id={key} />}
                   {key === ComponentKey.InfoCard && userContext?.profile && (
-                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
+                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} id={key} />
                   )}
-                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}
+                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />}
                   {key === ComponentKey.WaysToGetCredits && (
                     <CreditsWaysToGetCredits
                       copy={componentCopy as CreditsWaysToGetCreditsCopy}
+                      id={key}
                       classNames={
                         headlessConfig.brand === 'anker'
                           ? {
@@ -115,11 +141,16 @@ export const CreditsTemplate = ({
                       }
                     />
                   )}
-                  {key === ComponentKey.RedeemList && (
-                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
+                  {key === ComponentKey.AnkersolixTask && (
+                    <CreditsAnkersolixTask
+                      copy={componentCopy as CreditsAnkersolixTaskCopy}
+                      id={key}
+                    />
                   )}
-                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}
-                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}
+                  {key === ComponentKey.RedeemList && <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />}
+                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />}
+                  {key === ComponentKey.MemberPrice && <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />}
+                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} id={key} />}
                   {key !== ComponentKey.Banner && (
                     <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
                   )}

package/src/templates/index.ts

@@ -1 +1 @@
-export * from './credits'
+export * from './Credits'

package/dist/cjs/components/credits/const.d.ts

@@ -1 +0,0 @@
-export declare const roundedBrands: string[];

package/dist/cjs/components/credits/const.js

@@ -1,2 +0,0 @@
-"use strict";var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var t=Object.prototype.hasOwnProperty;var a=(d,o)=>{for(var n in o)r(d,n,{get:o[n],enumerable:!0})},f=(d,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!t.call(d,e)&&e!==n&&r(d,e,{get:()=>o[e],enumerable:!(s=u(o,e))||s.enumerable});return d};var p=d=>f(r({},"__esModule",{value:!0}),d);var y={};a(y,{roundedBrands:()=>x});module.exports=p(y);const x=["eufy","soundcore"];
-//# sourceMappingURL=const.js.map

package/dist/cjs/components/credits/const.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/credits/const.ts"],
-  "sourcesContent": ["export const roundedBrands = ['eufy', 'soundcore']\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAO,MAAME,EAAgB,CAAC,OAAQ,WAAW",
-  "names": ["const_exports", "__export", "roundedBrands", "__toCommonJS"]
-}

package/dist/cjs/components/credits/creditsBenefits/benefitItem.js

@@ -1,2 +0,0 @@
-"use strict";var c=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var n in o)s(e,n,{get:o[n],enumerable:!0})},p=(e,o,n,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of u(o))!v.call(e,l)&&l!==n&&s(e,l,{get:()=>o[l],enumerable:!(i=f(o,l))||i.enumerable});return e};var F=(e,o,n)=>(n=e!=null?c(b(e)):{},p(o||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),N=e=>p(s({},"__esModule",{value:!0}),e);var k={};g(k,{default:()=>D});module.exports=N(k);var t=require("react/jsx-runtime"),d=require("@anker-in/headless-ui"),a=require("@anker-in/lib"),m=F(require("./iconInfo"));const h=({item:e,handleClick:o,isNoteActive:n,index:i})=>{const{brand:l}=(0,a.useHeadlessContext)(),r=a.ROUNDED_BRANDS.includes(l);return(0,t.jsx)("div",{className:(0,a.classNames)("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!r&&"rounded-none"),style:{background:"linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)"},children:(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)(d.Picture,{className:"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0",alt:e.icon?.alt,source:e.icon?.url}),(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)(d.Heading,{html:e.text,size:"2",className:"break-all"}),e.note&&(0,t.jsxs)("div",{role:"button",tabIndex:0,onKeyDown:x=>{(x.key==="Enter"||x.key===" ")&&x.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>o({item:e,index:i}),children:[(0,t.jsx)(m.default,{}),(0,t.jsx)("div",{className:(0,a.classNames)("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",n?"block":"hidden"),children:(0,t.jsxs)("div",{className:(0,a.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!r&&"rounded-none"),children:[(0,t.jsx)(d.Text,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),(0,t.jsx)("div",{className:(0,a.classNames)("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!r&&"rounded-none")})]})})]})]}),e.tag&&(0,t.jsx)(d.Text,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var D=h;
-//# sourceMappingURL=benefitItem.js.map

package/dist/cjs/components/credits/creditsBenefits/benefitItem.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/credits/creditsBenefits/benefitItem.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport IconInfo from './iconInfo'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n}) => {\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={{\n        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',\n      }}\n    >\n      <div className=\"flex flex-col\">\n        <Picture\n          className=\"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0\"\n          alt={item.icon?.alt}\n          source={item.icon?.url}\n        />\n        <div className=\"flex items-center\">\n          <Heading html={item.text} size=\"2\" className=\"break-all\" />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BArCRC,EAAuC,iCACvCC,EAAqE,yBACrEC,EAAqB,yBAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,CACF,IAKM,CACJ,KAAM,CAAE,MAAAC,CAAM,KAAI,sBAAmB,EAC/BC,EAAU,iBAAe,SAASD,CAAK,EAC7C,SACE,OAAC,OACC,aAAW,EAAAE,YACT,8HACA,CAACD,GAAW,cACd,EACA,MAAO,CACL,WAAY,4EACd,EAEA,oBAAC,OAAI,UAAU,gBACb,oBAAC,WACC,UAAU,6EACV,IAAKL,EAAK,MAAM,IAChB,OAAQA,EAAK,MAAM,IACrB,KACA,QAAC,OAAI,UAAU,oBACb,oBAAC,WAAQ,KAAMA,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,SACJ,QAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWO,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMN,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,oBAAC,EAAAK,QAAA,EAAS,KACV,OAAC,OACC,aAAW,EAAAF,YACT,qGACAJ,EAAe,QAAU,QAC3B,EAEA,oBAAC,OACC,aAAW,EAAAI,YACT,0FACA,CAACD,GAAW,cACd,EAEA,oBAAC,QAAK,GAAG,IAAI,KAAK,IAAI,KAAML,EAAK,KAAM,UAAU,sBAAsB,KACvE,OAAC,OACC,aAAW,EAAAM,YACT,mHACA,CAACD,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCL,EAAK,QAAO,OAAC,QAAK,GAAG,MAAM,KAAMA,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOP,EAAQM",
-  "names": ["benefitItem_exports", "__export", "benefitItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_lib", "import_iconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "brand", "rounded", "cn", "e", "IconInfo"]
-}

package/dist/cjs/templates/credits.js

@@ -1,2 +0,0 @@
-"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var L=(r,i)=>{for(var t in i)a(r,t,{get:i[t],enumerable:!0})},S=(r,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of u(i))!B.call(r,d)&&d!==t&&a(r,d,{get:()=>i[d],enumerable:!(n=v(i,d))||n.enumerable});return r};var F=r=>S(a({},"__esModule",{value:!0}),r);var R={};L(R,{ComponentKey:()=>h,CreditsTemplate:()=>K});module.exports=F(R);var e=require("react/jsx-runtime"),p=require("@anker-in/lib"),C=require("../components/registration/context/provider"),m=require("../components/credits/context/provider"),f=require("../components/credits/creditsBanner"),y=require("../components/credits/creditsInfoCard"),c=require("../components/credits/creditsBenefits"),l=require("../components/credits/creditsWaysToGetCredits"),g=require("../components/credits/creditsRedeemList"),T=require("../components/credits/creditsCash"),P=require("../components/credits/creditsFaq"),h=(o=>(o.Banner="creditsBanner",o.InfoCard="creditsInfoCard",o.Benefits="creditsBenefits",o.WaysToGetCredits="creditsWaysToGetCredits",o.RedeemList="creditsRedeemList",o.SpendCreditsLikeCash="creditsCash",o.Faqs="creditsFaq",o))(h||{});const K=({headlessConfig:r,siteConfig:i,userContext:t,pageConfig:n,registrationContext:d,gtm:I})=>(0,e.jsx)(p.HeadlessProvider,{headlessConfig:r,children:(0,e.jsx)(C.RegistrationProvider,{copy:i.registrationsSettings,email:t?.profile?.email,children:(0,e.jsx)(m.CreditsProvider,{profile:t?.profile,removeProfile:t?.removeProfile,isLoadingProfile:t?.isLoadingProfile,openSignInPopup:d.openSignInPopup,openSignUpPopup:d.openSignUpPopup,creditInfo:t?.creditInfo,taskIdToTypeMapping:i.taskIdToTypeMapping,customer:t?.customer,fetchCreditInfo:t?.fetchCreditInfo,customerLoading:t?.customerLoading,gtm:I,pageCommon:n.common,children:(0,e.jsx)("div",{className:(0,p.classNames)("bg-[#f5f5f7] leading-[1.2]"),children:n.order.map(s=>{const o=n.components?.[s];return o?(0,e.jsxs)(e.Fragment,{children:[s==="creditsBanner"&&(0,e.jsx)(f.CreditsBanner,{copy:o}),s==="creditsInfoCard"&&t?.profile&&(0,e.jsx)(y.CreditsInfoCard,{copy:o}),s==="creditsBenefits"&&(0,e.jsx)(c.CreditsBenefits,{copy:o}),s==="creditsWaysToGetCredits"&&(0,e.jsx)(l.CreditsWaysToGetCredits,{copy:o,classNames:r.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),s==="creditsRedeemList"&&(0,e.jsx)(g.CreditsRedeemList,{copy:o}),s==="creditsCash"&&(0,e.jsx)(T.CreditsCash,{copy:o}),s==="creditsFaq"&&(0,e.jsx)(P.CreditsFaq,{copy:o}),s!=="creditsBanner"&&(0,e.jsx)("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});
-//# sourceMappingURL=credits.js.map

package/dist/cjs/templates/credits.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/templates/credits.tsx"],
-  "sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\nimport { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'\n\nexport enum ComponentKey {\n  Banner = 'creditsBanner',\n  InfoCard = 'creditsInfoCard',\n  Benefits = 'creditsBenefits',\n  WaysToGetCredits = 'creditsWaysToGetCredits',\n  RedeemList = 'creditsRedeemList',\n  SpendCreditsLikeCash = 'creditsCash',\n  Faqs = 'creditsFaq',\n}\nexport type CreditsTemplateProps = {\n  headlessConfig: HeadlessConfig\n  siteConfig: {\n    registrationsSettings: {\n      authCodeActivate: AuthCodeActivateCopy\n    }\n    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n  }\n  pageConfig: {\n    order: ComponentKey[]\n    common: CreditsPageCommon\n    components: {\n      [ComponentKey.Banner]?: CreditsBannerCopy\n      [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n      [ComponentKey.Benefits]?: CreditsBenefitsCopy\n      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n      [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n      [ComponentKey.Faqs]?: CreditsFaqCopy\n    }\n  }\n  userContext: {\n    profile: any\n    removeProfile: () => void\n    isLoadingProfile: boolean\n    creditInfo: any\n    customer: any\n    customerLoading: boolean\n    fetchCreditInfo: () => void\n  }\n  registrationContext: {\n    openSignUpPopup: () => void\n    openSignInPopup: () => void\n  }\n  gtm: {\n    pageGroup: string\n  }\n}\n\nexport const CreditsTemplate = ({\n  headlessConfig,\n  siteConfig,\n  userContext,\n  pageConfig,\n  registrationContext,\n  gtm,\n}: CreditsTemplateProps) => {\n  return (\n    <HeadlessProvider headlessConfig={headlessConfig}>\n      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n        <CreditsProvider\n          profile={userContext?.profile}\n          removeProfile={userContext?.removeProfile}\n          isLoadingProfile={userContext?.isLoadingProfile}\n          openSignInPopup={registrationContext.openSignInPopup}\n          openSignUpPopup={registrationContext.openSignUpPopup}\n          creditInfo={userContext?.creditInfo}\n          taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n          customer={userContext?.customer}\n          fetchCreditInfo={userContext?.fetchCreditInfo}\n          customerLoading={userContext?.customerLoading}\n          gtm={gtm}\n          pageCommon={pageConfig.common}\n        >\n          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n            {pageConfig.order.map(key => {\n              const componentCopy = pageConfig.components?.[key]\n              if (!componentCopy) return null\n              return (\n                <>\n                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}\n                  {key === ComponentKey.InfoCard && userContext?.profile && (\n                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n                  )}\n                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}\n                  {key === ComponentKey.WaysToGetCredits && (\n                    <CreditsWaysToGetCredits\n                      copy={componentCopy as CreditsWaysToGetCreditsCopy}\n                      classNames={\n                        headlessConfig.brand === 'anker'\n                          ? {\n                              subtitle: 'text-white',\n                              equalCreditsText:\n                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',\n                            }\n                          : {\n                              subtitle: 'text-[#D1D1D1]',\n                              equalCreditsText: 'text-[#F6EAD0]',\n                            }\n                      }\n                    />\n                  )}\n                  {key === ComponentKey.RedeemList && (\n                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n                  )}\n                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}\n                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}\n                  {key !== ComponentKey.Banner && (\n                    <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n                  )}\n                </>\n              )\n            })}\n          </div>\n        </CreditsProvider>\n      </RegistrationProvider>\n    </HeadlessProvider>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,oBAAAC,IAAA,eAAAC,EAAAJ,GA8FgB,IAAAK,EAAA,6BA9FhBC,EAA6D,yBAC7DC,EAAqC,uDAGrCA,EAAgC,kDAGhCC,EAAiD,+CACjDC,EAAqD,iDACrDC,EAAqD,iDACrDC,EAAqE,yDACrEC,EAAyD,mDACzDC,EAA6C,6CAC7CC,EAA2C,4CAG/BZ,OACVA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,WAAa,oBACbA,EAAA,qBAAuB,cACvBA,EAAA,KAAO,aAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAY,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,OAEI,OAAC,oBAAiB,eAAgBL,EAChC,mBAAC,wBAAqB,KAAMC,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,mBAAC,mBACC,QAASA,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,mBAAC,OAAI,aAAW,cAAW,4BAA4B,EACpD,SAAAA,EAAW,MAAM,IAAIG,GAAO,CAC3B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAG,EACjD,OAAKC,KAEH,oBACG,UAAAD,IAAQ,oBAAuB,OAAC,iBAAc,KAAMC,EAAoC,EACxFD,IAAQ,mBAAyBJ,GAAa,YAC7C,OAAC,mBAAgB,KAAMK,EAAsC,EAE9DD,IAAQ,sBAAyB,OAAC,mBAAgB,KAAMC,EAAsC,EAC9FD,IAAQ,8BACP,OAAC,2BACC,KAAMC,EACN,WACEP,EAAe,QAAU,QACrB,CACE,SAAU,aACV,iBACE,4EACJ,EACA,CACE,SAAU,iBACV,iBAAkB,gBACpB,EAER,EAEDM,IAAQ,wBACP,OAAC,qBAAkB,KAAMC,EAAwC,EAElED,IAAQ,kBAAqC,OAAC,eAAY,KAAMC,EAAkC,EAClGD,IAAQ,iBAAqB,OAAC,cAAW,KAAMC,EAAiC,EAChFD,IAAQ,oBACP,OAAC,OAAI,UAAU,qEAAqE,GAExF,EAjCyB,IAmC7B,CAAC,EACH,EACF,EACF,EACF",
-  "names": ["credits_exports", "__export", "ComponentKey", "CreditsTemplate", "__toCommonJS", "import_jsx_runtime", "import_lib", "import_provider", "import_creditsBanner", "import_creditsInfoCard", "import_creditsBenefits", "import_creditsWaysToGetCredits", "import_creditsRedeemList", "import_creditsCash", "import_creditsFaq", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "key", "componentCopy"]
-}

package/dist/esm/components/credits/const.d.ts

@@ -1 +0,0 @@
-export declare const roundedBrands: string[];

package/dist/esm/components/credits/const.js

@@ -1,2 +0,0 @@
-const o=["eufy","soundcore"];export{o as roundedBrands};
-//# sourceMappingURL=const.js.map

package/dist/esm/components/credits/const.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/credits/const.ts"],
-  "sourcesContent": ["export const roundedBrands = ['eufy', 'soundcore']\n"],
-  "mappings": "AAAO,MAAMA,EAAgB,CAAC,OAAQ,WAAW",
-  "names": ["roundedBrands"]
-}

package/dist/esm/components/credits/creditsBenefits/benefitItem.js

@@ -1,2 +0,0 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Heading as p,Picture as m,Text as d}from"@anker-in/headless-ui";import{classNames as o,useHeadlessContext as c,ROUNDED_BRANDS as f}from"@anker-in/lib";import u from"./iconInfo";const b=({item:e,handleClick:i,isNoteActive:s,index:r})=>{const{brand:x}=c(),a=f.includes(x);return t("div",{className:o("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!a&&"rounded-none"),style:{background:"linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)"},children:n("div",{className:"flex flex-col",children:[t(m,{className:"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0",alt:e.icon?.alt,source:e.icon?.url}),n("div",{className:"flex items-center",children:[t(p,{html:e.text,size:"2",className:"break-all"}),e.note&&n("div",{role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&l.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>i({item:e,index:r}),children:[t(u,{}),t("div",{className:o("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",s?"block":"hidden"),children:n("div",{className:o("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!a&&"rounded-none"),children:[t(d,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),t("div",{className:o("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!a&&"rounded-none")})]})})]})]}),e.tag&&t(d,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var N=b;export{N as default};
-//# sourceMappingURL=benefitItem.js.map

package/dist/esm/components/credits/creditsBenefits/benefitItem.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/credits/creditsBenefits/benefitItem.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport IconInfo from './iconInfo'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n}) => {\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={{\n        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',\n      }}\n    >\n      <div className=\"flex flex-col\">\n        <Picture\n          className=\"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0\"\n          alt={item.icon?.alt}\n          source={item.icon?.url}\n        />\n        <div className=\"flex items-center\">\n          <Heading html={item.text} size=\"2\" className=\"break-all\" />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
-  "mappings": "AAqCQ,cAAAA,EA0BQ,QAAAC,MA1BR,oBArCR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,cAAcC,EAAI,sBAAAC,EAAoB,kBAAAC,MAAsB,gBACrE,OAAOC,MAAc,aAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,CACF,IAKM,CACJ,KAAM,CAAE,MAAAC,CAAM,EAAIR,EAAmB,EAC/BS,EAAUR,EAAe,SAASO,CAAK,EAC7C,OACEd,EAAC,OACC,UAAWK,EACT,8HACA,CAACU,GAAW,cACd,EACA,MAAO,CACL,WAAY,4EACd,EAEA,SAAAd,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CACC,UAAU,6EACV,IAAKO,EAAK,MAAM,IAChB,OAAQA,EAAK,MAAM,IACrB,EACAT,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAMQ,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,MACJT,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWe,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAML,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,UAAAb,EAACQ,EAAA,EAAS,EACVR,EAAC,OACC,UAAWK,EACT,qGACAO,EAAe,QAAU,QAC3B,EAEA,SAAAX,EAAC,OACC,UAAWI,EACT,0FACA,CAACU,GAAW,cACd,EAEA,UAAAf,EAACI,EAAA,CAAK,GAAG,IAAI,KAAK,IAAI,KAAMM,EAAK,KAAM,UAAU,sBAAsB,EACvEV,EAAC,OACC,UAAWK,EACT,mHACA,CAACU,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCL,EAAK,KAAOV,EAACI,EAAA,CAAK,GAAG,MAAM,KAAMM,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOO,EAAQR",
-  "names": ["jsx", "jsxs", "Heading", "Picture", "Text", "cn", "useHeadlessContext", "ROUNDED_BRANDS", "IconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "brand", "rounded", "e", "benefitItem_default"]
-}

package/dist/esm/templates/credits.js

@@ -1,2 +0,0 @@
-import{Fragment as v,jsx as o,jsxs as u}from"react/jsx-runtime";import{classNames as a,HeadlessProvider as C}from"@anker-in/lib";import{RegistrationProvider as m}from"../components/registration/context/provider";import{CreditsProvider as f}from"../components/credits/context/provider";import{CreditsBanner as y}from"../components/credits/creditsBanner";import{CreditsInfoCard as c}from"../components/credits/creditsInfoCard";import{CreditsBenefits as l}from"../components/credits/creditsBenefits";import{CreditsWaysToGetCredits as g}from"../components/credits/creditsWaysToGetCredits";import{CreditsRedeemList as T}from"../components/credits/creditsRedeemList";import{CreditsCash as P}from"../components/credits/creditsCash";import{CreditsFaq as h}from"../components/credits/creditsFaq";var I=(e=>(e.Banner="creditsBanner",e.InfoCard="creditsInfoCard",e.Benefits="creditsBenefits",e.WaysToGetCredits="creditsWaysToGetCredits",e.RedeemList="creditsRedeemList",e.SpendCreditsLikeCash="creditsCash",e.Faqs="creditsFaq",e))(I||{});const O=({headlessConfig:s,siteConfig:d,userContext:t,pageConfig:r,registrationContext:n,gtm:p})=>o(C,{headlessConfig:s,children:o(m,{copy:d.registrationsSettings,email:t?.profile?.email,children:o(f,{profile:t?.profile,removeProfile:t?.removeProfile,isLoadingProfile:t?.isLoadingProfile,openSignInPopup:n.openSignInPopup,openSignUpPopup:n.openSignUpPopup,creditInfo:t?.creditInfo,taskIdToTypeMapping:d.taskIdToTypeMapping,customer:t?.customer,fetchCreditInfo:t?.fetchCreditInfo,customerLoading:t?.customerLoading,gtm:p,pageCommon:r.common,children:o("div",{className:a("bg-[#f5f5f7] leading-[1.2]"),children:r.order.map(i=>{const e=r.components?.[i];return e?u(v,{children:[i==="creditsBanner"&&o(y,{copy:e}),i==="creditsInfoCard"&&t?.profile&&o(c,{copy:e}),i==="creditsBenefits"&&o(l,{copy:e}),i==="creditsWaysToGetCredits"&&o(g,{copy:e,classNames:s.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),i==="creditsRedeemList"&&o(T,{copy:e}),i==="creditsCash"&&o(P,{copy:e}),i==="creditsFaq"&&o(h,{copy:e}),i!=="creditsBanner"&&o("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});export{I as ComponentKey,O as CreditsTemplate};
-//# sourceMappingURL=credits.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/templates/credits.tsx"],
-  "sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\nimport { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'\n\nexport enum ComponentKey {\n  Banner = 'creditsBanner',\n  InfoCard = 'creditsInfoCard',\n  Benefits = 'creditsBenefits',\n  WaysToGetCredits = 'creditsWaysToGetCredits',\n  RedeemList = 'creditsRedeemList',\n  SpendCreditsLikeCash = 'creditsCash',\n  Faqs = 'creditsFaq',\n}\nexport type CreditsTemplateProps = {\n  headlessConfig: HeadlessConfig\n  siteConfig: {\n    registrationsSettings: {\n      authCodeActivate: AuthCodeActivateCopy\n    }\n    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n  }\n  pageConfig: {\n    order: ComponentKey[]\n    common: CreditsPageCommon\n    components: {\n      [ComponentKey.Banner]?: CreditsBannerCopy\n      [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n      [ComponentKey.Benefits]?: CreditsBenefitsCopy\n      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n      [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n      [ComponentKey.Faqs]?: CreditsFaqCopy\n    }\n  }\n  userContext: {\n    profile: any\n    removeProfile: () => void\n    isLoadingProfile: boolean\n    creditInfo: any\n    customer: any\n    customerLoading: boolean\n    fetchCreditInfo: () => void\n  }\n  registrationContext: {\n    openSignUpPopup: () => void\n    openSignInPopup: () => void\n  }\n  gtm: {\n    pageGroup: string\n  }\n}\n\nexport const CreditsTemplate = ({\n  headlessConfig,\n  siteConfig,\n  userContext,\n  pageConfig,\n  registrationContext,\n  gtm,\n}: CreditsTemplateProps) => {\n  return (\n    <HeadlessProvider headlessConfig={headlessConfig}>\n      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n        <CreditsProvider\n          profile={userContext?.profile}\n          removeProfile={userContext?.removeProfile}\n          isLoadingProfile={userContext?.isLoadingProfile}\n          openSignInPopup={registrationContext.openSignInPopup}\n          openSignUpPopup={registrationContext.openSignUpPopup}\n          creditInfo={userContext?.creditInfo}\n          taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n          customer={userContext?.customer}\n          fetchCreditInfo={userContext?.fetchCreditInfo}\n          customerLoading={userContext?.customerLoading}\n          gtm={gtm}\n          pageCommon={pageConfig.common}\n        >\n          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n            {pageConfig.order.map(key => {\n              const componentCopy = pageConfig.components?.[key]\n              if (!componentCopy) return null\n              return (\n                <>\n                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}\n                  {key === ComponentKey.InfoCard && userContext?.profile && (\n                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n                  )}\n                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}\n                  {key === ComponentKey.WaysToGetCredits && (\n                    <CreditsWaysToGetCredits\n                      copy={componentCopy as CreditsWaysToGetCreditsCopy}\n                      classNames={\n                        headlessConfig.brand === 'anker'\n                          ? {\n                              subtitle: 'text-white',\n                              equalCreditsText:\n                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',\n                            }\n                          : {\n                              subtitle: 'text-[#D1D1D1]',\n                              equalCreditsText: 'text-[#F6EAD0]',\n                            }\n                      }\n                    />\n                  )}\n                  {key === ComponentKey.RedeemList && (\n                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n                  )}\n                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}\n                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}\n                  {key !== ComponentKey.Banner && (\n                    <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n                  )}\n                </>\n              )\n            })}\n          </div>\n        </CreditsProvider>\n      </RegistrationProvider>\n    </HeadlessProvider>\n  )\n}\n"],
-  "mappings": "AA8FgB,mBAAAA,EACkC,OAAAC,EADlC,QAAAC,MAAA,oBA9FhB,OAAS,cAAAC,EAA4B,oBAAAC,MAAwB,gBAC7D,OAAS,wBAAAC,MAA4B,8CAGrC,OAAS,mBAAAC,MAAuB,yCAGhC,OAAS,iBAAAC,MAAwC,sCACjD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,2BAAAC,MAA4D,gDACrE,OAAS,qBAAAC,MAAgD,0CACzD,OAAS,eAAAC,MAAoC,oCAC7C,OAAS,cAAAC,MAAkC,mCAGpC,IAAKC,OACVA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,WAAa,oBACbA,EAAA,qBAAuB,cACvBA,EAAA,KAAO,aAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,IAEIpB,EAACG,EAAA,CAAiB,eAAgBY,EAChC,SAAAf,EAACI,EAAA,CAAqB,KAAMY,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,SAAAjB,EAACK,EAAA,CACC,QAASY,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,SAAAlB,EAAC,OAAI,UAAWE,EAAW,4BAA4B,EACpD,SAAAgB,EAAW,MAAM,IAAIG,GAAO,CAC3B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAG,EACjD,OAAKC,EAEHrB,EAAAF,EAAA,CACG,UAAAsB,IAAQ,iBAAuBrB,EAACM,EAAA,CAAc,KAAMgB,EAAoC,EACxFD,IAAQ,mBAAyBJ,GAAa,SAC7CjB,EAACO,EAAA,CAAgB,KAAMe,EAAsC,EAE9DD,IAAQ,mBAAyBrB,EAACQ,EAAA,CAAgB,KAAMc,EAAsC,EAC9FD,IAAQ,2BACPrB,EAACS,EAAA,CACC,KAAMa,EACN,WACEP,EAAe,QAAU,QACrB,CACE,SAAU,aACV,iBACE,4EACJ,EACA,CACE,SAAU,iBACV,iBAAkB,gBACpB,EAER,EAEDM,IAAQ,qBACPrB,EAACU,EAAA,CAAkB,KAAMY,EAAwC,EAElED,IAAQ,eAAqCrB,EAACW,EAAA,CAAY,KAAMW,EAAkC,EAClGD,IAAQ,cAAqBrB,EAACY,EAAA,CAAW,KAAMU,EAAiC,EAChFD,IAAQ,iBACPrB,EAAC,OAAI,UAAU,qEAAqE,GAExF,EAjCyB,IAmC7B,CAAC,EACH,EACF,EACF,EACF",
-  "names": ["Fragment", "jsx", "jsxs", "classNames", "HeadlessProvider", "RegistrationProvider", "CreditsProvider", "CreditsBanner", "CreditsInfoCard", "CreditsBenefits", "CreditsWaysToGetCredits", "CreditsRedeemList", "CreditsCash", "CreditsFaq", "ComponentKey", "CreditsTemplate", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "key", "componentCopy"]
-}