@anker-in/headless-ui 1.0.26-alpha.1762509077023 → 1.0.26-temp-111001

package/dist/esm/biz-components/HeaderNavigation/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as X,jsx as e,jsxs as n}from"react/jsx-runtime";import we,{forwardRef as ee,useCallback as K,useEffect as H,useImperativeHandle as Ce,useMemo as L,useRef as F,useState as M}from"react";import{Picture as Q,Text as y,Button as T,Container as te,Link as O,Heading as ce}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as N,atobID as De}from"../../helpers/utils.js";import Le,{useNavContext as I}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as W,HeaderNavigationActionBlockType as _}from"./types.js";import"react-responsive";import{debounce as Me}from"es-toolkit";import Pe from"jump.js";import{useGSAP as se}from"@gsap/react";import{gsap as ie}from"gsap";import{WithSidebar as de,WithSupports as ue,WithMulticol as me,WithGroupCategory as pe}from"./withCategory.js";import{Menu as ze,Close as be,User as Ee,RightArrow as He,LeftArrow as Be,DownArrow as ae,Polygon as Te}from"./icons/index.js";import $e from"../NavigationSearch/index.js";const Re=ee((t,a)=>{const{data:{headerNavigation:l}={},buildProps:c,event:r,profile:b,theme:d="light",isTop:u=!1,searchResult:i,onSearch:k,isSearching:s,keywords:w,onPrimaryNavClick:x,onSeriesProductClick:f,onSidebarNavClick:v,headerId:g,cartCount:m}=t,o=F(null),[p,C]=M(!1),[S,z]=M(!1),[D,U]=M(!1),[J,P]=M(!1),R=F(null),A=()=>{const G=document?.querySelector("body")?.offsetWidth||0;P(G<=1440)};H(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),Ce(a,()=>R.current),H(()=>{R.current&&u&&Pe(R.current,{duration:0,offset:R.current?.getBoundingClientRect()?.bottom||0})},[u]),H(()=>{r&&(r.search=()=>C(!0))},[r]),se(()=>{o?.current&&p&&ie.fromTo(o.current,{height:0},{height:"auto",duration:.3})},[p]),H(()=>{document.documentElement.style.overflow=p?"hidden":"auto"},[p]);const ne=L(()=>l?.headerBar?.actions?.find(G=>G?.blockType===_.Search)?.searchBar?.[0]||{},[l]);return e(Le,{buildProps:c,profile:b,isMobile:J,event:r,payloadData:l,onSidebarNavClick:v,onSeriesProductClick:f,cartCount:m,children:e("header",{id:g||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:R,children:n("div",{className:N("hover:text-black hover:bg-white",d==="light"?"text-black":"text-white",{}),onClick:()=>U(!0),children:[e(Ae,{data:l,className:"hidden desktop:block !bg-white",theme:d,onNavItemClick:()=>U(!0),onPrimaryNavClick:x}),e(Oe,{data:l,className:"block desktop:hidden !bg-white",onPrimaryNavClick:x}),p&&n("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.top}px)`},children:[e("div",{ref:o,className:N("overflow-y-auto",{}),children:e($e,{data:ne,keywords:w,isSearching:s,searchResult:i,onSearch:G=>{k?.(G)},onClose:()=>{k?.(),C(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>C(!1)})]})]})})})}),Ae=ee((t,a)=>{const{data:l,onNavItemClick:c,className:r,theme:b,onPrimaryNavClick:d}=t,{event:u,profile:i}=I(),[k,s]=M(!1),w=L(()=>pe(l?.categories?.filter(h=>h?.pcShow)),[l]),[x,f]=M(null),[v,g]=M([]),m=F(null),[o,p]=M(!1),C=F(null),S=F(null),z=F(w.map(h=>Array(h?.length||0).fill(null)));H(()=>{w?.length&&g(w?.map((h,E)=>h?.map((B,j)=>({groupIndex:E,index:j,open:!1}))))},[w]);const D=L(()=>{let h=null;for(const E of v){for(const B of E)if(B.open){h=B;break}if(h)break}return h},[v]);H(()=>{document.documentElement.style.overflow=D?.open||o?"hidden":"auto"},[D?.open,o]);const U=(h,E,B)=>{if(p(!1),x?.components?.[0]?.blockType===W.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const j=w?.flat()||[],q=j?.findIndex(re=>re?.id===w[E][B]?.id);h.stopPropagation(),c?.(),d?.(j[q],q),f(w[E][B]),g(re=>re.map(ke=>ke.map(Y=>Y.groupIndex===E&&Y.index===B?{...Y,open:!Y.open}:{...Y,open:!1})))}},J=()=>{g(h=>h.map(E=>E.map(B=>({...B,open:!1}))))},P=L(()=>{if(x)return x?.components?.[0]?.blockType},[x]),R=de(je,x),A=me(Fe,x),ne=ue(_e,{categoriesItem:x,currentNavItemRef:z.current?.[D?.groupIndex||0]?.[D?.index||0]}),G=L(()=>{switch(P){case W.Sidebar:return e(R,{});case W.Supports:return e(ne,{});case W.Multicol:return e(A,{});default:return null}},[P,x]),le=L(()=>l?.headerBar?.actions?.filter(h=>h?.pcShow),[l]),V=L(()=>le?.find(h=>h?.blockType===_.Profile),[le]),oe=K(()=>{p(h=>!h)},[]);return H(()=>{if(m?.current){const h=m.current;return h.addEventListener("click",oe),()=>{h.removeEventListener("click",oe)}}},[oe]),se(()=>{D?.open&&ie.fromTo(S?.current,{height:0},{height:"auto"})},[D?.open]),n(te,{className:N("relative h-[96px]",r),children:[n("div",{ref:C,onClick:J,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(ye,{}),e(xe,{ref:m,actions:le,activeStatus:o})]}),e("div",{className:"flex justify-between",children:w?.map((h,E)=>e("div",{className:"flex gap-3",children:h?.map((B,j)=>e("div",{ref:q=>{z.current[E][j]=q},className:"group cursor-pointer",children:n("div",{className:"relative",children:[n("div",{className:"flex items-center gap-1 pb-4",onClick:q=>U(q,E,j),children:[e(y,{html:B.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{className:N("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":D?.groupIndex===E&&D?.index===j,"opacity-100":k&&D?.groupIndex===E&&D?.index===j})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":D?.groupIndex===E&&D?.index===j},b==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},B.id))},`groupCategory-${E}`))})]}),n("div",{className: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",{hidden:!(D?.open&&x)}),onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),style:{height:`calc(100dvh - ${C?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:S,className:N("relative z-50",{"overflow-hidden":P!==W.Supports}),children:G}),e("div",{className:"flex-1 bg-transparent",onClick:J})]}),o&&n("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${m?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:i?.email?n(X,{children:[e(y,{html:i?.nick_name||V?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:V?.profiles?.map(h=>e(Z,{className:"py-2",label:h?.title,href:h?.url},h.id))})]}):n(X,{children:[e(Te,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(y,{html:V?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:V?.benefits?.map(h=>n("div",{className:"flex items-center gap-[6px]",children:[e(Q,{source:h.benefitIcon?.url,className:"size-4",alt:h.benefit,width:16,height:16}),e(y,{html:h.benefit,className:"text-sm font-bold leading-[1.4]"})]},h.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(T,{variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:e(y,{html:V?.primaryButton||"Join Now",className:"font-bold"})}),e(T,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(y,{html:V?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})}),je=we.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:l,onSidebarNavClick:c}=I(),[r,b]=M([]),[d,u]=M(-1),i=F(null),k=K(()=>{const f=t?.subcategories;if(!f?.length)return;const v=f.findIndex(o=>!!o?.subSubCategories),g=f.findIndex(o=>!o?.subSubCategories),m=f.map((o,p)=>({index:p,open:v===p||g===p}));b(m)},[t]);H(()=>{k()},[k]);const s=L(()=>{const f=t?.subcategories?.[r?.find(g=>g.open)?.index||0],v=a?.find(g=>g?.label?.toLowerCase()===f?.label?.toLowerCase())||{};if(f?.collections){const g=l?.categories?.[f?.collections]||{};return{label:v?.label,isCollection:!0,banner:v?.banner,primary:v?.primary,series:[{products:g?.products}]}}else if(f?.subSubCategories){const g=f?.subSubCategories?.[d],m=a?.find(o=>o?.label?.toLowerCase()===g?.label?.toLowerCase())||{};if(g?.collections){const o=l?.categories?.[g?.collections]||{};return{label:m?.label,isCollection:!0,banner:m?.banner,primary:m?.primary,series:[{products:o?.products}]}}else return m}else return v},[t,r,d,a]),w=K((f,v)=>{if(v?.subSubCategories?.length>0?u(0):u(-1),v?.subSubCategories?.length>0)b(g=>g.map(m=>m.index===f?{...m,open:!0}:{...m,open:!1}));else{const m=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);b(o=>o.map(p=>({...p,open:p.index===f||p.index===m})))}},[t,k]),x=(f,v)=>{b(g=>g.map(m=>m.index===f?{...m,open:!0}:{...m,open:!1})),u(v)};return n(te,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[n("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:i,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((f,v)=>{const g=Array.isArray(f?.subSubCategories)&&f?.subSubCategories?.length>0;return n("div",{children:[n("div",{className:N("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!g&&r?.find(m=>m.index===v)?.open}),onClick:()=>{w(v,f),c?.(f,v)},children:[e(y,{html:f.label,className:"p-4 text-sm font-bold leading-[1.4]"}),g&&e(ae,{className:N("size-4",{"rotate-180":r?.find(m=>m.index===v)?.open})})]}),r?.find(m=>m.index===v)?.open&&e("div",{className:"flex flex-col",children:f.subSubCategories?.map((m,o)=>e(y,{html:m.label,onClick:()=>{x(v,o),c?.(m,o)},className:N("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":d===o})},`subSubItem-${v}-${o}`))})]},`subcategoryItem-${v}`)})}),t&&e("div",{className:"flex",children:n("div",{className:"flex flex-col gap-4",children:[t?.primary&&e(T,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&e(T,{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})]})})]}),n("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(s).length>0&&n("div",{className:"mb-4 flex items-center justify-between",children:[n("div",{className:"flex items-center gap-2",children:[e(y,{html:s?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),s?.primary&&!s?.primary?.hide&&e(T,{as:"a",href:`${s?.primary?.url}?ref=${s?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:s?.primary?.label})]}),e(O,{href:s?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:s?.guide?.label})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.series?.map((f,v)=>n("div",{children:[f.label&&e(y,{html:f.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),n("div",{className:"grid grid-cols-3 gap-4",children:[!!s?.banner&&e(O,{asChild:!s?.banner?.href,href:s?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[e(Q,{source:s?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(ce,{size:2,html:s?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(y,{html:s?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),f.products?.map((g,m)=>e(fe,{seriesLabel:s?.label,product:g,isCollection:s?.isCollection},`seriesProductItem-${m}`))]})]},`seriesItem-${v}`))})]})]})}),Fe=({multicolMetadata:t})=>{const a=F(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((l,c)=>e("div",{className:"w-1/4",children:e(ve,{item:l})},`multicolItem-${l?.label}-${c}`))})})})},_e=({supportsMetadata:t,currentNavItemRef:a})=>{const l=F(null),[c,r]=M(null),[b,d]=M(0);H(()=>{if(l?.current){const i=l?.current?.getBoundingClientRect();d(i.height)}},[l]);const u=Me(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},500);return H(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),H(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},[a]),e("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:b},children:e("div",{ref:l,className:"p-4",children:t?.map(i=>e("div",{className:"py-2",children:e(O,{href:i.url,className:"text-sm font-bold leading-[1.4] no-underline",children:i.label})},i.id))})})},fe=({product:t,isCollection:a,position:l,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:b}=I();let d=a?t:r?.products?.find(s=>s.handle===t.handle);const u=d?.variants?.find(s=>s.sku===t.sku)||d?.variants?.[0],i=L(()=>`/products/${d?.handle}?variant=${De(u?.id)}`,[d?.handle,u?.id]),k=L(()=>d?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2),[d?.tags]);return u?.availableForSale?e(O,{href:i,onClick:s=>{s.preventDefault(),window.open(i),b?.(d,l||0,c)},className:"no-underline hover:text-current",children:n("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[e("div",{className:"shrink-0",children:e(Q,{source:`${u?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),n("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(k)&&k?.map(s=>e(y,{as:"p",html:s,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]"}))}),e(y,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:d?.title||t?.name}),t?.desc&&e(y,{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},ve=({item:t,allPicture:a})=>n(X,{children:[t?.columns&&n(X,{children:[e(y,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(l=>n("div",{className:"py-2 flex items-center gap-1",children:[e(O,{href:`${l.url}?ref=navMenu`,asChild:!l.url,className:"text-sm font-bold leading-[1.4] no-underline",children:l.label}),l?.badge&&e(y,{as:"p",html:l?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},l.label))})]}),t?.imageUrl&&e("div",{className: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",{"tablet:max-w-none laptop:max-w-none":a}),children:n(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(Q,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),n("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(y,{html:t.title,className:N("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(y,{html:t.subtitle,className:N("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e(T,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:N("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Oe=ee(({data:t,className:a,onPrimaryNavClick:l},c)=>{const r=L(()=>pe(t?.categories?.filter(P=>P?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:d,subSubCategory:u}=I(),[i,k]=M(!1),[s,w]=M(0),[x,f]=M(null),v=F(null);H(()=>{if(v?.current&&i){const P=v?.current?.getBoundingClientRect();w(window?.innerHeight-(P?.bottom||0))}},[i]),se(()=>{ie.fromTo(v.current,{height:0},{height:s,duration:.3})},[s]),H(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const g=L(()=>x?.components?.[0]?.blockType,[x]),m=ue(Ue,{categoriesItem:x}),o=de(We,x),p=me(Ge,x),C=L(()=>{switch(g){case W.Sidebar:return e(o,{});case W.Supports:return e(m,{});case W.Multicol:return e(p,{});default:return null}},[g,x,m]),S=K(()=>{k(!1),w(0),d&&d($.Primary)},[k,w,d]),z=L(()=>t?.headerBar?.actions?.filter(P=>P?.mobileShow&&P?.blockType!==_.Profile),[t]),D=L(()=>t?.headerBar?.actions?.find(P=>P?.mobileShow&&P?.blockType===_.Profile)||{},[t]),U=L(()=>{switch(b){case $.Primary:return e(Je,{actions:z,menuOpen:i,onMenuOpenClose:()=>{k(!1),w(0)},onMenuOpenClick:()=>k(!0)});case $.Secondary:return e(Ne,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Primary)});case $.Third:return e(Ne,{title:u?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Secondary)});default:return null}},[i,b,d,x,z,u,S]),J=K((P,R)=>{const A=Array.isArray(r)?Array.isArray(r[P])?r[P][R]:{}:{};f(A),A?.components?.[0]?.blockType===W.Links?A?.components?.[0]?.url&&window.open(A?.components?.[0]?.url):d?.($.Secondary)},[r,d]);return n(te,{className:N("relative h-[52px]",a),children:[U,i&&e("div",{ref:v,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:s},children:b===$.Primary?e(Ie,{categories:r,onPrimaryMenuClick:J,onPrimaryNavClick:l,profileAction:D}):C})]})}),Ie=({categories:t,onPrimaryMenuClick:a,profileAction:l,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=I();return n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((b,d)=>n("div",{className:"",children:[b?.map((u,i)=>e(Z,{label:u.text,onClick:()=>{const s=(t?.flat()||[])?.findIndex(w=>w?.id===t[d][i]?.id);a(d,i),c?.(u,s)},icon:u.components?.[0]?.icon},u.id)),e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]",{hidden:d===t.length-1})})]},`groupCategory-${d}`))}),e(Ke,{profileAction:l})]})},We=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:l,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:b,setCurrentSeriesMetadata:d,currentSeriesMetadata:u,buildProps:i,onSidebarNavClick:k}=I(),[s,w]=M([]),[x,f]=M([]);H(()=>{t?.subcategories?.length&&w(t?.subcategories?.map((o,p)=>({index:p,open:!1})))},[t]),H(()=>{r?.subSubCategories?.length&&f(r?.subSubCategories?.map((o,p)=>({index:p,open:p===0})))},[r]);const v=K((o,p)=>{c&&c($.Third),b?.(o);const C=a?.find(S=>p!==void 0?o?.subSubCategories?.[p]?.label?.toLowerCase()===S.label?.toLowerCase():o?.label?.toLowerCase()===S.label?.toLowerCase())||{};if(o?.collections){const S=i?.categories?.[o?.collections]||{};d?.({label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:S?.products}]})}else d?.(C)},[a,t,c,b,d]),g=L(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return L(()=>{switch(l){case $.Secondary:return n("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[e("div",{children:t?.subcategories?.map((o,p)=>e("div",{children:e(Z,{label:o?.label,active:s.find(C=>C.index===p)?.open,onClick:()=>{v(o),k?.(o,p)}})},`${o.label}-${p}`))}),n("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e(T,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e(T,{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 $.Third:return n("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((o,p)=>{const C=a?.find(z=>z.label.toLowerCase()===o?.label?.toLowerCase())||{};let S={};if(o?.collections){const z=i?.categories?.[o?.collections]||{};S={label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:z?.products}]}}else S=C;return n("div",{children:[Reflect.ownKeys(o).length>0&&e(ge,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>{k?.(o,p),f(z=>z.map((D,U)=>({...D,open:U===p?!D.open:D.open})))},expanded:!!x?.find(z=>z.index===p)?.open}),x?.find(z=>z.index===p)?.open&&n(X,{children:[e(he,{matchSeriesMetadata:S}),S?.primary&&e("div",{className:"text-center my-4",children:e(T,{as:"a",href:S?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:S?.primary?.label})})]})]},`${o.label}-${p}`)}):n(X,{children:[Reflect.ownKeys(u).length>0&&e(ge,{matchSeriesMetadata:u}),e(he,{matchSeriesMetadata:u}),u?.primary&&e("div",{className:"text-center my-4 ",children:e(T,{as:"a",href:`${u?.primary?.url}?ref=${u?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:u?.primary?.label})})]}),g&&e(O,{href:g?.url,children:e("div",{className:"mt-4",children:e(y,{html:g?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[l,t,c,a,s,x,b,r,d,u])},ge=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:l})=>n("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:a,children:[t?.label&&e(y,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(ae,{className:N("size-5",{"rotate-180":l})})]}),he=({matchSeriesMetadata:t})=>e("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((a,l)=>n("div",{children:[a.label&&e(y,{html:a.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),n("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&&e(O,{asChild:!t?.banner?.href,href:t?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[e(Q,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(ce,{size:2,html:t?.banner?.title||"Buy in Guide",className:N("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(y,{html:t?.banner?.desc||"20.000mAh",className:N("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((c,r)=>e(fe,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l}-${r}`))]})]},`seriesItem-${l}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!t?.some(l=>!!l.columns),[t]);return e("div",{className:N("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":a}),children:t?.map((l,c)=>e("div",{children:e(ve,{item:l,allPicture:a})},`multicolItem-${l?.label}-${c}`))})},Ke=({profileAction:t})=>{const[a,l]=M(!1),{profile:c,event:r}=I();return n("div",{className:N("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[n("div",{className:"flex items-center justify-between",onClick:()=>l(!a),children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Ee,{})}),e(y,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(ae,{className:N("size-5 laptop:size-4",{"rotate-180":a})})]}),c?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(b=>e(Z,{label:b?.title,href:b?.url},b.id))}),a&&!c?.email&&n("div",{className:"mt-4",children:[e(y,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(b=>n("div",{className:"flex items-center gap-[6px]",children:[e(Q,{source:b.benefitIcon?.url,className:"size-4",alt:b.benefit,width:16,height:16}),e(y,{html:b.benefit,className:"text-sm font-bold leading-[1.4]"})]},b.id))})]}),!c?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(T,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:e(y,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(T,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:e(y,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Je=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:l,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ye,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(xe,{actions:c}),t?e(be,{className:"size-5",onClick:()=>a()}):e(ze,{className:"size-5",onClick:()=>l()})]})]}),ye=()=>{const{payloadData:t,isMobile:a}=I();return e("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},xe=ee(({actions:t,activeStatus:a=!1},l)=>{const{event:c,cartCount:r}=I(),[b,d]=M(null),u=K((i,k)=>{switch(d(k),i?.blockType){case _.Search:c?.search?.();break;case _.Cart:c?.cart?.();break;case _.Profile:c?.profile?.();break;case _.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,k)=>n("div",{className:"relative",ref:i.blockType===_.Profile?l:null,onClick:()=>u(i,k),children:[e(y,{html:i.icon,className:N("cursor-pointer size-5",{"text-brand-0":a&&b===k})}),i.blockType===_.Cart&&r>0&&e("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:e(y,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},i.id))})}),Ne=({title:t,onMenuOpenClose:a,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e(Be,{className:"size-5",onClick:()=>l()}),e(y,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(be,{className:"size-5",onClick:()=>a()})]}),Z=({label:t,href:a,onClick:l,active:c,icon:r,className:b})=>e("div",{className:N("flex cursor-pointer items-center justify-between py-4",b),onClick:l,children:n(O,{href:a,asChild:!a,className:"flex w-full items-center justify-between no-underline",children:[n("div",{className:"flex items-center gap-4",children:[e(y,{html:t,className:N("text-sm font-bold leading-[1.4]",{underline:r})}),r&&e(y,{html:r})]}),e(He,{className:N("size-5 laptop:size-4",{"rotate-90":c})})]})});var ut=Se(Re);export{ut as default};
+"use client";import{Fragment as te,jsx as e,jsxs as n}from"react/jsx-runtime";import Be,{forwardRef as re,useCallback as Q,useEffect as H,useImperativeHandle as Ee,useMemo as L,useRef as _,useState as P}from"react";import{Picture as ee,Text as y,Button as A,Container as se,Link as G,Heading as be}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as k,atobID as Te}from"../../helpers/utils.js";import $e,{useNavContext as U}from"./NavProvider.js";import{HeaderNavigationMenu as R,HeaderNavigationBlockType as K,HeaderNavigationActionBlockType as O}from"./types.js";import"react-responsive";import{debounce as Ae}from"es-toolkit";import Re from"jump.js";import{useGSAP as me}from"@gsap/react";import{gsap as pe}from"gsap";import{WithSidebar as fe,WithSupports as ve,WithMulticol as ge,WithGroupCategory as he}from"./withCategory.js";import{Menu as je,Close as ye,User as Fe,RightArrow as Ie,LeftArrow as _e,DownArrow as ie,Polygon as Oe}from"./icons/index.js";import We from"../NavigationSearch/index.js";const Ge=re((t,a)=>{const{data:{headerNavigation:l}={},buildProps:d,event:r,profile:f,theme:i="light",isTop:u=!1,searchResult:c,onSearch:w,isSearching:s,keywords:N,onPrimaryNavClick:x,onSeriesProductClick:p,onSidebarNavClick:h,headerId:v,cartCount:m}=t,o=_(null),[b,S]=P(!1),[M,E]=P(!1),[C,J]=P(!1),[X,z]=P(!1),j=_(null),F=()=>{const q=document?.querySelector("body")?.offsetWidth||0;z(q<=1440)};H(()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)}),[]),Ee(a,()=>j.current),H(()=>{j.current&&u&&Re(j.current,{duration:0,offset:j.current?.getBoundingClientRect()?.bottom||0})},[u]),H(()=>{r&&(r.search=()=>S(!0))},[r]),me(()=>{o?.current&&b&&pe.fromTo(o.current,{height:0},{height:"auto",duration:.3})},[b]),H(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const ce=L(()=>l?.headerBar?.actions?.find(q=>q?.blockType===O.Search)?.searchBar?.[0]||{},[l]);return e($e,{buildProps:d,profile:f,isMobile:X,event:r,payloadData:l,onSidebarNavClick:h,onSeriesProductClick:p,cartCount:m,children:e("header",{id:v||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:j,children:n("div",{className:k("hover:text-black hover:bg-white",i==="light"?"text-black":"text-white",{}),onClick:()=>J(!0),children:[e(Ue,{data:l,className:"hidden desktop:block !bg-white",theme:i,onNavItemClick:()=>J(!0),onPrimaryNavClick:x}),e(qe,{data:l,className:"block desktop:hidden !bg-white",onPrimaryNavClick:x}),b&&n("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${j?.current?.getBoundingClientRect()?.top}px)`},children:[e("div",{ref:o,className:k("overflow-y-auto",{}),children:e(We,{data:ce,keywords:N,isSearching:s,searchResult:c,onSearch:q=>{w?.(q)},onClose:()=>{w?.(),S(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),Ue=re((t,a)=>{const{data:l,onNavItemClick:d,className:r,theme:f,onPrimaryNavClick:i}=t,{event:u,profile:c}=U(),[w,s]=P(!1),N=L(()=>he(l?.categories?.filter(g=>g?.pcShow)),[l]),[x,p]=P(null),[h,v]=P([]),m=_(null),[o,b]=P(!1),S=_(null),M=_(null),E=_(N.map(g=>Array(g?.length||0).fill(null)));H(()=>{if(N?.length){const g=N.findIndex(B=>Array.isArray(B)&&B.length>0),D=0;v(N?.map((B,T)=>B?.map((Z,V)=>({groupIndex:T,index:V,open:T===g&&V===D})))),g!==-1&&p(N[g][D])}},[N]);const C=L(()=>{let g=null;for(const D of h){for(const B of D)if(B.open){g=B;break}if(g)break}return g},[h]);H(()=>{document.documentElement.style.overflow=C?.open||o?"hidden":"auto"},[C?.open,o]);const J=(g,D,B)=>{if(b(!1),x?.components?.[0]?.blockType===K.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const T=N?.flat()||[],Z=N[D]?.[B]?.id,V=T?.findIndex(W=>W?.id===Z),De=C?.groupIndex===D&&C?.index===B&&C?.open;g.stopPropagation(),d?.();const Le=W=>{let I=0;for(let $=0;$<N.length;$++){const le=N[$]||[];for(let ae=0;ae<le.length;ae++){if(I===W)return{gi:$,idx:ae};I++}}return{gi:D,idx:B}};if(De&&T.length>0){const W=T.length-1;let I=V;V===W?I=Math.max(0,W-1):I=Math.min(W,V+1);const{gi:$,idx:le}=Le(I),ae=N[$]?.[le];i?.(T[I],I),p(ae),v(Pe=>Pe.map(ze=>ze.map(oe=>oe.groupIndex===$&&oe.index===le?{...oe,open:!0}:{...oe,open:!1})))}else i?.(T[V],V),p(N[D][B]),v(W=>W.map(I=>I.map($=>$.groupIndex===D&&$.index===B?{...$,open:!0}:{...$,open:!1})))}},X=()=>{v(g=>g.map(D=>D.map(B=>({...B,open:!1}))))},z=L(()=>{if(x)return x?.components?.[0]?.blockType},[x]),j=fe(Ke,x),F=ge(Je,x),ce=ve(Ve,{categoriesItem:x,currentNavItemRef:E.current?.[C?.groupIndex||0]?.[C?.index||0]}),q=L(()=>{switch(z){case K.Sidebar:return e(j,{});case K.Supports:return e(ce,{});case K.Multicol:return e(F,{});default:return null}},[z,x]),de=L(()=>l?.headerBar?.actions?.filter(g=>g?.pcShow),[l]),Y=L(()=>de?.find(g=>g?.blockType===O.Profile),[de]),ue=Q(()=>{b(g=>!g)},[]);return H(()=>{if(m?.current){const g=m.current;return g.addEventListener("click",ue),()=>{g.removeEventListener("click",ue)}}},[ue]),me(()=>{C?.open&&pe.fromTo(M?.current,{height:0},{height:"auto"})},[C?.open]),n(se,{className:k("relative h-[96px]",r),children:[n("div",{ref:S,onClick:X,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(Ce,{}),e(Se,{ref:m,actions:de,activeStatus:o})]}),e("div",{className:"flex justify-between",children:N?.map((g,D)=>e("div",{className:"flex gap-3",children:g?.map((B,T)=>e("div",{ref:Z=>{E.current[D][T]=Z},className:"group cursor-pointer",children:n("div",{className:"relative",children:[n("div",{className:"flex items-center gap-1 pb-4",onClick:Z=>J(Z,D,T),children:[e(y,{html:B.text,className:"text-sm font-bold leading-[1.4]"}),e(ie,{className:k("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":C?.groupIndex===D&&C?.index===T,"opacity-100":w&&C?.groupIndex===D&&C?.index===T})})]}),e("div",{className:k("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":C?.groupIndex===D&&C?.index===T},f==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},B.id))},`groupCategory-${D}`))})]}),n("div",{className:k("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:!(C?.open&&x)}),onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:M,className:k("relative z-50",{"overflow-hidden":z!==K.Supports}),children:q}),e("div",{className:"flex-1 bg-transparent",onClick:X})]}),o&&n("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${m?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:c?.email?n(te,{children:[e(y,{html:c?.nick_name||Y?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:Y?.profiles?.map(g=>e(ne,{className:"py-2",label:g?.title,href:g?.url},g.id))})]}):n(te,{children:[e(Oe,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(y,{html:Y?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:Y?.benefits?.map(g=>n("div",{className:"flex items-center gap-[6px]",children:[e(ee,{source:g.benefitIcon?.url,className:"size-4",alt:g.benefit,width:16,height:16}),e(y,{html:g.benefit,className:"text-sm font-bold leading-[1.4]"})]},g.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(A,{variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:e(y,{html:Y?.primaryButton||"Join Now",className:"font-bold"})}),e(A,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(y,{html:Y?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>b(!1)})]})]})}),Ke=Be.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:l,onSidebarNavClick:d}=U(),[r,f]=P([]),[i,u]=P(-1),c=_(null),w=Q(()=>{const p=t?.subcategories;if(!p?.length)return;const h=p.findIndex(o=>!!o?.subSubCategories),v=p.findIndex(o=>!o?.subSubCategories),m=p.map((o,b)=>({index:b,open:h===b||v===b}));f(m)},[t]);H(()=>{w()},[w]);const s=L(()=>{const p=t?.subcategories?.[r?.find(v=>v.open)?.index||0],h=a?.find(v=>v?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const v=l?.categories?.[p?.collections]||{};return{label:h?.label,isCollection:!0,banner:h?.banner,primary:h?.primary,series:[{products:v?.products}]}}else if(p?.subSubCategories){const v=p?.subSubCategories?.[i],m=a?.find(o=>o?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const o=l?.categories?.[v?.collections]||{};return{label:m?.label,isCollection:!0,banner:m?.banner,primary:m?.primary,series:[{products:o?.products}]}}else return m}else return h},[t,r,i,a]),N=Q((p,h)=>{if(h?.subSubCategories?.length>0?u(0):u(-1),h?.subSubCategories?.length>0)f(v=>v.map(m=>m.index===p?{...m,open:!0}:{...m,open:!1}));else{const m=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);f(o=>o.map(b=>({...b,open:b.index===p||b.index===m})))}},[t,w]),x=(p,h)=>{f(v=>v.map(m=>m.index===p?{...m,open:!0}:{...m,open:!1})),u(h)};return n(se,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[n("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:c,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((p,h)=>{const v=Array.isArray(p?.subSubCategories)&&p?.subSubCategories?.length>0;return n("div",{children:[n("div",{className:k("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!v&&r?.find(m=>m.index===h)?.open}),onClick:()=>{N(h,p),d?.(p,h)},children:[e(y,{html:p.label,className:"p-4 text-sm font-bold leading-[1.4]"}),v&&e(ie,{className:k("size-4",{"rotate-180":r?.find(m=>m.index===h)?.open})})]}),r?.find(m=>m.index===h)?.open&&e("div",{className:"flex flex-col",children:p.subSubCategories?.map((m,o)=>e(y,{html:m.label,onClick:()=>{x(h,o),d?.(m,o)},className:k("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":i===o})},`subSubItem-${h}-${o}`))})]},`subcategoryItem-${h}`)})}),t&&e("div",{className:"flex",children:n("div",{className:"flex flex-col gap-4",children:[t?.primary&&e(A,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&e(A,{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})]})})]}),n("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(s).length>0&&n("div",{className:"mb-4 flex items-center justify-between",children:[n("div",{className:"flex items-center gap-2",children:[e(y,{html:s?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),s?.primary&&!s?.primary?.hide&&e(A,{as:"a",href:`${s?.primary?.url}?ref=${s?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:s?.primary?.label})]}),e(G,{href:s?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:s?.guide?.label})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.series?.map((p,h)=>n("div",{children:[p.label&&e(y,{html:p.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),n("div",{className:"grid grid-cols-3 gap-4",children:[!!s?.banner&&e(G,{asChild:!s?.banner?.href,href:s?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[e(ee,{source:s?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(be,{size:2,html:s?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(y,{html:s?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),p.products?.map((v,m)=>e(xe,{seriesLabel:s?.label,product:v,isCollection:s?.isCollection},`seriesProductItem-${m}`))]})]},`seriesItem-${h}`))})]})]})}),Je=({multicolMetadata:t})=>{const a=_(null);return e("div",{ref:a,children:e(se,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((l,d)=>e("div",{className:"w-1/4",children:e(Ne,{item:l})},`multicolItem-${l?.label}-${d}`))})})})},Ve=({supportsMetadata:t,currentNavItemRef:a})=>{const l=_(null),[d,r]=P(null),[f,i]=P(0);H(()=>{if(l?.current){const c=l?.current?.getBoundingClientRect();i(c.height)}},[l]);const u=Ae(()=>{if(a){const c=a.getBoundingClientRect();r(c)}},500);return H(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),H(()=>{if(a){const c=a.getBoundingClientRect();r(c)}},[a]),e("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${d?.right}px)`,height:f},children:e("div",{ref:l,className:"p-4",children:t?.map(c=>e("div",{className:"py-2",children:e(G,{href:c.url,className:"text-sm font-bold leading-[1.4] no-underline",children:c.label})},c.id))})})},xe=({product:t,isCollection:a,position:l,seriesLabel:d})=>{const{buildProps:r,onSeriesProductClick:f}=U();let i=a?t:r?.products?.find(s=>s.handle===t.handle);const u=i?.variants?.find(s=>s.sku===t.sku)||i?.variants?.[0],c=L(()=>`/products/${i?.handle}?variant=${Te(u?.id)}`,[i?.handle,u?.id]),w=L(()=>i?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2),[i?.tags]);return u?.availableForSale?e(G,{href:c,onClick:s=>{s.preventDefault(),window.open(c),f?.(i,l||0,d)},className:"no-underline hover:text-current",children:n("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[e("div",{className:"shrink-0",children:e(ee,{source:`${u?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),n("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(w)&&w?.map(s=>e(y,{as:"p",html:s,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]"}))}),e(y,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:i?.title||t?.name}),t?.desc&&e(y,{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},Ne=({item:t,allPicture:a})=>n(te,{children:[t?.columns&&n(te,{children:[e(y,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(l=>n("div",{className:"py-2 flex items-center gap-1",children:[e(G,{href:`${l.url}?ref=navMenu`,asChild:!l.url,className:"text-sm font-bold leading-[1.4] no-underline",children:l.label}),l?.badge&&e(y,{as:"p",html:l?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},l.label))})]}),t?.imageUrl&&e("div",{className:k("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":a}),children:n(G,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(ee,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),n("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(y,{html:t.title,className:k("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(y,{html:t.subtitle,className:k("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e(A,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:k("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),qe=re(({data:t,className:a,onPrimaryNavClick:l},d)=>{const r=L(()=>he(t?.categories?.filter(z=>z?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:i,subSubCategory:u}=U(),[c,w]=P(!1),[s,N]=P(0),[x,p]=P(null),h=_(null);H(()=>{if(h?.current&&c){const z=h?.current?.getBoundingClientRect();N(window?.innerHeight-(z?.bottom||0))}},[c]),me(()=>{pe.fromTo(h.current,{height:0},{height:s,duration:.3})},[s]),H(()=>{document.documentElement.style.overflow=c?"hidden":"auto"},[c]);const v=L(()=>x?.components?.[0]?.blockType,[x]),m=ve(Ye,{categoriesItem:x}),o=fe(Xe,x),b=ge(Ze,x),S=L(()=>{switch(v){case K.Sidebar:return e(o,{});case K.Supports:return e(m,{});case K.Multicol:return e(b,{});default:return null}},[v,x,m]),M=Q(()=>{w(!1),N(0),i&&i(R.Primary)},[w,N,i]),E=L(()=>t?.headerBar?.actions?.filter(z=>z?.mobileShow&&z?.blockType!==O.Profile),[t]),C=L(()=>t?.headerBar?.actions?.find(z=>z?.mobileShow&&z?.blockType===O.Profile)||{},[t]),J=L(()=>{switch(f){case R.Primary:return e(tt,{actions:E,menuOpen:c,onMenuOpenClose:()=>{w(!1),N(0)},onMenuOpenClick:()=>w(!0)});case R.Secondary:return e(Me,{title:x?.text,onMenuOpenClose:M,onMenuBackClick:()=>i?.(R.Primary)});case R.Third:return e(Me,{title:u?.label,onMenuOpenClose:M,onMenuBackClick:()=>i?.(R.Secondary)});default:return null}},[c,f,i,x,E,u,M]),X=Q((z,j)=>{const F=Array.isArray(r)?Array.isArray(r[z])?r[z][j]:{}:{};p(F),F?.components?.[0]?.blockType===K.Links?F?.components?.[0]?.url&&window.open(F?.components?.[0]?.url):i?.(R.Secondary)},[r,i]);return n(se,{className:k("relative h-[52px]",a),children:[J,c&&e("div",{ref:h,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:s},children:f===R.Primary?e(Qe,{categories:r,onPrimaryMenuClick:X,onPrimaryNavClick:l,profileAction:C}):S})]})}),Qe=({categories:t,onPrimaryMenuClick:a,profileAction:l,onPrimaryNavClick:d})=>{const{onSidebarNavClick:r}=U();return n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((f,i)=>n("div",{className:"",children:[f?.map((u,c)=>e(ne,{label:u.text,onClick:()=>{const s=(t?.flat()||[])?.findIndex(N=>N?.id===t[i][c]?.id);a(i,c),d?.(u,s)},icon:u.components?.[0]?.icon},u.id)),e("div",{className:k("my-2 h-px w-full bg-[#E5E5E7]",{hidden:i===t.length-1})})]},`groupCategory-${i}`))}),e(et,{profileAction:l})]})},Xe=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:l,setCurrentMenu:d,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:i,currentSeriesMetadata:u,buildProps:c,onSidebarNavClick:w}=U(),[s,N]=P([]),[x,p]=P([]);H(()=>{t?.subcategories?.length&&N(t?.subcategories?.map((o,b)=>({index:b,open:!1})))},[t]),H(()=>{r?.subSubCategories?.length&&p(r?.subSubCategories?.map((o,b)=>({index:b,open:b===0})))},[r]);const h=Q((o,b)=>{d&&d(R.Third),f?.(o);const S=a?.find(M=>b!==void 0?o?.subSubCategories?.[b]?.label?.toLowerCase()===M.label?.toLowerCase():o?.label?.toLowerCase()===M.label?.toLowerCase())||{};if(o?.collections){const M=c?.categories?.[o?.collections]||{};i?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:M?.products}]})}else i?.(S)},[a,t,d,f,i]),v=L(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return L(()=>{switch(l){case R.Secondary:return n("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[e("div",{children:t?.subcategories?.map((o,b)=>e("div",{children:e(ne,{label:o?.label,active:s.find(S=>S.index===b)?.open,onClick:()=>{h(o),w?.(o,b)}})},`${o.label}-${b}`))}),n("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e(A,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e(A,{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 R.Third:return n("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((o,b)=>{const S=a?.find(E=>E.label.toLowerCase()===o?.label?.toLowerCase())||{};let M={};if(o?.collections){const E=c?.categories?.[o?.collections]||{};M={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:E?.products}]}}else M=S;return n("div",{children:[Reflect.ownKeys(o).length>0&&e(ke,{matchSeriesMetadata:M,onSubSubCategoryItemClick:()=>{w?.(o,b),p(E=>E.map((C,J)=>({...C,open:J===b?!C.open:C.open})))},expanded:!!x?.find(E=>E.index===b)?.open}),x?.find(E=>E.index===b)?.open&&n(te,{children:[e(we,{matchSeriesMetadata:M}),M?.primary&&e("div",{className:"text-center my-4",children:e(A,{as:"a",href:M?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:M?.primary?.label})})]})]},`${o.label}-${b}`)}):n(te,{children:[Reflect.ownKeys(u).length>0&&e(ke,{matchSeriesMetadata:u}),e(we,{matchSeriesMetadata:u}),u?.primary&&e("div",{className:"text-center my-4 ",children:e(A,{as:"a",href:`${u?.primary?.url}?ref=${u?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:u?.primary?.label})})]}),v&&e(G,{href:v?.url,children:e("div",{className:"mt-4",children:e(y,{html:v?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[l,t,d,a,s,x,f,r,i,u])},ke=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:l})=>n("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:a,children:[t?.label&&e(y,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(ie,{className:k("size-5",{"rotate-180":l})})]}),we=({matchSeriesMetadata:t})=>e("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((a,l)=>n("div",{children:[a.label&&e(y,{html:a.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),n("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&&e(G,{asChild:!t?.banner?.href,href:t?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[e(ee,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(be,{size:2,html:t?.banner?.title||"Buy in Guide",className:k("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(y,{html:t?.banner?.desc||"20.000mAh",className:k("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((d,r)=>e(xe,{position:r,product:d,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l}-${r}`))]})]},`seriesItem-${l}`))}),Ye=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(ne,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ze=({multicolMetadata:t})=>{const a=L(()=>!t?.some(l=>!!l.columns),[t]);return e("div",{className:k("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":a}),children:t?.map((l,d)=>e("div",{children:e(Ne,{item:l,allPicture:a})},`multicolItem-${l?.label}-${d}`))})},et=({profileAction:t})=>{const[a,l]=P(!1),{profile:d,event:r}=U();return n("div",{className:k("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[n("div",{className:"flex items-center justify-between",onClick:()=>l(!a),children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Fe,{})}),e(y,{html:d?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!d?.email&&e(ie,{className:k("size-5 laptop:size-4",{"rotate-180":a})})]}),d?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(f=>e(ne,{label:f?.title,href:f?.url},f.id))}),a&&!d?.email&&n("div",{className:"mt-4",children:[e(y,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(f=>n("div",{className:"flex items-center gap-[6px]",children:[e(ee,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),e(y,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))})]}),!d?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(A,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:e(y,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(A,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:e(y,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},tt=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:l,actions:d})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Ce,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(Se,{actions:d}),t?e(ye,{className:"size-5",onClick:()=>a()}):e(je,{className:"size-5",onClick:()=>l()})]})]}),Ce=()=>{const{payloadData:t,isMobile:a}=U();return e("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},Se=re(({actions:t,activeStatus:a=!1},l)=>{const{event:d,cartCount:r}=U(),[f,i]=P(null),u=Q((c,w)=>{switch(i(w),c?.blockType){case O.Search:d?.search?.();break;case O.Cart:d?.cart?.();break;case O.Profile:d?.profile?.();break;case O.Livestream:d?.livestream?.();break;default:return()=>{}}},[d]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((c,w)=>n("div",{className:"relative",ref:c.blockType===O.Profile?l:null,onClick:()=>u(c,w),children:[e(y,{html:c.icon,className:k("cursor-pointer size-5",{"text-brand-0":a&&f===w})}),c.blockType===O.Cart&&r>0&&e("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:e(y,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},c.id))})}),Me=({title:t,onMenuOpenClose:a,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e(_e,{className:"size-5",onClick:()=>l()}),e(y,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(ye,{className:"size-5",onClick:()=>a()})]}),ne=({label:t,href:a,onClick:l,active:d,icon:r,className:f})=>e("div",{className:k("flex cursor-pointer items-center justify-between py-4",f),onClick:l,children:n(G,{href:a,asChild:!a,className:"flex w-full items-center justify-between no-underline",children:[n("div",{className:"flex items-center gap-4",children:[e(y,{html:t,className:k("text-sm font-bold leading-[1.4]",{underline:r})}),r&&e(y,{html:r})]}),e(Ie,{className:k("size-5 laptop:size-4",{"rotate-90":d})})]})});var yt=He(Ge);export{yt as default};
 //# sourceMappingURL=index.js.map