@anker-in/headless-ui 1.0.20-alpha.1761120380827 → 1.0.20-alpha.1761122497598

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

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