@anker-in/headless-ui 1.0.20-alpha.1761270530082 → 1.0.20-alpha.1761276598634
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var ce=Object.create;var _=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var be=(t,n)=>{for(var o in n)_(t,o,{get:n[o],enumerable:!0})},q=(t,n,o,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of ue(n))!pe.call(t,r)&&r!==o&&_(t,r,{get:()=>n[r],enumerable:!(s=de(n,r))||s.enumerable});return t};var W=(t,n,o)=>(o=t!=null?ce(me(t)):{},q(n||!t||!t.__esModule?_(o,"default",{value:t,enumerable:!0}):o,t)),fe=t=>q(_({},"__esModule",{value:!0}),t);var Pe={};be(Pe,{default:()=>Le});module.exports=fe(Pe);var e=require("react/jsx-runtime"),a=W(require("react")),l=require("../../components/index.js"),ne=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),B=W(require("./NavProvider.js")),v=require("./types.js"),He=require("react-responsive"),le=require("es-toolkit"),oe=W(require("jump.js")),U=require("@gsap/react"),G=require("gsap"),E=require("./withCategory.js"),D=require("./icons/index.js"),se=W(require("../NavigationSearch/index.js"));const ve=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:s,event:r,profile:d,theme:N="light",isTop:i=!1,searchResult:g,onSearch:k,isSearching:L,keywords:x}=t,m=(0,a.useRef)(null),[u,p]=(0,a.useState)(!1),[b,c]=(0,a.useState)(!1),[h,M]=(0,a.useState)(!1),[S,P]=(0,a.useState)(!1),w=(0,a.useRef)(null),T=()=>{const C=document?.querySelector("body")?.offsetWidth||0;P(C<=1440)};(0,a.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,a.useImperativeHandle)(n,()=>w.current),(0,a.useEffect)(()=>{w.current&&i&&(0,oe.default)(w.current,{duration:0,offset:w.current?.getBoundingClientRect()?.bottom||0})},[i]),(0,a.useEffect)(()=>{r&&(r.search=()=>p(!0))},[r]),(0,U.useGSAP)(()=>{m?.current&&u&&G.gsap.fromTo(m.current,{height:0},{height:"auto",duration:.3})},[u]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const A=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(C=>C?.blockType===v.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:s,profile:d,isMobile:S,event:r,payloadData:o,children:(0,e.jsx)("header",{"data-ui-component-id":"HeaderNavigation",className:"relative z-[100]",ref:w,children:(0,e.jsxs)("div",{className:(0,y.cn)("hover:text-black hover:bg-white",N==="light"?"text-black":"text-white",{}),onClick:()=>M(!0),children:[(0,e.jsx)(ge,{data:o,className:"hidden desktop:block",theme:N,onNavItemClick:()=>M(!0)}),(0,e.jsx)(Ne,{data:o,className:"block desktop:hidden"}),u&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${w?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:m,className:(0,y.cn)("overflow-y-auto",{}),children:(0,e.jsx)(se.default,{data:A,keywords:x,isSearching:L,searchResult:g,onSearch:C=>{k?.(C)},onClose:()=>{k?.(),p(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})})})}),ge=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:s,className:r,theme:d}=t,{event:N,profile:i}=(0,B.useNavContext)(),[g,k]=(0,a.useState)(!1),L=(0,a.useMemo)(()=>(0,E.WithGroupCategory)(o?.categories?.filter(f=>f?.pcShow)),[o]),[x,m]=(0,a.useState)(null),[u,p]=(0,a.useState)([]),b=(0,a.useRef)(null),[c,h]=(0,a.useState)(!1),M=(0,a.useRef)(null),S=(0,a.useRef)(null),P=(0,a.useRef)(L.map(f=>Array(f?.length||0).fill(null)));(0,a.useEffect)(()=>{L?.length&&p(L?.map((f,z)=>f?.map((H,R)=>({groupIndex:z,index:R,open:!1}))))},[L]);const w=(0,a.useMemo)(()=>{let f=null;for(const z of u){for(const H of z)if(H.open){f=H;break}if(f)break}return f},[u]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=w?.open||c?"hidden":"auto"},[w?.open,c]);const T=(f,z,H)=>{h(!1),x?.components?.[0]?.blockType===v.HeaderNavigationBlockType.Links?x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url):(f.stopPropagation(),s?.(),m(L[z][H]),p(R=>R.map(j=>j.map(I=>I.groupIndex===z&&I.index===H?{...I,open:!I.open}:{...I,open:!1}))))},A=()=>{p(f=>f.map(z=>z.map(H=>({...H,open:!1}))))},C=(0,a.useMemo)(()=>{if(x)return x?.components?.[0]?.blockType},[x]),K=(0,E.WithSidebar)(he,x),$=(0,E.WithMulticol)(ye,x),re=(0,E.WithSupports)(xe,{categoriesItem:x,currentNavItemRef:P.current?.[w?.groupIndex||0]?.[w?.index||0]}),ie=(0,a.useMemo)(()=>{switch(C){case v.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(K,{});case v.HeaderNavigationBlockType.Supports:return(0,e.jsx)(re,{});case v.HeaderNavigationBlockType.Multicol:return(0,e.jsx)($,{});default:return null}},[C,x]),J=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(f=>f?.pcShow),[o]),F=(0,a.useMemo)(()=>J?.find(f=>f?.blockType===v.HeaderNavigationActionBlockType.Profile),[J]),V=(0,a.useCallback)(()=>{h(f=>!f)},[]);return(0,a.useEffect)(()=>{if(b?.current){const f=b.current;return f.addEventListener("click",V),()=>{f.removeEventListener("click",V)}}},[V]),(0,U.useGSAP)(()=>{w?.open&&G.gsap.fromTo(S?.current,{height:0},{height:"auto"})},[w?.open]),(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:M,onClick:A,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(ee,{}),(0,e.jsx)(te,{ref:b,actions:J,activeStatus:c})]}),(0,e.jsx)("div",{className:"flex justify-between",children:L?.map((f,z)=>(0,e.jsx)("div",{className:"flex gap-3",children:f?.map((H,R)=>(0,e.jsx)("div",{ref:j=>{P.current[z][R]=j},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:j=>T(j,z,R),children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":w?.groupIndex===z&&w?.index===R,"opacity-100":g&&w?.groupIndex===z&&w?.index===R})})]}),(0,e.jsx)("div",{className:(0,y.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":w?.groupIndex===z&&w?.index===R},d==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${z}`))})]}),(0,e.jsxs)("div",{className:(0,y.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(w?.open&&x)}),onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{height:`calc(100dvh - ${M?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:S,className:(0,y.cn)("relative z-50",{"overflow-hidden":C!==v.HeaderNavigationBlockType.Supports}),children:ie}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:A})]}),c&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${b?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:i?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:i?.nick_name||F?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:F?.profiles?.map(f=>(0,e.jsx)(O,{className:"py-2",label:f?.title,href:f?.url},f.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(D.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:F?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:F?.benefits?.map(f=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>N?.join?.(),children:(0,e.jsx)(l.Text,{html:F?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>N?.login?.(),children:(0,e.jsx)(l.Text,{html:F?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>h(!1)})]})]})}),he=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o}=(0,B.useNavContext)(),[s,r]=(0,a.useState)([]),[d,N]=(0,a.useState)(-1),i=(0,a.useRef)(null),g=(0,a.useCallback)(()=>{const m=t?.subcategories;if(!m?.length)return;const u=m.findIndex(c=>!!c?.subSubCategories),p=m.findIndex(c=>!c?.subSubCategories),b=m.map((c,h)=>({index:h,open:u===h||p===h}));r(b)},[t]);(0,a.useEffect)(()=>{g()},[g]);const k=(0,a.useMemo)(()=>{const m=t?.subcategories?.[s?.find(p=>p.open)?.index||0],u=n?.find(p=>p?.label?.toLowerCase()===m?.label?.toLowerCase())||{};if(m?.collections){const p=o?.categories?.[m?.collections]||{};return{label:u?.label,isCollection:!0,banner:u?.banner,primary:u?.primary,series:[{products:p?.products}]}}else if(m?.subSubCategories){const p=m?.subSubCategories?.[d],b=n?.find(c=>c?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const c=o?.categories?.[p?.collections]||{};return{label:b?.label,isCollection:!0,banner:b?.banner,primary:b?.primary,series:[{products:c?.products}]}}else return b}else return u},[t,s,d,n]),L=(0,a.useCallback)((m,u)=>{if(u?.subSubCategories?.length>0?N(0):N(-1),u?.subSubCategories?.length>0)r(p=>p.map(b=>b.index===m?{...b,open:!0}:{...b,open:!1}));else{const b=t?.subcategories?.findIndex(c=>!!c?.subSubCategories);r(c=>c.map(h=>({...h,open:h.index===m||h.index===b})))}},[t,g]),x=(m,u)=>{r(p=>p.map(b=>b.index===m?{...b,open:!0}:{...b,open:!1})),N(u)};return(0,e.jsxs)(l.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:i,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((m,u)=>{const p=Array.isArray(m?.subSubCategories)&&m?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,y.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!p&&s?.find(b=>b.index===u)?.open}),onClick:()=>{L(u,m)},children:[(0,e.jsx)(l.Text,{html:m.label,className:"p-4 text-sm font-bold leading-[1.4]"}),p&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-4",{"rotate-180":s?.find(b=>b.index===u)?.open})})]}),s?.find(b=>b.index===u)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:m.subSubCategories?.map((b,c)=>(0,e.jsx)(l.Text,{html:b.label,onClick:()=>x(u,c),className:(0,y.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":d===c})},`subSubItem-${u}-${c}`))})]},`subcategoryItem-${u}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(k).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsx)("div",{className:"flex items-center gap-2",children:(0,e.jsx)(l.Text,{html:k?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"})}),(0,e.jsx)(l.Link,{href:k?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:k?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:k?.series?.map((m,u)=>(0,e.jsxs)("div",{children:[m.label&&(0,e.jsx)(l.Text,{html:m.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!k?.banner&&(0,e.jsx)(l.Link,{asChild:!k?.banner?.href,href:k?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(l.Picture,{source:k?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:k?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:k?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),m.products?.map((p,b)=>(0,e.jsx)(Q,{product:p,isCollection:k?.isCollection},`seriesProductItem-${b}`))]})]},`seriesItem-${u}`))})]})]})}),ye=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,s)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(X,{item:o})},`multicolItem-${o?.label}-${s}`))})})})},xe=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[s,r]=(0,a.useState)(null),[d,N]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const g=o?.current?.getBoundingClientRect();N(g.height)}},[o]);const i=(0,le.debounce)(()=>{if(n){const g=n.getBoundingClientRect();r(g)}},500);return(0,a.useEffect)(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[i]),(0,a.useEffect)(()=>{if(n){const g=n.getBoundingClientRect();r(g)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${s?.right}px)`,height:d},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(g=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:g.url,className:"text-sm font-bold leading-[1.4] no-underline",children:g.label})},g.id))})})},Q=({product:t,isCollection:n})=>{const{buildProps:o}=(0,B.useNavContext)();let s=n?t:o?.products?.find(i=>i.handle===t.handle);const r=s?.variants?.find(i=>i.sku===t.sku)||s?.variants?.[0],d=(0,a.useMemo)(()=>`/products/${s?.handle}?variant=${(0,y.atobID)(r?.id)}`,[s?.handle,r?.id]),N=(0,a.useMemo)(()=>s?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return r?.availableForSale?(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${r?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(N)&&N?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Link,{href:d,className:"no-underline hover:text-current",children:(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:s?.title||t?.name})}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]}):null},X=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:t.columns?.map(o=>(0,e.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[24px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsxs)("div",{className:(0,y.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)(l.Link,{href:t.url,className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,y.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,y.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,y.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})]}),Ne=(0,a.forwardRef)(({data:t,className:n},o)=>{const s=(0,a.useMemo)(()=>(0,E.WithGroupCategory)(t?.categories?.filter(C=>C?.mobileShow)),[t]),{currentMenu:r,setCurrentMenu:d,subSubCategory:N}=(0,B.useNavContext)(),[i,g]=(0,a.useState)(!1),[k,L]=(0,a.useState)(0),[x,m]=(0,a.useState)(null),u=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(u?.current&&i){const C=u?.current?.getBoundingClientRect();L(window?.innerHeight-(C?.bottom||0))}},[i]),(0,U.useGSAP)(()=>{G.gsap.fromTo(u.current,{height:0},{height:k,duration:.3})},[k]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const p=(0,a.useMemo)(()=>x?.components?.[0]?.blockType,[x]),b=(0,E.WithSupports)(Ce,{categoriesItem:x}),c=(0,E.WithSidebar)(we,x),h=(0,E.WithMulticol)(Se,x),M=(0,a.useMemo)(()=>{switch(p){case v.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(c,{});case v.HeaderNavigationBlockType.Supports:return(0,e.jsx)(b,{});case v.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(h,{});default:return null}},[p,x,b]),S=(0,a.useCallback)(()=>{g(!1),L(0),d&&d(v.HeaderNavigationMenu.Primary)},[g,L,d]),P=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(C=>C?.mobileShow&&C?.blockType!==v.HeaderNavigationActionBlockType.Profile),[t]),w=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(C=>C?.mobileShow&&C?.blockType===v.HeaderNavigationActionBlockType.Profile)||{},[t]),T=(0,a.useMemo)(()=>{switch(r){case v.HeaderNavigationMenu.Primary:return(0,e.jsx)(De,{actions:P,menuOpen:i,onMenuOpenClose:()=>{g(!1),L(0)},onMenuOpenClick:()=>g(!0)});case v.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ae,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.(v.HeaderNavigationMenu.Primary)});case v.HeaderNavigationMenu.Third:return(0,e.jsx)(ae,{title:N?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.(v.HeaderNavigationMenu.Secondary)});default:return null}},[i,r,d,x,P,N,S]),A=(0,a.useCallback)((C,K)=>{const $=Array.isArray(s)?Array.isArray(s[C])?s[C][K]:{}:{};m($),$?.components?.[0]?.blockType===v.HeaderNavigationBlockType.Links?$?.components?.[0]?.url&&window.open($?.components?.[0]?.url):d?.(v.HeaderNavigationMenu.Secondary)},[s,d]);return(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[52px]",n),children:[T,i&&(0,e.jsx)("div",{ref:u,className:"absolute left-0 top-full text-black border-t border-[#E5E5E7] z-[999] w-full overflow-y-auto bg-white",style:{height:k},children:r===v.HeaderNavigationMenu.Primary?(0,e.jsx)(ke,{categories:s,onPrimaryMenuClick:A,profileAction:w}):M})]})}),ke=({categories:t,onPrimaryMenuClick:n,profileAction:o})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((s,r)=>(0,e.jsxs)("div",{className:"",children:[s?.map((d,N)=>(0,e.jsx)(O,{label:d.text,onClick:()=>n(r,N),icon:d.components?.[0]?.icon},d.id)),(0,e.jsx)("div",{className:(0,y.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:r===t.length-1})})]},`groupCategory-${r}`))}),(0,e.jsx)(Me,{profileAction:o})]}),we=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:s,subSubCategory:r,setSubSubCategory:d,setCurrentSeriesMetadata:N,currentSeriesMetadata:i,buildProps:g}=(0,B.useNavContext)(),[k,L]=(0,a.useState)([]),[x,m]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&L(t?.subcategories?.map((c,h)=>({index:h,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&m(r?.subSubCategories?.map((c,h)=>({index:h,open:h===0})))},[r]);const u=(0,a.useCallback)((c,h)=>{s&&s(v.HeaderNavigationMenu.Third),d?.(c);const M=n?.find(S=>h!==void 0?c?.subSubCategories?.[h]?.label?.toLowerCase()===S.label?.toLowerCase():c?.label?.toLowerCase()===S.label?.toLowerCase())||{};if(c?.collections){const S=g?.categories?.[c?.collections]||{};N?.({label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:S?.products}]})}else N?.(M)},[n,t,s,d,N]),p=(0,a.useMemo)(()=>n?.find(c=>!!c?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case v.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((c,h)=>(0,e.jsx)("div",{children:(0,e.jsx)(O,{label:c?.label,active:k.find(M=>M.index===h)?.open,onClick:()=>{u(c)}})},`${c.label}-${h}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case v.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((c,h)=>{const M=n?.find(P=>P.label.toLowerCase()===c?.label?.toLowerCase())||{};let S={};if(c?.collections){const P=g?.categories?.[c?.collections]||{};S={label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:P?.products}]}}else S=M;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(c).length>0&&(0,e.jsx)(Y,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>m(P=>P.map((w,T)=>({...w,open:T===h}))),expanded:!!x?.find(P=>P.index===h)?.open}),x?.find(P=>P.index===h)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z,{matchSeriesMetadata:S}),S?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:S?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:S?.primary?.label})})]})]},`${c.label}-${h}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(i).length>0&&(0,e.jsx)(Y,{matchSeriesMetadata:i}),(0,e.jsx)(Z,{matchSeriesMetadata:i}),i?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:i?.primary?.url,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:i?.primary?.label})})]}),p&&(0,e.jsx)(l.Link,{href:p?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:p?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,s,n,k,x,d,r,N,i])},Y=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-5",{"rotate-180":o})})]}),Z=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,y.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,y.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((s,r)=>(0,e.jsx)(Q,{product:s,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Ce=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(O,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Se=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,y.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,s)=>(0,e.jsx)("div",{children:(0,e.jsx)(X,{item:o,allPicture:n})},`multicolItem-${o?.label}-${s}`))})},Me=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:s,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,y.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(D.User,{})}),(0,e.jsx)(l.Text,{html:s?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),s?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(d=>(0,e.jsx)(O,{label:d?.title,href:d?.url},d.id))}),n&&!s?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(d=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:d.benefitIcon?.url,className:"size-4",alt:d.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:d.benefit,className:"text-sm font-bold leading-[1.4]"})]},d.id))})]}),!s?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},De=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(ee,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(te,{actions:s}),t?(0,e.jsx)(D.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(D.Menu,{className:"size-5",onClick:()=>o()})]})]}),ee=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},te=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:s}=(0,B.useNavContext)(),[r,d]=(0,a.useState)(null),N=(0,a.useCallback)((i,g)=>{switch(d(g),i?.blockType){case v.HeaderNavigationActionBlockType.Search:s?.search?.();break;case v.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case v.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case v.HeaderNavigationActionBlockType.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,g)=>(0,e.jsx)("div",{ref:i.blockType===v.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>N(i,g),children:(0,e.jsx)(l.Text,{html:i.icon,className:(0,y.cn)("cursor-pointer size-5",{"text-brand-0":n&&r===g})})},i.id))})}),ae=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(D.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(D.Close,{className:"size-5",onClick:()=>n()})]}),O=({label:t,href:n,onClick:o,active:s,icon:r,className:d})=>(0,e.jsx)("div",{className:(0,y.cn)("flex cursor-pointer items-center justify-between py-4",d),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,y.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(D.RightArrow,{className:(0,y.cn)("size-5 laptop:size-4",{"rotate-90":s})})]})});var Le=(0,ne.withLayout)(ve);
|
|
1
|
+
"use strict";"use client";var ce=Object.create;var _=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var be=(t,n)=>{for(var o in n)_(t,o,{get:n[o],enumerable:!0})},q=(t,n,o,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of ue(n))!pe.call(t,r)&&r!==o&&_(t,r,{get:()=>n[r],enumerable:!(s=de(n,r))||s.enumerable});return t};var W=(t,n,o)=>(o=t!=null?ce(me(t)):{},q(n||!t||!t.__esModule?_(o,"default",{value:t,enumerable:!0}):o,t)),fe=t=>q(_({},"__esModule",{value:!0}),t);var Pe={};be(Pe,{default:()=>Le});module.exports=fe(Pe);var e=require("react/jsx-runtime"),a=W(require("react")),l=require("../../components/index.js"),ne=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),B=W(require("./NavProvider.js")),v=require("./types.js"),He=require("react-responsive"),le=require("es-toolkit"),oe=W(require("jump.js")),U=require("@gsap/react"),G=require("gsap"),E=require("./withCategory.js"),D=require("./icons/index.js"),se=W(require("../NavigationSearch/index.js"));const ve=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:s,event:r,profile:d,theme:N="light",isTop:i=!1,searchResult:g,onSearch:k,isSearching:L,keywords:x}=t,m=(0,a.useRef)(null),[u,p]=(0,a.useState)(!1),[b,c]=(0,a.useState)(!1),[h,M]=(0,a.useState)(!1),[S,P]=(0,a.useState)(!1),w=(0,a.useRef)(null),T=()=>{const C=document?.querySelector("body")?.offsetWidth||0;P(C<=1440)};(0,a.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,a.useImperativeHandle)(n,()=>w.current),(0,a.useEffect)(()=>{w.current&&i&&(0,oe.default)(w.current,{duration:0,offset:w.current?.getBoundingClientRect()?.bottom||0})},[i]),(0,a.useEffect)(()=>{r&&(r.search=()=>p(!0))},[r]),(0,U.useGSAP)(()=>{m?.current&&u&&G.gsap.fromTo(m.current,{height:0},{height:"auto",duration:.3})},[u]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const A=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(C=>C?.blockType===v.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:s,profile:d,isMobile:S,event:r,payloadData:o,children:(0,e.jsx)("header",{"data-ui-component-id":"HeaderNavigation",className:"relative z-[100]",ref:w,children:(0,e.jsxs)("div",{className:(0,y.cn)("hover:text-black hover:bg-white",N==="light"?"text-black":"text-white",{}),onClick:()=>M(!0),children:[(0,e.jsx)(ge,{data:o,className:"hidden desktop:block",theme:N,onNavItemClick:()=>M(!0)}),(0,e.jsx)(Ne,{data:o,className:"block desktop:hidden"}),u&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${w?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:m,className:(0,y.cn)("overflow-y-auto",{}),children:(0,e.jsx)(se.default,{data:A,keywords:x,isSearching:L,searchResult:g,onSearch:C=>{k?.(C)},onClose:()=>{k?.(),p(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})})})}),ge=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:s,className:r,theme:d}=t,{event:N,profile:i}=(0,B.useNavContext)(),[g,k]=(0,a.useState)(!1),L=(0,a.useMemo)(()=>(0,E.WithGroupCategory)(o?.categories?.filter(f=>f?.pcShow)),[o]),[x,m]=(0,a.useState)(null),[u,p]=(0,a.useState)([]),b=(0,a.useRef)(null),[c,h]=(0,a.useState)(!1),M=(0,a.useRef)(null),S=(0,a.useRef)(null),P=(0,a.useRef)(L.map(f=>Array(f?.length||0).fill(null)));(0,a.useEffect)(()=>{L?.length&&p(L?.map((f,z)=>f?.map((H,R)=>({groupIndex:z,index:R,open:!1}))))},[L]);const w=(0,a.useMemo)(()=>{let f=null;for(const z of u){for(const H of z)if(H.open){f=H;break}if(f)break}return f},[u]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=w?.open||c?"hidden":"auto"},[w?.open,c]);const T=(f,z,H)=>{h(!1),x?.components?.[0]?.blockType===v.HeaderNavigationBlockType.Links?x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url):(f.stopPropagation(),s?.(),m(L[z][H]),p(R=>R.map(j=>j.map(I=>I.groupIndex===z&&I.index===H?{...I,open:!I.open}:{...I,open:!1}))))},A=()=>{p(f=>f.map(z=>z.map(H=>({...H,open:!1}))))},C=(0,a.useMemo)(()=>{if(x)return x?.components?.[0]?.blockType},[x]),K=(0,E.WithSidebar)(he,x),$=(0,E.WithMulticol)(ye,x),re=(0,E.WithSupports)(xe,{categoriesItem:x,currentNavItemRef:P.current?.[w?.groupIndex||0]?.[w?.index||0]}),ie=(0,a.useMemo)(()=>{switch(C){case v.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(K,{});case v.HeaderNavigationBlockType.Supports:return(0,e.jsx)(re,{});case v.HeaderNavigationBlockType.Multicol:return(0,e.jsx)($,{});default:return null}},[C,x]),J=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(f=>f?.pcShow),[o]),F=(0,a.useMemo)(()=>J?.find(f=>f?.blockType===v.HeaderNavigationActionBlockType.Profile),[J]),V=(0,a.useCallback)(()=>{h(f=>!f)},[]);return(0,a.useEffect)(()=>{if(b?.current){const f=b.current;return f.addEventListener("click",V),()=>{f.removeEventListener("click",V)}}},[V]),(0,U.useGSAP)(()=>{w?.open&&G.gsap.fromTo(S?.current,{height:0},{height:"auto"})},[w?.open]),(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:M,onClick:A,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(ee,{}),(0,e.jsx)(te,{ref:b,actions:J,activeStatus:c})]}),(0,e.jsx)("div",{className:"flex justify-between",children:L?.map((f,z)=>(0,e.jsx)("div",{className:"flex gap-3",children:f?.map((H,R)=>(0,e.jsx)("div",{ref:j=>{P.current[z][R]=j},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:j=>T(j,z,R),children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":w?.groupIndex===z&&w?.index===R,"opacity-100":g&&w?.groupIndex===z&&w?.index===R})})]}),(0,e.jsx)("div",{className:(0,y.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":w?.groupIndex===z&&w?.index===R},d==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${z}`))})]}),(0,e.jsxs)("div",{className:(0,y.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(w?.open&&x)}),onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{height:`calc(100dvh - ${M?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:S,className:(0,y.cn)("relative z-50",{"overflow-hidden":C!==v.HeaderNavigationBlockType.Supports}),children:ie}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:A})]}),c&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${b?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:i?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:i?.nick_name||F?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:F?.profiles?.map(f=>(0,e.jsx)(O,{className:"py-2",label:f?.title,href:f?.url},f.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(D.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:F?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:F?.benefits?.map(f=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>N?.join?.(),children:(0,e.jsx)(l.Text,{html:F?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>N?.login?.(),children:(0,e.jsx)(l.Text,{html:F?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>h(!1)})]})]})}),he=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o}=(0,B.useNavContext)(),[s,r]=(0,a.useState)([]),[d,N]=(0,a.useState)(-1),i=(0,a.useRef)(null),g=(0,a.useCallback)(()=>{const m=t?.subcategories;if(!m?.length)return;const u=m.findIndex(c=>!!c?.subSubCategories),p=m.findIndex(c=>!c?.subSubCategories),b=m.map((c,h)=>({index:h,open:u===h||p===h}));r(b)},[t]);(0,a.useEffect)(()=>{g()},[g]);const k=(0,a.useMemo)(()=>{const m=t?.subcategories?.[s?.find(p=>p.open)?.index||0],u=n?.find(p=>p?.label?.toLowerCase()===m?.label?.toLowerCase())||{};if(m?.collections){const p=o?.categories?.[m?.collections]||{};return{label:u?.label,isCollection:!0,banner:u?.banner,primary:u?.primary,series:[{products:p?.products}]}}else if(m?.subSubCategories){const p=m?.subSubCategories?.[d],b=n?.find(c=>c?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const c=o?.categories?.[p?.collections]||{};return{label:b?.label,isCollection:!0,banner:b?.banner,primary:b?.primary,series:[{products:c?.products}]}}else return b}else return u},[t,s,d,n]),L=(0,a.useCallback)((m,u)=>{if(u?.subSubCategories?.length>0?N(0):N(-1),u?.subSubCategories?.length>0)r(p=>p.map(b=>b.index===m?{...b,open:!0}:{...b,open:!1}));else{const b=t?.subcategories?.findIndex(c=>!!c?.subSubCategories);r(c=>c.map(h=>({...h,open:h.index===m||h.index===b})))}},[t,g]),x=(m,u)=>{r(p=>p.map(b=>b.index===m?{...b,open:!0}:{...b,open:!1})),N(u)};return(0,e.jsxs)(l.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:i,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((m,u)=>{const p=Array.isArray(m?.subSubCategories)&&m?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,y.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!p&&s?.find(b=>b.index===u)?.open}),onClick:()=>{L(u,m)},children:[(0,e.jsx)(l.Text,{html:m.label,className:"p-4 text-sm font-bold leading-[1.4]"}),p&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-4",{"rotate-180":s?.find(b=>b.index===u)?.open})})]}),s?.find(b=>b.index===u)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:m.subSubCategories?.map((b,c)=>(0,e.jsx)(l.Text,{html:b.label,onClick:()=>x(u,c),className:(0,y.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":d===c})},`subSubItem-${u}-${c}`))})]},`subcategoryItem-${u}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(k).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsx)("div",{className:"flex items-center gap-2",children:(0,e.jsx)(l.Text,{html:k?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"})}),(0,e.jsx)(l.Link,{href:k?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:k?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:k?.series?.map((m,u)=>(0,e.jsxs)("div",{children:[m.label&&(0,e.jsx)(l.Text,{html:m.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!k?.banner&&(0,e.jsx)(l.Link,{asChild:!k?.banner?.href,href:k?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(l.Picture,{source:k?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:k?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:k?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),m.products?.map((p,b)=>(0,e.jsx)(Q,{product:p,isCollection:k?.isCollection},`seriesProductItem-${b}`))]})]},`seriesItem-${u}`))})]})]})}),ye=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,s)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(X,{item:o})},`multicolItem-${o?.label}-${s}`))})})})},xe=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[s,r]=(0,a.useState)(null),[d,N]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const g=o?.current?.getBoundingClientRect();N(g.height)}},[o]);const i=(0,le.debounce)(()=>{if(n){const g=n.getBoundingClientRect();r(g)}},500);return(0,a.useEffect)(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[i]),(0,a.useEffect)(()=>{if(n){const g=n.getBoundingClientRect();r(g)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${s?.right}px)`,height:d},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(g=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:g.url,className:"text-sm font-bold leading-[1.4] no-underline",children:g.label})},g.id))})})},Q=({product:t,isCollection:n})=>{const{buildProps:o}=(0,B.useNavContext)();let s=n?t:o?.products?.find(i=>i.handle===t.handle);const r=s?.variants?.find(i=>i.sku===t.sku)||s?.variants?.[0],d=(0,a.useMemo)(()=>`/products/${s?.handle}?variant=${(0,y.atobID)(r?.id)}`,[s?.handle,r?.id]),N=(0,a.useMemo)(()=>s?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return r?.availableForSale?(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${r?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(N)&&N?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Link,{href:d,className:"no-underline hover:text-current",children:(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:s?.title||t?.name})}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]}):null},X=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:t.columns?.map(o=>(0,e.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[24px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsxs)("div",{className:(0,y.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)(l.Link,{href:t.url,className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,y.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,y.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,y.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})]}),Ne=(0,a.forwardRef)(({data:t,className:n},o)=>{const s=(0,a.useMemo)(()=>(0,E.WithGroupCategory)(t?.categories?.filter(C=>C?.mobileShow)),[t]),{currentMenu:r,setCurrentMenu:d,subSubCategory:N}=(0,B.useNavContext)(),[i,g]=(0,a.useState)(!1),[k,L]=(0,a.useState)(0),[x,m]=(0,a.useState)(null),u=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(u?.current&&i){const C=u?.current?.getBoundingClientRect();L(window?.innerHeight-(C?.bottom||0))}},[i]),(0,U.useGSAP)(()=>{G.gsap.fromTo(u.current,{height:0},{height:k,duration:.3})},[k]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const p=(0,a.useMemo)(()=>x?.components?.[0]?.blockType,[x]),b=(0,E.WithSupports)(Ce,{categoriesItem:x}),c=(0,E.WithSidebar)(we,x),h=(0,E.WithMulticol)(Se,x),M=(0,a.useMemo)(()=>{switch(p){case v.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(c,{});case v.HeaderNavigationBlockType.Supports:return(0,e.jsx)(b,{});case v.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(h,{});default:return null}},[p,x,b]),S=(0,a.useCallback)(()=>{g(!1),L(0),d&&d(v.HeaderNavigationMenu.Primary)},[g,L,d]),P=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(C=>C?.mobileShow&&C?.blockType!==v.HeaderNavigationActionBlockType.Profile),[t]),w=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(C=>C?.mobileShow&&C?.blockType===v.HeaderNavigationActionBlockType.Profile)||{},[t]),T=(0,a.useMemo)(()=>{switch(r){case v.HeaderNavigationMenu.Primary:return(0,e.jsx)(De,{actions:P,menuOpen:i,onMenuOpenClose:()=>{g(!1),L(0)},onMenuOpenClick:()=>g(!0)});case v.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ae,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.(v.HeaderNavigationMenu.Primary)});case v.HeaderNavigationMenu.Third:return(0,e.jsx)(ae,{title:N?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.(v.HeaderNavigationMenu.Secondary)});default:return null}},[i,r,d,x,P,N,S]),A=(0,a.useCallback)((C,K)=>{const $=Array.isArray(s)?Array.isArray(s[C])?s[C][K]:{}:{};m($),$?.components?.[0]?.blockType===v.HeaderNavigationBlockType.Links?$?.components?.[0]?.url&&window.open($?.components?.[0]?.url):d?.(v.HeaderNavigationMenu.Secondary)},[s,d]);return(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[52px]",n),children:[T,i&&(0,e.jsx)("div",{ref:u,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:k},children:r===v.HeaderNavigationMenu.Primary?(0,e.jsx)(ke,{categories:s,onPrimaryMenuClick:A,profileAction:w}):M})]})}),ke=({categories:t,onPrimaryMenuClick:n,profileAction:o})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((s,r)=>(0,e.jsxs)("div",{className:"",children:[s?.map((d,N)=>(0,e.jsx)(O,{label:d.text,onClick:()=>n(r,N),icon:d.components?.[0]?.icon},d.id)),(0,e.jsx)("div",{className:(0,y.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:r===t.length-1})})]},`groupCategory-${r}`))}),(0,e.jsx)(Me,{profileAction:o})]}),we=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:s,subSubCategory:r,setSubSubCategory:d,setCurrentSeriesMetadata:N,currentSeriesMetadata:i,buildProps:g}=(0,B.useNavContext)(),[k,L]=(0,a.useState)([]),[x,m]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&L(t?.subcategories?.map((c,h)=>({index:h,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&m(r?.subSubCategories?.map((c,h)=>({index:h,open:h===0})))},[r]);const u=(0,a.useCallback)((c,h)=>{s&&s(v.HeaderNavigationMenu.Third),d?.(c);const M=n?.find(S=>h!==void 0?c?.subSubCategories?.[h]?.label?.toLowerCase()===S.label?.toLowerCase():c?.label?.toLowerCase()===S.label?.toLowerCase())||{};if(c?.collections){const S=g?.categories?.[c?.collections]||{};N?.({label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:S?.products}]})}else N?.(M)},[n,t,s,d,N]),p=(0,a.useMemo)(()=>n?.find(c=>!!c?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case v.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((c,h)=>(0,e.jsx)("div",{children:(0,e.jsx)(O,{label:c?.label,active:k.find(M=>M.index===h)?.open,onClick:()=>{u(c)}})},`${c.label}-${h}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case v.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((c,h)=>{const M=n?.find(P=>P.label.toLowerCase()===c?.label?.toLowerCase())||{};let S={};if(c?.collections){const P=g?.categories?.[c?.collections]||{};S={label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:P?.products}]}}else S=M;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(c).length>0&&(0,e.jsx)(Y,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>m(P=>P.map((w,T)=>({...w,open:T===h}))),expanded:!!x?.find(P=>P.index===h)?.open}),x?.find(P=>P.index===h)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z,{matchSeriesMetadata:S}),S?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:S?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:S?.primary?.label})})]})]},`${c.label}-${h}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(i).length>0&&(0,e.jsx)(Y,{matchSeriesMetadata:i}),(0,e.jsx)(Z,{matchSeriesMetadata:i}),i?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:i?.primary?.url,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:i?.primary?.label})})]}),p&&(0,e.jsx)(l.Link,{href:p?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:p?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,s,n,k,x,d,r,N,i])},Y=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-5",{"rotate-180":o})})]}),Z=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,y.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,y.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((s,r)=>(0,e.jsx)(Q,{product:s,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Ce=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(O,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Se=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,y.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,s)=>(0,e.jsx)("div",{children:(0,e.jsx)(X,{item:o,allPicture:n})},`multicolItem-${o?.label}-${s}`))})},Me=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:s,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,y.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(D.User,{})}),(0,e.jsx)(l.Text,{html:s?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(D.DownArrow,{className:(0,y.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),s?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(d=>(0,e.jsx)(O,{label:d?.title,href:d?.url},d.id))}),n&&!s?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(d=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:d.benefitIcon?.url,className:"size-4",alt:d.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:d.benefit,className:"text-sm font-bold leading-[1.4]"})]},d.id))})]}),!s?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},De=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(ee,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(te,{actions:s}),t?(0,e.jsx)(D.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(D.Menu,{className:"size-5",onClick:()=>o()})]})]}),ee=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},te=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:s}=(0,B.useNavContext)(),[r,d]=(0,a.useState)(null),N=(0,a.useCallback)((i,g)=>{switch(d(g),i?.blockType){case v.HeaderNavigationActionBlockType.Search:s?.search?.();break;case v.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case v.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case v.HeaderNavigationActionBlockType.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,g)=>(0,e.jsx)("div",{ref:i.blockType===v.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>N(i,g),children:(0,e.jsx)(l.Text,{html:i.icon,className:(0,y.cn)("cursor-pointer size-5",{"text-brand-0":n&&r===g})})},i.id))})}),ae=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(D.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(D.Close,{className:"size-5",onClick:()=>n()})]}),O=({label:t,href:n,onClick:o,active:s,icon:r,className:d})=>(0,e.jsx)("div",{className:(0,y.cn)("flex cursor-pointer items-center justify-between py-4",d),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,y.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(D.RightArrow,{className:(0,y.cn)("size-5 laptop:size-4",{"rotate-90":s})})]})});var Le=(0,ne.withLayout)(ve);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { Picture, Text, Button, Container, Link, Heading } from '../../components/index.js'\n\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { cn, atobID } from '../../helpers/utils.js'\n\nimport type {\n MobilePrimaryNavigationData,\n MobileSecondaryNavigationData,\n MobileNavigationProps,\n DesktopNavigationProps,\n HeaderNavigationProps,\n} from './types.js'\nimport NavProvider, { useNavContext } from './NavProvider.js'\n\nimport { HeaderNavigationMenu, HeaderNavigationBlockType, HeaderNavigationActionBlockType } from './types.js'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { debounce, throttle } from 'es-toolkit'\nimport jump from 'jump.js'\n\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\nimport { WithSidebar, WithSupports, WithMulticol, WithGroupCategory } from './withCategory.js'\n\nimport { Menu, Close, User, RightArrow, LeftArrow, DownArrow, Polygon } from './icons/index.js'\n\nimport NavigationSearch from '../NavigationSearch/index.js'\n\nconst HeaderNavigation = forwardRef<HTMLDivElement, HeaderNavigationProps>((props, ref) => {\n const {\n data: { headerNavigation } = {},\n buildProps,\n event,\n profile,\n theme = 'light',\n isTop = false,\n searchResult,\n onSearch,\n isSearching,\n keywords,\n } = props\n\n const searchRef = useRef<HTMLDivElement>(null)\n const [searchOpen, setSearchOpen] = useState(false)\n const [headerHidden, setHeaderHidden] = useState(false)\n const [changeHeaderBackground, setChangeHeaderBackground] = useState(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const headerRef = useRef<HTMLDivElement>(null)\n\n const resizeWindow = () => {\n const offsetWidth = document?.querySelector('body')?.offsetWidth || 0\n setIsMobile(offsetWidth <= 1440)\n }\n\n useEffect(() => {\n resizeWindow()\n window.addEventListener('resize', resizeWindow)\n return () => {\n window.removeEventListener('resize', resizeWindow)\n }\n }, [])\n\n useImperativeHandle(ref, () => headerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (headerRef.current && isTop) {\n jump(headerRef.current, { duration: 0, offset: headerRef.current?.getBoundingClientRect()?.bottom || 0 })\n }\n }, [isTop])\n\n // useEffect(() => {\n // let upwardDistance = 0\n // let lastScrollY = 0\n // const showDownNav = throttle(latest => {\n // const delta = lastScrollY - latest\n // if (delta > 0) {\n // upwardDistance += delta\n // if (upwardDistance >= 300) {\n // setHeaderHidden(false)\n // upwardDistance = 0\n // }\n // } else {\n // setHeaderHidden(latest > 300)\n // }\n // setChangeHeaderBackground(latest > 30)\n // lastScrollY = latest\n // }, 200)\n\n // const scrollAnimate = () => {\n // let scrollTop = 0\n // if (document?.documentElement && document?.documentElement?.scrollTop) {\n // scrollTop = document?.documentElement.scrollTop\n // } else if (document?.body) {\n // scrollTop = document?.body.scrollTop\n // }\n // showDownNav(scrollTop)\n // }\n\n // window.addEventListener('scroll', scrollAnimate)\n\n // return () => window.removeEventListener('scroll', scrollAnimate)\n // }, [])\n\n useEffect(() => {\n if (event) {\n event.search = () => setSearchOpen(true)\n }\n }, [event])\n\n useGSAP(() => {\n if (searchRef?.current && searchOpen) {\n gsap.fromTo(\n searchRef.current,\n {\n height: 0,\n },\n {\n height: 'auto',\n duration: 0.3,\n }\n )\n }\n }, [searchOpen])\n\n useEffect(() => {\n document.documentElement.style.overflow = searchOpen ? 'hidden' : 'auto'\n }, [searchOpen])\n\n const searchPage = useMemo(() => {\n return (\n headerNavigation?.headerBar?.actions?.find(\n (item: any) => item?.blockType === HeaderNavigationActionBlockType.Search\n )?.searchBar?.[0] || {}\n )\n }, [headerNavigation])\n\n return (\n <NavProvider\n buildProps={buildProps}\n profile={profile}\n isMobile={isMobile}\n event={event}\n payloadData={headerNavigation}\n >\n <header\n data-ui-component-id=\"HeaderNavigation\"\n // className={cn('sticky top-0 z-[100] transition-transform duration-500 ease-in-out', {\n // ['translate-y-[-100%]']: headerHidden,\n // })}\n className=\"relative z-[100]\"\n ref={headerRef}\n >\n <div\n className={cn(\"hover:text-black hover:bg-white\",\n theme === 'light' ? 'text-black' : 'text-white',\n // {\n // ['!bg-white transition-all duration-500 ease-in-out']: changeHeaderBackground,\n // },\n {\n // ['hover:!text-black']: theme === 'dark',\n // ['!text-black']: changeHeaderBackground,\n }\n )}\n onClick={() => setChangeHeaderBackground(true)}\n >\n <DesktopNavigation\n data={headerNavigation}\n className=\"hidden desktop:block\"\n theme={theme}\n onNavItemClick={() => setChangeHeaderBackground(true)}\n />\n <MobileNavigation data={headerNavigation} className=\"block desktop:hidden\" />\n {searchOpen && (\n <div\n className=\"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col\"\n style={{ height: `calc(100dvh - ${headerRef?.current?.getBoundingClientRect()?.top}px)` }}\n >\n <div ref={searchRef} className={cn('overflow-y-auto', {})}>\n <NavigationSearch\n data={searchPage}\n keywords={keywords}\n isSearching={isSearching}\n searchResult={searchResult}\n onSearch={(value: string) => {\n onSearch?.(value)\n }}\n onClose={() => {\n onSearch?.()\n setSearchOpen(false)\n }}\n />\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={() => setSearchOpen(false)} />\n </div>\n )}\n </div>\n </header>\n </NavProvider>\n )\n})\n\nconst DesktopNavigation = forwardRef<HTMLDivElement, DesktopNavigationProps>((props, ref) => {\n const { data, onNavItemClick, className, theme } = props\n const { event, profile } = useNavContext()\n const [downdownHover, setDowndownHover] = useState(false)\n\n const groupCategories = useMemo(() => {\n return WithGroupCategory(data?.categories?.filter((item: any) => item?.pcShow)) as any[][]\n }, [data])\n\n const [categoriesItem, setCategoriesItem] = useState<any>(null)\n const [navStatusArray, setNavStatusArray] = useState<{ index: number; groupIndex: number; open: boolean }[][]>([])\n const profileRef = useRef<HTMLDivElement>(null)\n const [userProfileOpen, setUserProfileOpen] = useState(false)\n const headerRef = useRef<HTMLDivElement>(null)\n const dropdownRef = useRef<HTMLDivElement>(null)\n const navItemRefs = useRef<HTMLDivElement[][]>(\n groupCategories.map((categories: any) => Array(categories?.length || 0).fill(null))\n )\n\n useEffect(() => {\n if (groupCategories?.length) {\n setNavStatusArray(\n groupCategories?.map((groupItem: any, groupIndex: number) => {\n return groupItem?.map((_: any, index: number) => ({ groupIndex, index, open: false }))\n })\n )\n }\n }, [groupCategories])\n\n const currentNavItem = useMemo(() => {\n let currentNavItem: { index: number; groupIndex: number; open: boolean } | null = null\n for (const groupItem of navStatusArray) {\n for (const item of groupItem) {\n if (item.open) {\n currentNavItem = item\n break\n }\n }\n if (currentNavItem) break\n }\n return currentNavItem\n }, [navStatusArray])\n\n useEffect(() => {\n document.documentElement.style.overflow = currentNavItem?.open || userProfileOpen ? 'hidden' : 'auto'\n }, [currentNavItem?.open, userProfileOpen])\n\n const handleNavItemClick = (e: any, groupIndex: number, index: number) => {\n setUserProfileOpen(false)\n if (categoriesItem?.components?.[0]?.blockType === HeaderNavigationBlockType.Links) {\n // link\u6A21\u5757\u7279\u6B8A\u5904\u7406\n categoriesItem?.components?.[0]?.url && window.open(categoriesItem?.components?.[0]?.url)\n } else {\n e.stopPropagation()\n onNavItemClick?.()\n setCategoriesItem(groupCategories[groupIndex][index])\n setNavStatusArray(prev =>\n prev.map(groupItem =>\n groupItem.map(item =>\n item.groupIndex === groupIndex && item.index === index\n ? { ...item, open: !item.open }\n : { ...item, open: false }\n )\n )\n )\n }\n }\n\n const handleNavMenuClose = () => {\n setNavStatusArray(prev => prev.map(groupItem => groupItem.map(item => ({ ...item, open: false }))))\n }\n\n const currentBlockTypeCategories = useMemo(() => {\n if (categoriesItem) return categoriesItem?.components?.[0]?.blockType\n }, [categoriesItem])\n\n const SidebarDropdownComp = WithSidebar(SidebarDropdown, categoriesItem)\n const MulticolDropdownComp = WithMulticol(MulticolDropdown, categoriesItem)\n const SupportsDropdownComp = WithSupports(SupportsDropdown, {\n categoriesItem,\n currentNavItemRef: navItemRefs.current?.[currentNavItem?.groupIndex || 0]?.[currentNavItem?.index || 0],\n })\n\n const DropdownComp = useMemo(() => {\n switch (currentBlockTypeCategories) {\n case HeaderNavigationBlockType.Sidebar:\n return <SidebarDropdownComp />\n case HeaderNavigationBlockType.Supports:\n return <SupportsDropdownComp />\n case HeaderNavigationBlockType.Multicol:\n return <MulticolDropdownComp />\n default:\n return null\n }\n }, [currentBlockTypeCategories, categoriesItem])\n\n const actions = useMemo(() => {\n return data?.headerBar?.actions?.filter((item: any) => item?.pcShow)\n }, [data])\n\n const profileAction = useMemo(() => {\n return actions?.find((item: any) => item?.blockType === HeaderNavigationActionBlockType.Profile)\n }, [actions])\n\n const handleProfileClick = useCallback(() => {\n setUserProfileOpen(prev => !prev)\n }, [])\n\n useEffect(() => {\n if (profileRef?.current) {\n const profileRefElement = profileRef.current as HTMLDivElement\n profileRefElement.addEventListener('click', handleProfileClick)\n\n return () => {\n profileRefElement.removeEventListener('click', handleProfileClick)\n }\n }\n }, [handleProfileClick])\n\n useGSAP(() => {\n if (currentNavItem?.open) {\n gsap.fromTo(\n dropdownRef?.current,\n {\n height: 0,\n },\n {\n height: 'auto',\n }\n )\n }\n }, [currentNavItem?.open])\n\n return (\n <Container className={cn('relative h-[96px]', className)}>\n <div ref={headerRef} onClick={handleNavMenuClose} className=\"flex h-full flex-col justify-end gap-4\">\n <div className=\"flex items-center justify-between\">\n <Logo />\n <Actions ref={profileRef} actions={actions} activeStatus={userProfileOpen} />\n </div>\n <div className=\"flex justify-between\">\n {groupCategories?.map((groupItem: any, groupIndex: number) => {\n return (\n <div key={`groupCategory-${groupIndex}`} className=\"flex gap-3\">\n {groupItem?.map((item: any, index: number) => {\n return (\n <div\n key={item.id}\n ref={(el: HTMLDivElement) => {\n navItemRefs.current[groupIndex][index] = el\n }}\n className=\"group cursor-pointer\"\n >\n <div className=\"relative\">\n <div\n className=\"flex items-center gap-1 pb-4\"\n onClick={e => handleNavItemClick(e, groupIndex, index)}\n >\n <Text html={item.text} className=\"text-sm font-bold leading-[1.4]\" />\n <DownArrow\n className={cn('opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500', {\n ['rotate-180']:\n currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n ['opacity-100']:\n downdownHover &&\n currentNavItem?.groupIndex === groupIndex &&\n currentNavItem?.index === index,\n })}\n />\n </div>\n <div\n className={cn(\n 'absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500',\n {\n 'w-[calc(100%-20px)]':\n currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n },\n theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]',\n )}\n />\n </div>\n </div>\n )\n })}\n </div>\n )\n })}\n </div>\n </div>\n <div\n className={cn(\n 'border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden',\n {\n hidden: !(currentNavItem?.open && categoriesItem),\n }\n )}\n onMouseEnter={() => setDowndownHover(true)}\n onMouseLeave={() => setDowndownHover(false)}\n style={{ height: `calc(100dvh - ${headerRef?.current?.getBoundingClientRect()?.bottom}px)` }}\n >\n <div\n ref={dropdownRef}\n className={cn('relative z-50', {\n 'overflow-hidden': currentBlockTypeCategories !== HeaderNavigationBlockType.Supports,\n })}\n >\n {DropdownComp}\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={handleNavMenuClose} />\n </div>\n {userProfileOpen && (\n <div\n className=\"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full\"\n // style={{\n // height: `calc(100dvh - ${profileRef?.current?.getBoundingClientRect()?.bottom}px)`,\n // top: `calc(96px)`,\n // }}\n >\n <div\n className=\"absolute w-[272px] bg-white p-4\"\n style={{\n right: `calc(100% - ${profileRef?.current?.getBoundingClientRect()?.right}px)`,\n top: '-36px',\n }}\n >\n {profile?.email ? (\n <>\n <Text html={profile?.nick_name || profileAction?.welcome} className=\"text-sm font-bold\" />\n <div className=\"h-[1px] mt-2 bg-[#D9D9D9]\" />\n <div className=\"mt-2\">\n {profileAction?.profiles?.map((item: any) => (\n <MenuItem className=\"py-2\" key={item.id} label={item?.title} href={item?.url} />\n ))}\n </div>\n </>\n ) : (\n <>\n <Polygon className=\"absolute -top-2 text-white right-[46px] z-30\" />\n <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n <div className=\"mt-2 flex flex-col gap-1\">\n {profileAction?.benefits?.map((item: any) => (\n <div key={item.id} className=\"flex items-center gap-[6px]\">\n <Picture\n source={item.benefitIcon?.url}\n className=\"size-4\"\n alt={item.benefit}\n width={16}\n height={16}\n />\n <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))}\n </div>\n <div className=\"mt-4 flex items-center gap-2\">\n <Button variant=\"secondary\" size=\"lg\" onClick={() => event?.join?.()}>\n <Text html={profileAction?.primaryButton || 'Join Now'} className=\"font-bold\" />\n </Button>\n <Button variant=\"primary\" size=\"lg\" onClick={() => event?.login?.()}>\n <Text html={profileAction?.secondaryButton || 'Log In'} className=\"font-bold\" />\n </Button>\n </div>\n </>\n )}\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={() => setUserProfileOpen(false)} />\n </div>\n )}\n </Container>\n )\n})\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata])\n\n const handleSubcategoryOpen = useCallback(\n (index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0\n ? setActiveSubSubcategoryIndex(0)\n : setActiveSubSubcategoryIndex(-1)\n\n if (subcategoryItem?.subSubCategories?.length > 0) {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n } else {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n const withSubSubCategoriesIndex = subcategories?.findIndex((item: any) => !!item?.subSubCategories)\n setExpandedSubcategory(prev =>\n prev.map(item => {\n return { ...item, open: item.index === index || item.index === withSubSubCategoriesIndex }\n })\n )\n }\n },\n [sidebarCategoriesMetadata, initExpandedSubcategory]\n )\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n return (\n <div key={`subcategoryItem-${index}`}>\n <div\n className={cn('flex cursor-pointer items-center justify-between', {\n 'bg-[#F5F5F7]':\n !hasSubSubCategory && expandedSubcategory?.find(item => item.index === index)?.open,\n })}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n }}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n className={cn('size-4', {\n ['rotate-180']: expandedSubcategory?.find(item => item.index === index)?.open,\n })}\n />\n )}\n </div>\n {expandedSubcategory?.find(item => item.index === index)?.open && (\n <div className=\"flex flex-col\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <Text\n html={subSubItem.label}\n onClick={() => handleSubSubcategoryOpen(index, subSubindex)}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n />\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.primary?.url}\n variant=\"primary\"\n size=\"lg\"\n className=\"text-sm lg-desktop:text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"justify-start !p-0 text-sm lg-desktop:text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"text-xl lg-desktop:text-2xl font-bold leading-[1.4]\"\n />\n {/* {matchSeriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={matchSeriesMetadata?.primary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )} */}\n </div>\n <Link\n href={matchSeriesMetadata?.guide?.url}\n className=\"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]\"\n >\n {matchSeriesMetadata?.guide?.label}\n </Link>\n </div>\n )}\n <div\n className=\"flex flex-col gap-4 overflow-y-auto h-[426px]\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} className=\"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]\" />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n key={`seriesProductItem-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n // useGSAP(() => {\n // gsap.fromTo(\n // multicolDropdownRef?.current,\n // {\n // height: 0,\n // },\n // {\n // height: 'auto',\n // duration: 0.5,\n // }\n // )\n // }, [])\n\n return (\n <div ref={multicolDropdownRef}>\n <Container childClassName=\"bg-white\" className=\"h-full\">\n <div className=\"flex gap-4 py-4\">\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n <MulticolItem item={item} />\n </div>\n ))}\n </div>\n </Container>\n </div>\n )\n}\n\n/**\n * supports\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n * @param currentNavItemRef \u5F53\u524D\u5BFC\u822A\u9879\n */\nconst SupportsDropdown = ({\n supportsMetadata,\n currentNavItemRef,\n}: {\n supportsMetadata: any\n currentNavItemRef: HTMLDivElement\n}) => {\n const supportsDropdownRef = useRef<HTMLDivElement>(null)\n const [navItemReact, setNavItemReact] = useState<DOMRect | null>(null)\n const [supportsDropdownHeight, setSupportsDropdownHeight] = useState(0)\n\n // useGSAP(() => {\n // gsap.fromTo(\n // supportsDropdownRef?.current,\n // {\n // height: 0,\n // },\n // {\n // height: supportsDropdownHeight,\n // duration: 0.5,\n // }\n // )\n // }, [supportsDropdownHeight])\n\n useEffect(() => {\n if (supportsDropdownRef?.current) {\n const rect = supportsDropdownRef?.current?.getBoundingClientRect()\n setSupportsDropdownHeight(rect.height)\n }\n }, [supportsDropdownRef])\n\n const debouncedHandleResize = debounce(() => {\n if (currentNavItemRef) {\n const rect = currentNavItemRef.getBoundingClientRect()\n setNavItemReact(rect)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n useEffect(() => {\n if (currentNavItemRef) {\n const rect = currentNavItemRef.getBoundingClientRect()\n setNavItemReact(rect)\n }\n }, [currentNavItemRef])\n\n return (\n <div\n className=\"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden\"\n style={{ right: `calc(100% - ${navItemReact?.right}px)`, height: supportsDropdownHeight }}\n >\n <div ref={supportsDropdownRef} className=\"p-4\">\n {supportsMetadata?.map((supportItem: any) => (\n <div key={supportItem.id} className=\"py-2\">\n <Link href={supportItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n {supportItem.label}\n </Link>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nconst SeriesProductItem = ({ product, isCollection }: { product: any; isCollection?: boolean }) => {\n const { buildProps } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105\">\n <div className=\"shrink-0\">\n <Picture\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string) => (\n <Text\n as=\"p\"\n html={tag}\n className=\"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n {/* {product?.badge && (\n <Text\n as=\"p\"\n html={product?.badge}\n className=\"text-brand-0 mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n )} */}\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n </Link>\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nconst MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n return (\n <>\n {item?.columns && (\n <>\n <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2 flex flex-col\">\n {item.columns?.map((columnItem: any) => (\n <div key={columnItem.label} className=\"py-2 flex items-center gap-1\">\n <Link href={columnItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n {columnItem.label}\n </Link>\n {columnItem?.badge && (\n <Text\n as=\"p\"\n html={columnItem?.badge || 'badge'}\n className=\"text-sm font-bold !leading-[24px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]\"\n />\n )}\n </div>\n ))}\n </div>\n </>\n )}\n {item?.imageUrl && (\n <div\n className={cn(\n 'laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden',\n {\n ['tablet:max-w-none laptop:max-w-none']: allPicture,\n }\n )}\n >\n <Picture\n source={item.imageUrl}\n width={404}\n height={280}\n className=\"size-full\"\n imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n />\n <Link href={item.url} className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n <Text\n html={item.title}\n className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n {item.subtitle && (\n <Text\n html={item.subtitle}\n className={cn('text-sm font-bold leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n )}\n {item?.primary?.label && (\n <Button\n as=\"a\"\n href={item?.primary?.url}\n variant=\"link\"\n size=\"lg\"\n className={cn('text-sm font-bold mr-auto !p-0 leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n >\n {item?.primary?.label || 'more'}\n </Button>\n )}\n </Link>\n </div>\n )}\n </>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5BFC\u822A\n * @param menuHeight \u83DC\u5355\u9AD8\u5EA6\n * @param data \u5BFC\u822A\u6570\u636E\n */\nconst MobileNavigation = forwardRef<HTMLDivElement, MobileNavigationProps>(({ data, className }, ref) => {\n const groupCategories = useMemo(() => {\n return WithGroupCategory(data?.categories?.filter((item: any) => item?.mobileShow))\n }, [data])\n\n const { currentMenu, setCurrentMenu, subSubCategory } = useNavContext()\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false)\n const [menuInnerHeight, setMenuInnerHeight] = useState(0)\n const [categoriesItem, setCategoriesItem] = useState<any>(null)\n\n const mobileMenuRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (mobileMenuRef?.current && mobileMenuOpen) {\n const rect = mobileMenuRef?.current?.getBoundingClientRect()\n setMenuInnerHeight(window?.innerHeight - (rect?.bottom || 0))\n }\n }, [mobileMenuOpen])\n\n useGSAP(() => {\n gsap.fromTo(\n mobileMenuRef.current,\n {\n height: 0,\n },\n {\n height: menuInnerHeight,\n duration: 0.3,\n }\n )\n }, [menuInnerHeight])\n\n useEffect(() => {\n document.documentElement.style.overflow = mobileMenuOpen ? 'hidden' : 'auto'\n }, [mobileMenuOpen])\n\n const currentBlockTypeCategories = useMemo(() => {\n return categoriesItem?.components?.[0]?.blockType\n }, [categoriesItem])\n\n const MobileSupportMenuComp = WithSupports(MobileSupportMenu, {\n categoriesItem,\n })\n\n const MobileSidebarMenuComp = WithSidebar(MobileSidebarMenu, categoriesItem)\n const MobileMulticolMenuComp = WithMulticol(MobileMulticolMenu, categoriesItem)\n\n const MobileCategoriesMenuComp = useMemo(() => {\n switch (currentBlockTypeCategories) {\n case HeaderNavigationBlockType.Sidebar:\n return <MobileSidebarMenuComp />\n case HeaderNavigationBlockType.Supports:\n return <MobileSupportMenuComp />\n case HeaderNavigationBlockType.Multicol:\n return <MobileMulticolMenuComp />\n default:\n return null\n }\n }, [currentBlockTypeCategories, categoriesItem, MobileSupportMenuComp])\n\n const handleSecondaryMenuClose = useCallback(() => {\n setMobileMenuOpen(false)\n setMenuInnerHeight(0)\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Primary)\n }, [setMobileMenuOpen, setMenuInnerHeight, setCurrentMenu])\n\n const menuActions = useMemo(() => {\n return data?.headerBar?.actions?.filter(\n (item: any) => item?.mobileShow && item?.blockType !== HeaderNavigationActionBlockType.Profile // \u79FB\u52A8\u7AEF\u4E0D\u663E\u793Aprofile\u6309\u94AE\n )\n }, [data])\n\n const profileAction = useMemo(() => {\n return (\n data?.headerBar?.actions?.find(\n (item: any) => item?.mobileShow && item?.blockType === HeaderNavigationActionBlockType.Profile\n ) || {}\n )\n }, [data])\n\n const MobileCategoriesHeaderComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Primary:\n return (\n <PrimaryHeader\n actions={menuActions}\n menuOpen={mobileMenuOpen}\n onMenuOpenClose={() => {\n setMobileMenuOpen(false)\n setMenuInnerHeight(0)\n }}\n onMenuOpenClick={() => setMobileMenuOpen(true)}\n />\n )\n case HeaderNavigationMenu.Secondary:\n return (\n <SecondaryHeader\n title={categoriesItem?.text}\n onMenuOpenClose={handleSecondaryMenuClose}\n onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Primary)}\n />\n )\n case HeaderNavigationMenu.Third:\n return (\n <SecondaryHeader\n title={subSubCategory?.label}\n onMenuOpenClose={handleSecondaryMenuClose}\n onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Secondary)}\n />\n )\n default:\n return null\n }\n }, [\n mobileMenuOpen,\n currentMenu,\n setCurrentMenu,\n categoriesItem,\n menuActions,\n subSubCategory,\n handleSecondaryMenuClose,\n ])\n\n const handlePrimaryMenuClick = useCallback(\n (groupIndex: number, index: number) => {\n const categoriesItem = Array.isArray(groupCategories)\n ? Array.isArray(groupCategories[groupIndex])\n ? groupCategories[groupIndex][index]\n : {}\n : {}\n setCategoriesItem(categoriesItem)\n if (categoriesItem?.components?.[0]?.blockType === HeaderNavigationBlockType.Links) {\n // link\u6A21\u5757\u7279\u6B8A\u5904\u7406\n categoriesItem?.components?.[0]?.url && window.open(categoriesItem?.components?.[0]?.url)\n } else {\n setCurrentMenu?.(HeaderNavigationMenu.Secondary)\n }\n },\n [groupCategories, setCurrentMenu]\n )\n\n return (\n <Container className={cn('relative h-[52px]', className)}>\n {/* \u79FB\u52A8\u7AEF\u5206\u7C7B\u83DC\u5355 */}\n {MobileCategoriesHeaderComp}\n {mobileMenuOpen && (\n <div\n ref={mobileMenuRef}\n className=\"absolute left-0 top-full text-black border-t border-[#E5E5E7] z-[999] w-full overflow-y-auto bg-white\"\n style={{ height: menuInnerHeight }}\n >\n {currentMenu === HeaderNavigationMenu.Primary ? (\n <MobilePrimaryMenu\n categories={groupCategories}\n onPrimaryMenuClick={handlePrimaryMenuClick}\n profileAction={profileAction}\n />\n ) : (\n MobileCategoriesMenuComp\n )}\n </div>\n )}\n </Container>\n )\n})\n\n/**\n * \u79FB\u52A8\u7AEF\u4E00\u7EA7\u83DC\u5355\n * @param categories \u5206\u7C7B\n * @param onPrimaryMenuClick \u4E00\u7EA7\u83DC\u5355\u70B9\u51FB\n */\nconst MobilePrimaryMenu = ({\n categories,\n onPrimaryMenuClick,\n profileAction,\n}: {\n categories: any\n onPrimaryMenuClick: (groupIndex: number, index: number) => void\n profileAction: any\n}) => {\n return (\n <div className=\"flex h-full flex-col justify-between\">\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {categories?.map((groupItem: any, groupIndex: number) => (\n <div key={`groupCategory-${groupIndex}`} className=\"\">\n {groupItem?.map((item: any, index: number) => (\n <MenuItem\n key={item.id}\n label={item.text}\n onClick={() => onPrimaryMenuClick(groupIndex, index)}\n icon={item.components?.[0]?.icon}\n />\n ))}\n <div\n className={cn('my-2 h-px w-full bg-[#E5E5E7]', { ['hidden']: groupIndex === categories.length - 1 })}\n />\n </div>\n ))}\n </div>\n <ProfileComp profileAction={profileAction} />\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nconst MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, sidebarCategoriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata]\n )\n\n const defaultGuide = useMemo(() => {\n return seriesMetadata?.find((item: any) => !!item?.guide)?.guide\n }, [seriesMetadata, sidebarCategoriesMetadata])\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n }}\n />\n {/* {expandedSubcategory.find(item => item.index === index)?.open &&\n item.subSubCategories?.map((subItem: any, subIndex: number) => (\n <div\n key={`${index}-${subIndex}`}\n className=\"px-2 py-4\"\n onClick={() => handleSubSubCategoryClick(item, subIndex)}\n >\n <Text html={subItem.label} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))} */}\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.primary?.url}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() =>\n setExpandedSeriesCategories(prev => prev.map((item, i) => ({ ...item, open: i === index })))\n }\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"text-center my-4\">\n <Button\n as=\"a\"\n href={matchSeriesMetadata?.primary?.url}\n className=\"text-base no-underline leading-[1.2]\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"text-center my-4 \">\n <Button\n as=\"a\"\n href={currentSeriesMetadata?.primary?.url}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base no-underline leading-[1.2]\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n {defaultGuide && (\n <Link href={defaultGuide?.url}>\n <div className=\"mt-4\">\n <Text html={defaultGuide?.label} className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\" />\n </div>\n </Link>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n setCurrentMenu,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n setSubSubCategory,\n subSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n ])\n\n return MobileSidebarMenuComp\n}\n\nconst SubSubCategoryItemComp = ({\n matchSeriesMetadata,\n onSubSubCategoryItemClick,\n expanded,\n}: {\n matchSeriesMetadata: any\n onSubSubCategoryItemClick?: () => void\n expanded?: boolean\n}) => {\n return (\n <div className=\"tablet:pt-0 py-4 flex items-center justify-between\" onClick={onSubSubCategoryItemClick}>\n {matchSeriesMetadata?.label && (\n <Text html={matchSeriesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n )}\n {onSubSubCategoryItemClick && (\n <DownArrow\n className={cn('size-5', {\n ['rotate-180']: expanded,\n })}\n />\n )}\n </div>\n )\n}\n\nconst SubSubCategoryContentComp = ({ matchSeriesMetadata }: { matchSeriesMetadata: any }) => {\n return (\n <div className=\"flex flex-col gap-2 laptop:gap-3\">\n {!!matchSeriesMetadata?.series?.length &&\n matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n <div key={`seriesItem-${pIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} className=\"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]\" />\n )}\n <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n key={`seriesProductItem-${pIndex}-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFsupport\u83DC\u5355\n * @param supportsMetadata support\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileSupportMenu = ({ supportsMetadata }: { supportsMetadata: any }) => {\n return (\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {supportsMetadata?.map((supportItem: any) => (\n <MenuItem key={supportItem.id} href={supportItem.url} label={supportItem.label} onClick={() => {}} />\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFmulticol\u83DC\u5355\n * @param multicolMetadata multicol\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileMulticolMenu = ({ multicolMetadata }: { multicolMetadata: any }) => {\n // \u662F\u5426\u5168\u90E8\u662F\u56FE\u7247\n const allPicture = useMemo(() => {\n return !multicolMetadata?.some((item: any) => !!item.columns)\n }, [multicolMetadata])\n\n return (\n <div\n className={cn('tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4', {\n ['tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4']: allPicture,\n })}\n >\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`}>\n <MulticolItem item={item} allPicture={allPicture} />\n </div>\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFprofile\u7EC4\u4EF6\n * @param profileAction profile\u83DC\u5355\u5143\u6570\u636E\n */\nconst ProfileComp = ({ profileAction }: { profileAction: any }) => {\n const [profileOpen, setProfileOpen] = useState(false)\n const { profile, event } = useNavContext()\n return (\n <div\n className={cn('tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6', {\n 'p-4': profileOpen,\n })}\n >\n <div className=\"flex items-center justify-between\" onClick={() => setProfileOpen(!profileOpen)}>\n <div className=\"flex items-center gap-[14px]\">\n <div className=\"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white\">\n <User />\n </div>\n <Text html={profile?.nick_name || profileAction?.welcome} className=\"text-base font-bold leading-[1.4]\" />\n </div>\n {!profile?.email && <DownArrow className={cn('size-5 laptop:size-4', { 'rotate-180': profileOpen })} />}\n </div>\n {profile?.email && (\n <div className=\"mt-4\">\n {profileAction?.profiles?.map((item: any) => <MenuItem key={item.id} label={item?.title} href={item?.url} />)}\n </div>\n )}\n {profileOpen && !profile?.email && (\n <div className=\"mt-4\">\n <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n <div className=\"mt-2 flex flex-col gap-1\">\n {profileAction?.benefits?.map((item: any) => (\n <div key={item.id} className=\"flex items-center gap-[6px]\">\n <Picture source={item.benefitIcon?.url} className=\"size-4\" alt={item.benefit} width={16} height={16} />\n <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))}\n </div>\n </div>\n )}\n {!profile?.email && (\n <div className=\"mt-4 flex items-center gap-3\">\n <Button className=\"tablet:flex-none flex-1\" variant=\"secondary\" size=\"base\" onClick={() => event?.join?.()}>\n <Text html={profileAction?.primaryButton || 'Join Now'} className=\"text-sm font-bold leading-[1.4]\" />\n </Button>\n <Button className=\"tablet:flex-none flex-1\" variant=\"primary\" size=\"base\" onClick={() => event?.login?.()}>\n <Text html={profileAction?.secondaryButton || 'Log In'} className=\"text-sm font-bold leading-[1.4]\" />\n </Button>\n </div>\n )}\n </div>\n )\n}\n\nconst PrimaryHeader = ({ menuOpen, onMenuOpenClose, onMenuOpenClick, actions }: MobilePrimaryNavigationData) => {\n return (\n <div className=\"flex h-full items-center justify-between gap-4\">\n <Logo />\n <div className=\"desktop:gap-6 flex items-center gap-4\">\n <Actions actions={actions} />\n {menuOpen ? (\n <Close className=\"size-5\" onClick={() => onMenuOpenClose()} />\n ) : (\n <Menu className=\"size-5\" onClick={() => onMenuOpenClick()} />\n )}\n </div>\n </div>\n )\n}\n\nconst Logo = () => {\n const { payloadData, isMobile } = useNavContext()\n return (\n <div\n className=\"[&>svg]:w-full hover:text-brand-0 cursor-pointer\"\n onClick={() => {\n window.location.href = '/'\n }}\n dangerouslySetInnerHTML={{\n __html: isMobile ? payloadData?.headerBar?.mobileLogo : payloadData?.headerBar?.desktopLogo,\n }}\n />\n )\n}\n\nconst Actions = forwardRef<HTMLDivElement, { actions: any; activeStatus?: boolean }>(\n ({ actions, activeStatus = false }, ref) => {\n const { event } = useNavContext()\n const [activeAction, setActiveAction] = useState<any>(null)\n\n const handleActionClick = useCallback(\n (action: any, index: number) => {\n setActiveAction(index)\n switch (action?.blockType) {\n case HeaderNavigationActionBlockType.Search:\n event?.search?.()\n break\n case HeaderNavigationActionBlockType.Cart:\n event?.cart?.()\n break\n case HeaderNavigationActionBlockType.Profile:\n event?.profile?.()\n break\n case HeaderNavigationActionBlockType.Livestream:\n event?.livestream?.()\n break\n default:\n return () => {}\n }\n },\n [event]\n )\n\n return (\n <div className=\"desktop:gap-6 flex items-center gap-4\">\n {Array.isArray(actions) &&\n actions?.map((action: any, index: number) => (\n <div\n key={action.id}\n ref={action.blockType === HeaderNavigationActionBlockType.Profile ? ref : null}\n onClick={() => handleActionClick(action, index)}\n >\n <Text\n html={action.icon}\n className={cn('cursor-pointer size-5', { 'text-brand-0': activeStatus && activeAction === index })}\n />\n </div>\n ))}\n </div>\n )\n }\n)\n\nconst SecondaryHeader = ({ title, onMenuOpenClose, onMenuBackClick }: MobileSecondaryNavigationData) => {\n return (\n <div className=\"flex h-full items-center gap-3\">\n <LeftArrow className=\"size-5\" onClick={() => onMenuBackClick()} />\n <Text html={title} className=\"flex-1 text-center text-base font-bold leading-[1.4]\" />\n <Close className=\"size-5\" onClick={() => onMenuOpenClose()} />\n </div>\n )\n}\n\nconst MenuItem = ({\n label,\n href,\n onClick,\n active,\n icon,\n className,\n}: {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}) => {\n return (\n <div className={cn('flex cursor-pointer items-center justify-between py-4', className)} onClick={onClick}>\n <Link href={href} asChild={!href} className=\"flex w-full items-center justify-between no-underline\">\n <div className=\"flex items-center gap-4\">\n <Text html={label} className={cn('text-sm font-bold leading-[1.4]', { underline: icon })} />\n {icon && <Text html={icon} />}\n </div>\n <RightArrow className={cn('size-5 laptop:size-4', { 'rotate-90': active })} />\n </Link>\n </div>\n )\n}\n\nexport default withLayout(HeaderNavigation)\n"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { Picture, Text, Button, Container, Link, Heading } from '../../components/index.js'\n\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { cn, atobID } from '../../helpers/utils.js'\n\nimport type {\n MobilePrimaryNavigationData,\n MobileSecondaryNavigationData,\n MobileNavigationProps,\n DesktopNavigationProps,\n HeaderNavigationProps,\n} from './types.js'\nimport NavProvider, { useNavContext } from './NavProvider.js'\n\nimport { HeaderNavigationMenu, HeaderNavigationBlockType, HeaderNavigationActionBlockType } from './types.js'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { debounce, throttle } from 'es-toolkit'\nimport jump from 'jump.js'\n\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\nimport { WithSidebar, WithSupports, WithMulticol, WithGroupCategory } from './withCategory.js'\n\nimport { Menu, Close, User, RightArrow, LeftArrow, DownArrow, Polygon } from './icons/index.js'\n\nimport NavigationSearch from '../NavigationSearch/index.js'\n\nconst HeaderNavigation = forwardRef<HTMLDivElement, HeaderNavigationProps>((props, ref) => {\n const {\n data: { headerNavigation } = {},\n buildProps,\n event,\n profile,\n theme = 'light',\n isTop = false,\n searchResult,\n onSearch,\n isSearching,\n keywords,\n } = props\n\n const searchRef = useRef<HTMLDivElement>(null)\n const [searchOpen, setSearchOpen] = useState(false)\n const [headerHidden, setHeaderHidden] = useState(false)\n const [changeHeaderBackground, setChangeHeaderBackground] = useState(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const headerRef = useRef<HTMLDivElement>(null)\n\n const resizeWindow = () => {\n const offsetWidth = document?.querySelector('body')?.offsetWidth || 0\n setIsMobile(offsetWidth <= 1440)\n }\n\n useEffect(() => {\n resizeWindow()\n window.addEventListener('resize', resizeWindow)\n return () => {\n window.removeEventListener('resize', resizeWindow)\n }\n }, [])\n\n useImperativeHandle(ref, () => headerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (headerRef.current && isTop) {\n jump(headerRef.current, { duration: 0, offset: headerRef.current?.getBoundingClientRect()?.bottom || 0 })\n }\n }, [isTop])\n\n // useEffect(() => {\n // let upwardDistance = 0\n // let lastScrollY = 0\n // const showDownNav = throttle(latest => {\n // const delta = lastScrollY - latest\n // if (delta > 0) {\n // upwardDistance += delta\n // if (upwardDistance >= 300) {\n // setHeaderHidden(false)\n // upwardDistance = 0\n // }\n // } else {\n // setHeaderHidden(latest > 300)\n // }\n // setChangeHeaderBackground(latest > 30)\n // lastScrollY = latest\n // }, 200)\n\n // const scrollAnimate = () => {\n // let scrollTop = 0\n // if (document?.documentElement && document?.documentElement?.scrollTop) {\n // scrollTop = document?.documentElement.scrollTop\n // } else if (document?.body) {\n // scrollTop = document?.body.scrollTop\n // }\n // showDownNav(scrollTop)\n // }\n\n // window.addEventListener('scroll', scrollAnimate)\n\n // return () => window.removeEventListener('scroll', scrollAnimate)\n // }, [])\n\n useEffect(() => {\n if (event) {\n event.search = () => setSearchOpen(true)\n }\n }, [event])\n\n useGSAP(() => {\n if (searchRef?.current && searchOpen) {\n gsap.fromTo(\n searchRef.current,\n {\n height: 0,\n },\n {\n height: 'auto',\n duration: 0.3,\n }\n )\n }\n }, [searchOpen])\n\n useEffect(() => {\n document.documentElement.style.overflow = searchOpen ? 'hidden' : 'auto'\n }, [searchOpen])\n\n const searchPage = useMemo(() => {\n return (\n headerNavigation?.headerBar?.actions?.find(\n (item: any) => item?.blockType === HeaderNavigationActionBlockType.Search\n )?.searchBar?.[0] || {}\n )\n }, [headerNavigation])\n\n return (\n <NavProvider\n buildProps={buildProps}\n profile={profile}\n isMobile={isMobile}\n event={event}\n payloadData={headerNavigation}\n >\n <header\n data-ui-component-id=\"HeaderNavigation\"\n // className={cn('sticky top-0 z-[100] transition-transform duration-500 ease-in-out', {\n // ['translate-y-[-100%]']: headerHidden,\n // })}\n className=\"relative z-[100]\"\n ref={headerRef}\n >\n <div\n className={cn(\"hover:text-black hover:bg-white\",\n theme === 'light' ? 'text-black' : 'text-white',\n // {\n // ['!bg-white transition-all duration-500 ease-in-out']: changeHeaderBackground,\n // },\n {\n // ['hover:!text-black']: theme === 'dark',\n // ['!text-black']: changeHeaderBackground,\n }\n )}\n onClick={() => setChangeHeaderBackground(true)}\n >\n <DesktopNavigation\n data={headerNavigation}\n className=\"hidden desktop:block\"\n theme={theme}\n onNavItemClick={() => setChangeHeaderBackground(true)}\n />\n <MobileNavigation data={headerNavigation} className=\"block desktop:hidden\" />\n {searchOpen && (\n <div\n className=\"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col\"\n style={{ height: `calc(100dvh - ${headerRef?.current?.getBoundingClientRect()?.top}px)` }}\n >\n <div ref={searchRef} className={cn('overflow-y-auto', {})}>\n <NavigationSearch\n data={searchPage}\n keywords={keywords}\n isSearching={isSearching}\n searchResult={searchResult}\n onSearch={(value: string) => {\n onSearch?.(value)\n }}\n onClose={() => {\n onSearch?.()\n setSearchOpen(false)\n }}\n />\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={() => setSearchOpen(false)} />\n </div>\n )}\n </div>\n </header>\n </NavProvider>\n )\n})\n\nconst DesktopNavigation = forwardRef<HTMLDivElement, DesktopNavigationProps>((props, ref) => {\n const { data, onNavItemClick, className, theme } = props\n const { event, profile } = useNavContext()\n const [downdownHover, setDowndownHover] = useState(false)\n\n const groupCategories = useMemo(() => {\n return WithGroupCategory(data?.categories?.filter((item: any) => item?.pcShow)) as any[][]\n }, [data])\n\n const [categoriesItem, setCategoriesItem] = useState<any>(null)\n const [navStatusArray, setNavStatusArray] = useState<{ index: number; groupIndex: number; open: boolean }[][]>([])\n const profileRef = useRef<HTMLDivElement>(null)\n const [userProfileOpen, setUserProfileOpen] = useState(false)\n const headerRef = useRef<HTMLDivElement>(null)\n const dropdownRef = useRef<HTMLDivElement>(null)\n const navItemRefs = useRef<HTMLDivElement[][]>(\n groupCategories.map((categories: any) => Array(categories?.length || 0).fill(null))\n )\n\n useEffect(() => {\n if (groupCategories?.length) {\n setNavStatusArray(\n groupCategories?.map((groupItem: any, groupIndex: number) => {\n return groupItem?.map((_: any, index: number) => ({ groupIndex, index, open: false }))\n })\n )\n }\n }, [groupCategories])\n\n const currentNavItem = useMemo(() => {\n let currentNavItem: { index: number; groupIndex: number; open: boolean } | null = null\n for (const groupItem of navStatusArray) {\n for (const item of groupItem) {\n if (item.open) {\n currentNavItem = item\n break\n }\n }\n if (currentNavItem) break\n }\n return currentNavItem\n }, [navStatusArray])\n\n useEffect(() => {\n document.documentElement.style.overflow = currentNavItem?.open || userProfileOpen ? 'hidden' : 'auto'\n }, [currentNavItem?.open, userProfileOpen])\n\n const handleNavItemClick = (e: any, groupIndex: number, index: number) => {\n setUserProfileOpen(false)\n if (categoriesItem?.components?.[0]?.blockType === HeaderNavigationBlockType.Links) {\n // link\u6A21\u5757\u7279\u6B8A\u5904\u7406\n categoriesItem?.components?.[0]?.url && window.open(categoriesItem?.components?.[0]?.url)\n } else {\n e.stopPropagation()\n onNavItemClick?.()\n setCategoriesItem(groupCategories[groupIndex][index])\n setNavStatusArray(prev =>\n prev.map(groupItem =>\n groupItem.map(item =>\n item.groupIndex === groupIndex && item.index === index\n ? { ...item, open: !item.open }\n : { ...item, open: false }\n )\n )\n )\n }\n }\n\n const handleNavMenuClose = () => {\n setNavStatusArray(prev => prev.map(groupItem => groupItem.map(item => ({ ...item, open: false }))))\n }\n\n const currentBlockTypeCategories = useMemo(() => {\n if (categoriesItem) return categoriesItem?.components?.[0]?.blockType\n }, [categoriesItem])\n\n const SidebarDropdownComp = WithSidebar(SidebarDropdown, categoriesItem)\n const MulticolDropdownComp = WithMulticol(MulticolDropdown, categoriesItem)\n const SupportsDropdownComp = WithSupports(SupportsDropdown, {\n categoriesItem,\n currentNavItemRef: navItemRefs.current?.[currentNavItem?.groupIndex || 0]?.[currentNavItem?.index || 0],\n })\n\n const DropdownComp = useMemo(() => {\n switch (currentBlockTypeCategories) {\n case HeaderNavigationBlockType.Sidebar:\n return <SidebarDropdownComp />\n case HeaderNavigationBlockType.Supports:\n return <SupportsDropdownComp />\n case HeaderNavigationBlockType.Multicol:\n return <MulticolDropdownComp />\n default:\n return null\n }\n }, [currentBlockTypeCategories, categoriesItem])\n\n const actions = useMemo(() => {\n return data?.headerBar?.actions?.filter((item: any) => item?.pcShow)\n }, [data])\n\n const profileAction = useMemo(() => {\n return actions?.find((item: any) => item?.blockType === HeaderNavigationActionBlockType.Profile)\n }, [actions])\n\n const handleProfileClick = useCallback(() => {\n setUserProfileOpen(prev => !prev)\n }, [])\n\n useEffect(() => {\n if (profileRef?.current) {\n const profileRefElement = profileRef.current as HTMLDivElement\n profileRefElement.addEventListener('click', handleProfileClick)\n\n return () => {\n profileRefElement.removeEventListener('click', handleProfileClick)\n }\n }\n }, [handleProfileClick])\n\n useGSAP(() => {\n if (currentNavItem?.open) {\n gsap.fromTo(\n dropdownRef?.current,\n {\n height: 0,\n },\n {\n height: 'auto',\n }\n )\n }\n }, [currentNavItem?.open])\n\n return (\n <Container className={cn('relative h-[96px]', className)}>\n <div ref={headerRef} onClick={handleNavMenuClose} className=\"flex h-full flex-col justify-end gap-4\">\n <div className=\"flex items-center justify-between\">\n <Logo />\n <Actions ref={profileRef} actions={actions} activeStatus={userProfileOpen} />\n </div>\n <div className=\"flex justify-between\">\n {groupCategories?.map((groupItem: any, groupIndex: number) => {\n return (\n <div key={`groupCategory-${groupIndex}`} className=\"flex gap-3\">\n {groupItem?.map((item: any, index: number) => {\n return (\n <div\n key={item.id}\n ref={(el: HTMLDivElement) => {\n navItemRefs.current[groupIndex][index] = el\n }}\n className=\"group cursor-pointer\"\n >\n <div className=\"relative\">\n <div\n className=\"flex items-center gap-1 pb-4\"\n onClick={e => handleNavItemClick(e, groupIndex, index)}\n >\n <Text html={item.text} className=\"text-sm font-bold leading-[1.4]\" />\n <DownArrow\n className={cn('opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500', {\n ['rotate-180']:\n currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n ['opacity-100']:\n downdownHover &&\n currentNavItem?.groupIndex === groupIndex &&\n currentNavItem?.index === index,\n })}\n />\n </div>\n <div\n className={cn(\n 'absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500',\n {\n 'w-[calc(100%-20px)]':\n currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n },\n theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]',\n )}\n />\n </div>\n </div>\n )\n })}\n </div>\n )\n })}\n </div>\n </div>\n <div\n className={cn(\n 'border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden',\n {\n hidden: !(currentNavItem?.open && categoriesItem),\n }\n )}\n onMouseEnter={() => setDowndownHover(true)}\n onMouseLeave={() => setDowndownHover(false)}\n style={{ height: `calc(100dvh - ${headerRef?.current?.getBoundingClientRect()?.bottom}px)` }}\n >\n <div\n ref={dropdownRef}\n className={cn('relative z-50', {\n 'overflow-hidden': currentBlockTypeCategories !== HeaderNavigationBlockType.Supports,\n })}\n >\n {DropdownComp}\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={handleNavMenuClose} />\n </div>\n {userProfileOpen && (\n <div\n className=\"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full\"\n // style={{\n // height: `calc(100dvh - ${profileRef?.current?.getBoundingClientRect()?.bottom}px)`,\n // top: `calc(96px)`,\n // }}\n >\n <div\n className=\"absolute w-[272px] bg-white p-4\"\n style={{\n right: `calc(100% - ${profileRef?.current?.getBoundingClientRect()?.right}px)`,\n top: '-36px',\n }}\n >\n {profile?.email ? (\n <>\n <Text html={profile?.nick_name || profileAction?.welcome} className=\"text-sm font-bold\" />\n <div className=\"h-[1px] mt-2 bg-[#D9D9D9]\" />\n <div className=\"mt-2\">\n {profileAction?.profiles?.map((item: any) => (\n <MenuItem className=\"py-2\" key={item.id} label={item?.title} href={item?.url} />\n ))}\n </div>\n </>\n ) : (\n <>\n <Polygon className=\"absolute -top-2 text-white right-[46px] z-30\" />\n <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n <div className=\"mt-2 flex flex-col gap-1\">\n {profileAction?.benefits?.map((item: any) => (\n <div key={item.id} className=\"flex items-center gap-[6px]\">\n <Picture\n source={item.benefitIcon?.url}\n className=\"size-4\"\n alt={item.benefit}\n width={16}\n height={16}\n />\n <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))}\n </div>\n <div className=\"mt-4 flex items-center gap-2\">\n <Button variant=\"secondary\" size=\"lg\" onClick={() => event?.join?.()}>\n <Text html={profileAction?.primaryButton || 'Join Now'} className=\"font-bold\" />\n </Button>\n <Button variant=\"primary\" size=\"lg\" onClick={() => event?.login?.()}>\n <Text html={profileAction?.secondaryButton || 'Log In'} className=\"font-bold\" />\n </Button>\n </div>\n </>\n )}\n </div>\n <div className=\"flex-1 bg-transparent\" onClick={() => setUserProfileOpen(false)} />\n </div>\n )}\n </Container>\n )\n})\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata])\n\n const handleSubcategoryOpen = useCallback(\n (index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0\n ? setActiveSubSubcategoryIndex(0)\n : setActiveSubSubcategoryIndex(-1)\n\n if (subcategoryItem?.subSubCategories?.length > 0) {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n } else {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n const withSubSubCategoriesIndex = subcategories?.findIndex((item: any) => !!item?.subSubCategories)\n setExpandedSubcategory(prev =>\n prev.map(item => {\n return { ...item, open: item.index === index || item.index === withSubSubCategoriesIndex }\n })\n )\n }\n },\n [sidebarCategoriesMetadata, initExpandedSubcategory]\n )\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n return (\n <div key={`subcategoryItem-${index}`}>\n <div\n className={cn('flex cursor-pointer items-center justify-between', {\n 'bg-[#F5F5F7]':\n !hasSubSubCategory && expandedSubcategory?.find(item => item.index === index)?.open,\n })}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n }}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n className={cn('size-4', {\n ['rotate-180']: expandedSubcategory?.find(item => item.index === index)?.open,\n })}\n />\n )}\n </div>\n {expandedSubcategory?.find(item => item.index === index)?.open && (\n <div className=\"flex flex-col\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <Text\n html={subSubItem.label}\n onClick={() => handleSubSubcategoryOpen(index, subSubindex)}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n />\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.primary?.url}\n variant=\"primary\"\n size=\"lg\"\n className=\"text-sm lg-desktop:text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"justify-start !p-0 text-sm lg-desktop:text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"text-xl lg-desktop:text-2xl font-bold leading-[1.4]\"\n />\n {/* {matchSeriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={matchSeriesMetadata?.primary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )} */}\n </div>\n <Link\n href={matchSeriesMetadata?.guide?.url}\n className=\"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]\"\n >\n {matchSeriesMetadata?.guide?.label}\n </Link>\n </div>\n )}\n <div\n className=\"flex flex-col gap-4 overflow-y-auto h-[426px]\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} className=\"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]\" />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n key={`seriesProductItem-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n // useGSAP(() => {\n // gsap.fromTo(\n // multicolDropdownRef?.current,\n // {\n // height: 0,\n // },\n // {\n // height: 'auto',\n // duration: 0.5,\n // }\n // )\n // }, [])\n\n return (\n <div ref={multicolDropdownRef}>\n <Container childClassName=\"bg-white\" className=\"h-full\">\n <div className=\"flex gap-4 py-4\">\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n <MulticolItem item={item} />\n </div>\n ))}\n </div>\n </Container>\n </div>\n )\n}\n\n/**\n * supports\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n * @param currentNavItemRef \u5F53\u524D\u5BFC\u822A\u9879\n */\nconst SupportsDropdown = ({\n supportsMetadata,\n currentNavItemRef,\n}: {\n supportsMetadata: any\n currentNavItemRef: HTMLDivElement\n}) => {\n const supportsDropdownRef = useRef<HTMLDivElement>(null)\n const [navItemReact, setNavItemReact] = useState<DOMRect | null>(null)\n const [supportsDropdownHeight, setSupportsDropdownHeight] = useState(0)\n\n // useGSAP(() => {\n // gsap.fromTo(\n // supportsDropdownRef?.current,\n // {\n // height: 0,\n // },\n // {\n // height: supportsDropdownHeight,\n // duration: 0.5,\n // }\n // )\n // }, [supportsDropdownHeight])\n\n useEffect(() => {\n if (supportsDropdownRef?.current) {\n const rect = supportsDropdownRef?.current?.getBoundingClientRect()\n setSupportsDropdownHeight(rect.height)\n }\n }, [supportsDropdownRef])\n\n const debouncedHandleResize = debounce(() => {\n if (currentNavItemRef) {\n const rect = currentNavItemRef.getBoundingClientRect()\n setNavItemReact(rect)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n useEffect(() => {\n if (currentNavItemRef) {\n const rect = currentNavItemRef.getBoundingClientRect()\n setNavItemReact(rect)\n }\n }, [currentNavItemRef])\n\n return (\n <div\n className=\"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden\"\n style={{ right: `calc(100% - ${navItemReact?.right}px)`, height: supportsDropdownHeight }}\n >\n <div ref={supportsDropdownRef} className=\"p-4\">\n {supportsMetadata?.map((supportItem: any) => (\n <div key={supportItem.id} className=\"py-2\">\n <Link href={supportItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n {supportItem.label}\n </Link>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nconst SeriesProductItem = ({ product, isCollection }: { product: any; isCollection?: boolean }) => {\n const { buildProps } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105\">\n <div className=\"shrink-0\">\n <Picture\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string) => (\n <Text\n as=\"p\"\n html={tag}\n className=\"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n {/* {product?.badge && (\n <Text\n as=\"p\"\n html={product?.badge}\n className=\"text-brand-0 mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n )} */}\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n </Link>\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nconst MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n return (\n <>\n {item?.columns && (\n <>\n <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2 flex flex-col\">\n {item.columns?.map((columnItem: any) => (\n <div key={columnItem.label} className=\"py-2 flex items-center gap-1\">\n <Link href={columnItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n {columnItem.label}\n </Link>\n {columnItem?.badge && (\n <Text\n as=\"p\"\n html={columnItem?.badge || 'badge'}\n className=\"text-sm font-bold !leading-[24px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]\"\n />\n )}\n </div>\n ))}\n </div>\n </>\n )}\n {item?.imageUrl && (\n <div\n className={cn(\n 'laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden',\n {\n ['tablet:max-w-none laptop:max-w-none']: allPicture,\n }\n )}\n >\n <Picture\n source={item.imageUrl}\n width={404}\n height={280}\n className=\"size-full\"\n imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n />\n <Link href={item.url} className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n <Text\n html={item.title}\n className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n {item.subtitle && (\n <Text\n html={item.subtitle}\n className={cn('text-sm font-bold leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n )}\n {item?.primary?.label && (\n <Button\n as=\"a\"\n href={item?.primary?.url}\n variant=\"link\"\n size=\"lg\"\n className={cn('text-sm font-bold mr-auto !p-0 leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n >\n {item?.primary?.label || 'more'}\n </Button>\n )}\n </Link>\n </div>\n )}\n </>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5BFC\u822A\n * @param menuHeight \u83DC\u5355\u9AD8\u5EA6\n * @param data \u5BFC\u822A\u6570\u636E\n */\nconst MobileNavigation = forwardRef<HTMLDivElement, MobileNavigationProps>(({ data, className }, ref) => {\n const groupCategories = useMemo(() => {\n return WithGroupCategory(data?.categories?.filter((item: any) => item?.mobileShow))\n }, [data])\n\n const { currentMenu, setCurrentMenu, subSubCategory } = useNavContext()\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false)\n const [menuInnerHeight, setMenuInnerHeight] = useState(0)\n const [categoriesItem, setCategoriesItem] = useState<any>(null)\n\n const mobileMenuRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (mobileMenuRef?.current && mobileMenuOpen) {\n const rect = mobileMenuRef?.current?.getBoundingClientRect()\n setMenuInnerHeight(window?.innerHeight - (rect?.bottom || 0))\n }\n }, [mobileMenuOpen])\n\n useGSAP(() => {\n gsap.fromTo(\n mobileMenuRef.current,\n {\n height: 0,\n },\n {\n height: menuInnerHeight,\n duration: 0.3,\n }\n )\n }, [menuInnerHeight])\n\n useEffect(() => {\n document.documentElement.style.overflow = mobileMenuOpen ? 'hidden' : 'auto'\n }, [mobileMenuOpen])\n\n const currentBlockTypeCategories = useMemo(() => {\n return categoriesItem?.components?.[0]?.blockType\n }, [categoriesItem])\n\n const MobileSupportMenuComp = WithSupports(MobileSupportMenu, {\n categoriesItem,\n })\n\n const MobileSidebarMenuComp = WithSidebar(MobileSidebarMenu, categoriesItem)\n const MobileMulticolMenuComp = WithMulticol(MobileMulticolMenu, categoriesItem)\n\n const MobileCategoriesMenuComp = useMemo(() => {\n switch (currentBlockTypeCategories) {\n case HeaderNavigationBlockType.Sidebar:\n return <MobileSidebarMenuComp />\n case HeaderNavigationBlockType.Supports:\n return <MobileSupportMenuComp />\n case HeaderNavigationBlockType.Multicol:\n return <MobileMulticolMenuComp />\n default:\n return null\n }\n }, [currentBlockTypeCategories, categoriesItem, MobileSupportMenuComp])\n\n const handleSecondaryMenuClose = useCallback(() => {\n setMobileMenuOpen(false)\n setMenuInnerHeight(0)\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Primary)\n }, [setMobileMenuOpen, setMenuInnerHeight, setCurrentMenu])\n\n const menuActions = useMemo(() => {\n return data?.headerBar?.actions?.filter(\n (item: any) => item?.mobileShow && item?.blockType !== HeaderNavigationActionBlockType.Profile // \u79FB\u52A8\u7AEF\u4E0D\u663E\u793Aprofile\u6309\u94AE\n )\n }, [data])\n\n const profileAction = useMemo(() => {\n return (\n data?.headerBar?.actions?.find(\n (item: any) => item?.mobileShow && item?.blockType === HeaderNavigationActionBlockType.Profile\n ) || {}\n )\n }, [data])\n\n const MobileCategoriesHeaderComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Primary:\n return (\n <PrimaryHeader\n actions={menuActions}\n menuOpen={mobileMenuOpen}\n onMenuOpenClose={() => {\n setMobileMenuOpen(false)\n setMenuInnerHeight(0)\n }}\n onMenuOpenClick={() => setMobileMenuOpen(true)}\n />\n )\n case HeaderNavigationMenu.Secondary:\n return (\n <SecondaryHeader\n title={categoriesItem?.text}\n onMenuOpenClose={handleSecondaryMenuClose}\n onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Primary)}\n />\n )\n case HeaderNavigationMenu.Third:\n return (\n <SecondaryHeader\n title={subSubCategory?.label}\n onMenuOpenClose={handleSecondaryMenuClose}\n onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Secondary)}\n />\n )\n default:\n return null\n }\n }, [\n mobileMenuOpen,\n currentMenu,\n setCurrentMenu,\n categoriesItem,\n menuActions,\n subSubCategory,\n handleSecondaryMenuClose,\n ])\n\n const handlePrimaryMenuClick = useCallback(\n (groupIndex: number, index: number) => {\n const categoriesItem = Array.isArray(groupCategories)\n ? Array.isArray(groupCategories[groupIndex])\n ? groupCategories[groupIndex][index]\n : {}\n : {}\n setCategoriesItem(categoriesItem)\n if (categoriesItem?.components?.[0]?.blockType === HeaderNavigationBlockType.Links) {\n // link\u6A21\u5757\u7279\u6B8A\u5904\u7406\n categoriesItem?.components?.[0]?.url && window.open(categoriesItem?.components?.[0]?.url)\n } else {\n setCurrentMenu?.(HeaderNavigationMenu.Secondary)\n }\n },\n [groupCategories, setCurrentMenu]\n )\n\n return (\n <Container className={cn('relative h-[52px]', className)}>\n {/* \u79FB\u52A8\u7AEF\u5206\u7C7B\u83DC\u5355 */}\n {MobileCategoriesHeaderComp}\n {mobileMenuOpen && (\n <div\n ref={mobileMenuRef}\n className=\"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white\"\n style={{ height: menuInnerHeight }}\n >\n {currentMenu === HeaderNavigationMenu.Primary ? (\n <MobilePrimaryMenu\n categories={groupCategories}\n onPrimaryMenuClick={handlePrimaryMenuClick}\n profileAction={profileAction}\n />\n ) : (\n MobileCategoriesMenuComp\n )}\n </div>\n )}\n </Container>\n )\n})\n\n/**\n * \u79FB\u52A8\u7AEF\u4E00\u7EA7\u83DC\u5355\n * @param categories \u5206\u7C7B\n * @param onPrimaryMenuClick \u4E00\u7EA7\u83DC\u5355\u70B9\u51FB\n */\nconst MobilePrimaryMenu = ({\n categories,\n onPrimaryMenuClick,\n profileAction,\n}: {\n categories: any\n onPrimaryMenuClick: (groupIndex: number, index: number) => void\n profileAction: any\n}) => {\n return (\n <div className=\"flex h-full flex-col justify-between\">\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {categories?.map((groupItem: any, groupIndex: number) => (\n <div key={`groupCategory-${groupIndex}`} className=\"\">\n {groupItem?.map((item: any, index: number) => (\n <MenuItem\n key={item.id}\n label={item.text}\n onClick={() => onPrimaryMenuClick(groupIndex, index)}\n icon={item.components?.[0]?.icon}\n />\n ))}\n <div\n className={cn('my-2 h-px w-full bg-[#E5E5E7]', { ['hidden']: groupIndex === categories.length - 1 })}\n />\n </div>\n ))}\n </div>\n <ProfileComp profileAction={profileAction} />\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nconst MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, sidebarCategoriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata]\n )\n\n const defaultGuide = useMemo(() => {\n return seriesMetadata?.find((item: any) => !!item?.guide)?.guide\n }, [seriesMetadata, sidebarCategoriesMetadata])\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n }}\n />\n {/* {expandedSubcategory.find(item => item.index === index)?.open &&\n item.subSubCategories?.map((subItem: any, subIndex: number) => (\n <div\n key={`${index}-${subIndex}`}\n className=\"px-2 py-4\"\n onClick={() => handleSubSubCategoryClick(item, subIndex)}\n >\n <Text html={subItem.label} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))} */}\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.primary?.url}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() =>\n setExpandedSeriesCategories(prev => prev.map((item, i) => ({ ...item, open: i === index })))\n }\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"text-center my-4\">\n <Button\n as=\"a\"\n href={matchSeriesMetadata?.primary?.url}\n className=\"text-base no-underline leading-[1.2]\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"text-center my-4 \">\n <Button\n as=\"a\"\n href={currentSeriesMetadata?.primary?.url}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base no-underline leading-[1.2]\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n {defaultGuide && (\n <Link href={defaultGuide?.url}>\n <div className=\"mt-4\">\n <Text html={defaultGuide?.label} className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\" />\n </div>\n </Link>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n setCurrentMenu,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n setSubSubCategory,\n subSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n ])\n\n return MobileSidebarMenuComp\n}\n\nconst SubSubCategoryItemComp = ({\n matchSeriesMetadata,\n onSubSubCategoryItemClick,\n expanded,\n}: {\n matchSeriesMetadata: any\n onSubSubCategoryItemClick?: () => void\n expanded?: boolean\n}) => {\n return (\n <div className=\"tablet:pt-0 py-4 flex items-center justify-between\" onClick={onSubSubCategoryItemClick}>\n {matchSeriesMetadata?.label && (\n <Text html={matchSeriesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n )}\n {onSubSubCategoryItemClick && (\n <DownArrow\n className={cn('size-5', {\n ['rotate-180']: expanded,\n })}\n />\n )}\n </div>\n )\n}\n\nconst SubSubCategoryContentComp = ({ matchSeriesMetadata }: { matchSeriesMetadata: any }) => {\n return (\n <div className=\"flex flex-col gap-2 laptop:gap-3\">\n {!!matchSeriesMetadata?.series?.length &&\n matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n <div key={`seriesItem-${pIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} className=\"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]\" />\n )}\n <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n key={`seriesProductItem-${pIndex}-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFsupport\u83DC\u5355\n * @param supportsMetadata support\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileSupportMenu = ({ supportsMetadata }: { supportsMetadata: any }) => {\n return (\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {supportsMetadata?.map((supportItem: any) => (\n <MenuItem key={supportItem.id} href={supportItem.url} label={supportItem.label} onClick={() => {}} />\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFmulticol\u83DC\u5355\n * @param multicolMetadata multicol\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileMulticolMenu = ({ multicolMetadata }: { multicolMetadata: any }) => {\n // \u662F\u5426\u5168\u90E8\u662F\u56FE\u7247\n const allPicture = useMemo(() => {\n return !multicolMetadata?.some((item: any) => !!item.columns)\n }, [multicolMetadata])\n\n return (\n <div\n className={cn('tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4', {\n ['tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4']: allPicture,\n })}\n >\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`}>\n <MulticolItem item={item} allPicture={allPicture} />\n </div>\n ))}\n </div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEFprofile\u7EC4\u4EF6\n * @param profileAction profile\u83DC\u5355\u5143\u6570\u636E\n */\nconst ProfileComp = ({ profileAction }: { profileAction: any }) => {\n const [profileOpen, setProfileOpen] = useState(false)\n const { profile, event } = useNavContext()\n return (\n <div\n className={cn('tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6', {\n 'p-4': profileOpen,\n })}\n >\n <div className=\"flex items-center justify-between\" onClick={() => setProfileOpen(!profileOpen)}>\n <div className=\"flex items-center gap-[14px]\">\n <div className=\"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white\">\n <User />\n </div>\n <Text html={profile?.nick_name || profileAction?.welcome} className=\"text-base font-bold leading-[1.4]\" />\n </div>\n {!profile?.email && <DownArrow className={cn('size-5 laptop:size-4', { 'rotate-180': profileOpen })} />}\n </div>\n {profile?.email && (\n <div className=\"mt-4\">\n {profileAction?.profiles?.map((item: any) => <MenuItem key={item.id} label={item?.title} href={item?.url} />)}\n </div>\n )}\n {profileOpen && !profile?.email && (\n <div className=\"mt-4\">\n <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n <div className=\"mt-2 flex flex-col gap-1\">\n {profileAction?.benefits?.map((item: any) => (\n <div key={item.id} className=\"flex items-center gap-[6px]\">\n <Picture source={item.benefitIcon?.url} className=\"size-4\" alt={item.benefit} width={16} height={16} />\n <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n </div>\n ))}\n </div>\n </div>\n )}\n {!profile?.email && (\n <div className=\"mt-4 flex items-center gap-3\">\n <Button className=\"tablet:flex-none flex-1\" variant=\"secondary\" size=\"base\" onClick={() => event?.join?.()}>\n <Text html={profileAction?.primaryButton || 'Join Now'} className=\"text-sm font-bold leading-[1.4]\" />\n </Button>\n <Button className=\"tablet:flex-none flex-1\" variant=\"primary\" size=\"base\" onClick={() => event?.login?.()}>\n <Text html={profileAction?.secondaryButton || 'Log In'} className=\"text-sm font-bold leading-[1.4]\" />\n </Button>\n </div>\n )}\n </div>\n )\n}\n\nconst PrimaryHeader = ({ menuOpen, onMenuOpenClose, onMenuOpenClick, actions }: MobilePrimaryNavigationData) => {\n return (\n <div className=\"flex h-full items-center justify-between gap-4\">\n <Logo />\n <div className=\"desktop:gap-6 flex items-center gap-4\">\n <Actions actions={actions} />\n {menuOpen ? (\n <Close className=\"size-5\" onClick={() => onMenuOpenClose()} />\n ) : (\n <Menu className=\"size-5\" onClick={() => onMenuOpenClick()} />\n )}\n </div>\n </div>\n )\n}\n\nconst Logo = () => {\n const { payloadData, isMobile } = useNavContext()\n return (\n <div\n className=\"[&>svg]:w-full hover:text-brand-0 cursor-pointer\"\n onClick={() => {\n window.location.href = '/'\n }}\n dangerouslySetInnerHTML={{\n __html: isMobile ? payloadData?.headerBar?.mobileLogo : payloadData?.headerBar?.desktopLogo,\n }}\n />\n )\n}\n\nconst Actions = forwardRef<HTMLDivElement, { actions: any; activeStatus?: boolean }>(\n ({ actions, activeStatus = false }, ref) => {\n const { event } = useNavContext()\n const [activeAction, setActiveAction] = useState<any>(null)\n\n const handleActionClick = useCallback(\n (action: any, index: number) => {\n setActiveAction(index)\n switch (action?.blockType) {\n case HeaderNavigationActionBlockType.Search:\n event?.search?.()\n break\n case HeaderNavigationActionBlockType.Cart:\n event?.cart?.()\n break\n case HeaderNavigationActionBlockType.Profile:\n event?.profile?.()\n break\n case HeaderNavigationActionBlockType.Livestream:\n event?.livestream?.()\n break\n default:\n return () => {}\n }\n },\n [event]\n )\n\n return (\n <div className=\"desktop:gap-6 flex items-center gap-4\">\n {Array.isArray(actions) &&\n actions?.map((action: any, index: number) => (\n <div\n key={action.id}\n ref={action.blockType === HeaderNavigationActionBlockType.Profile ? ref : null}\n onClick={() => handleActionClick(action, index)}\n >\n <Text\n html={action.icon}\n className={cn('cursor-pointer size-5', { 'text-brand-0': activeStatus && activeAction === index })}\n />\n </div>\n ))}\n </div>\n )\n }\n)\n\nconst SecondaryHeader = ({ title, onMenuOpenClose, onMenuBackClick }: MobileSecondaryNavigationData) => {\n return (\n <div className=\"flex h-full items-center gap-3\">\n <LeftArrow className=\"size-5\" onClick={() => onMenuBackClick()} />\n <Text html={title} className=\"flex-1 text-center text-base font-bold leading-[1.4]\" />\n <Close className=\"size-5\" onClick={() => onMenuOpenClose()} />\n </div>\n )\n}\n\nconst MenuItem = ({\n label,\n href,\n onClick,\n active,\n icon,\n className,\n}: {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}) => {\n return (\n <div className={cn('flex cursor-pointer items-center justify-between py-4', className)} onClick={onClick}>\n <Link href={href} asChild={!href} className=\"flex w-full items-center justify-between no-underline\">\n <div className=\"flex items-center gap-4\">\n <Text html={label} className={cn('text-sm font-bold leading-[1.4]', { underline: icon })} />\n {icon && <Text html={icon} />}\n </div>\n <RightArrow className={cn('size-5 laptop:size-4', { 'rotate-90': active })} />\n </Link>\n </div>\n )\n}\n\nexport default withLayout(HeaderNavigation)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["HeaderNavigation_exports", "__export", "HeaderNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "import_NavProvider", "import_types", "import_react_responsive", "import_es_toolkit", "import_jump", "import_gsap", "import_withCategory", "import_icons", "import_NavigationSearch", "HeaderNavigation", "props", "ref", "headerNavigation", "buildProps", "event", "profile", "theme", "isTop", "searchResult", "onSearch", "isSearching", "keywords", "searchRef", "searchOpen", "setSearchOpen", "headerHidden", "setHeaderHidden", "changeHeaderBackground", "setChangeHeaderBackground", "isMobile", "setIsMobile", "headerRef", "resizeWindow", "offsetWidth", "jump", "searchPage", "item", "NavProvider", "DesktopNavigation", "MobileNavigation", "NavigationSearch", "value", "data", "onNavItemClick", "className", "downdownHover", "setDowndownHover", "groupCategories", "categoriesItem", "setCategoriesItem", "navStatusArray", "setNavStatusArray", "profileRef", "userProfileOpen", "setUserProfileOpen", "dropdownRef", "navItemRefs", "categories", "groupItem", "groupIndex", "_", "index", "currentNavItem", "handleNavItemClick", "e", "prev", "handleNavMenuClose", "currentBlockTypeCategories", "SidebarDropdownComp", "SidebarDropdown", "MulticolDropdownComp", "MulticolDropdown", "SupportsDropdownComp", "SupportsDropdown", "DropdownComp", "actions", "profileAction", "handleProfileClick", "profileRefElement", "Logo", "Actions", "el", "MenuItem", "React", "sidebarCategoriesMetadata", "seriesMetadata", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "withoutSubSubCategoriesIndex", "expandedStates", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "multicolMetadata", "multicolDropdownRef", "MulticolItem", "supportsMetadata", "currentNavItemRef", "supportsDropdownRef", "navItemReact", "setNavItemReact", "supportsDropdownHeight", "setSupportsDropdownHeight", "rect", "debouncedHandleResize", "supportItem", "isCollection", "productData", "variant", "listingLink", "tags", "tag", "allPicture", "columnItem", "currentMenu", "setCurrentMenu", "subSubCategory", "mobileMenuOpen", "setMobileMenuOpen", "menuInnerHeight", "setMenuInnerHeight", "mobileMenuRef", "MobileSupportMenuComp", "MobileSupportMenu", "MobileSidebarMenuComp", "MobileSidebarMenu", "MobileMulticolMenuComp", "MobileMulticolMenu", "MobileCategoriesMenuComp", "handleSecondaryMenuClose", "menuActions", "MobileCategoriesHeaderComp", "PrimaryHeader", "SecondaryHeader", "handlePrimaryMenuClick", "MobilePrimaryMenu", "onPrimaryMenuClick", "ProfileComp", "setSubSubCategory", "setCurrentSeriesMetadata", "expandedSeriesCategories", "setExpandedSeriesCategories", "handleSubSubCategoryClick", "subIndex", "curSeriesMetadata", "defaultGuide", "subSubCategoryItem", "SubSubCategoryItemComp", "i", "SubSubCategoryContentComp", "onSubSubCategoryItemClick", "expanded", "pIndex", "profileOpen", "setProfileOpen", "menuOpen", "onMenuOpenClose", "onMenuOpenClick", "payloadData", "activeStatus", "activeAction", "setActiveAction", "handleActionClick", "action", "title", "onMenuBackClick", "label", "href", "onClick", "active", "icon"]
|
|
7
7
|
}
|