@anker-in/headless-ui 1.3.70 → 1.3.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";"use client";var Me=Object.create;var Z=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Te=(n,r)=>{for(var i in r)Z(n,i,{get:r[i],enumerable:!0})},le=(n,r,i,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of Pe(r))!Ee.call(n,u)&&u!==i&&Z(n,u,{get:()=>r[u],enumerable:!(c=Se(r,u))||c.enumerable});return n};var ee=(n,r,i)=>(i=n!=null?Me(De(n)):{},le(r||!n||!n.__esModule?Z(i,"default",{value:n,enumerable:!0}):i,n)),He=n=>le(Z({},"__esModule",{value:!0}),n);var Ie={};Te(Ie,{default:()=>Re});module.exports=He(Ie);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),pe=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),F=ee(require("./NavProvider.js")),o=require("./types.js"),fe=ee(require("jump.js")),te=require("@gsap/react"),X=require("gsap"),C=require("./withCategory.js"),S=require("./icons/index.js"),be=ee(require("../NavigationSearch/index.js")),ve=require("./ResourceSidebarDropdown.js"),ge=require("./MobileResourceSidebarMenu.js"),he=require("./SidebarDropdown.js"),ae=require("./useScrollLock.js"),ye=require("./MulticolDropdown.js"),Ne=require("./SupportsDropdown.js"),ke=require("./MobileSidebarMenu.js"),we=require("./MobileSupportMenu.js"),xe=require("./MobileMulticolMenu.js"),ne=require("./MobileMenuComponents.js"),oe=require("../AiuiProvider/index.js"),ie=ee(require("../../shared/throttle.js"));const se=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:c,event:u,profile:P,theme:s="light",isTop:m=!1,searchResult:x,onSearch:b,isSearching:p,keywords:_,onPrimaryNavClick:w,onSeriesProductClick:h,onSidebarNavClick:D,onMobileMenuToggle:U,headerId:E,cartCount:L,menuData:z,render:B,componentOverrides:G,...J}=n,[R,f]=(0,t.useState)(!1),[W,I]=(0,t.useState)(!1),[A,H]=(0,t.useState)(!1),[Y,g]=(0,t.useState)(!1),O=(0,t.useRef)(null),M=(0,t.useRef)(null),q=()=>{const y=document?.querySelector("body")?.offsetWidth||0;g(y<=1440)};(0,t.useEffect)(()=>(q(),window.addEventListener("resize",q),()=>{window.removeEventListener("resize",q)}),[]),(0,t.useImperativeHandle)(r,()=>M.current),(0,t.useEffect)(()=>{M.current&&m&&(0,fe.default)(M.current,{duration:0,offset:M.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,t.useEffect)(()=>{if(m){I(!1),H(!1);return}let y=0,a=0,d=0;const v=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,N=v();y=N,I(N>300),H(N>30);const $=(0,ie.default)(()=>{const T=v(),K=T-y;H(T>30),K>0?(a=0,d+=K,d>=300&&T>300&&I(!0)):K<0&&(d=0,a+=Math.abs(K),a>=300&&(I(!1),a=0)),y=T},100);return window.addEventListener("scroll",$,{passive:!0}),()=>window.removeEventListener("scroll",$)},[m]),(0,t.useEffect)(()=>{u&&(u.search=()=>f(!0))},[u]),(0,te.useGSAP)(()=>{O?.current&&R&&X.gsap.fromTo(O.current,{height:0},{height:"auto",duration:.3})},[R]),(0,ae.useScrollLock)(R);const Q=(0,t.useMemo)(()=>i?.bar?.actions?.find(y=>y?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]),j=B?.mobileHeaderNavigation;return(0,e.jsx)(F.default,{buildProps:c,profile:P,isMobile:Y,event:u,payloadData:i,onSidebarNavClick:D,onSeriesProductClick:h,cartCount:L,componentOverrides:G,children:(0,e.jsx)("header",{...J,id:E||"header","data-ui-component-id":"HeaderNavigation",className:m?"relative z-[100] bg-white":(0,k.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":W}),ref:M,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:bg-white hover:text-black",s==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!m&&A},{"hover:!text-black":s==="dark","!text-black":!m&&A}),onClick:()=>!m&&H(!0),children:[(0,e.jsx)(ce,{data:i,className:"desktop:block hidden !bg-white",theme:s,onNavItemClick:()=>!m&&H(!0),onPrimaryNavClick:w}),j?(0,e.jsx)(j,{className:"desktop:hidden block !bg-white",menuData:z,data:i,onPrimaryNavClick:w}):(0,e.jsx)(ue,{menuData:z,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:w,onMobileMenuToggle:U}),R&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${M?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:O,className:(0,k.cn)("overflow-y-auto",{}),children:(0,e.jsx)(be.default,{data:Q,keywords:_,isSearching:p,searchResult:x,onSearch:y=>{b?.(y)},onClose:()=>{b?.(),f(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>f(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),f(!1))}})]})]})})})}),ce=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:c,className:u,theme:P,onPrimaryNavClick:s}=n,{event:m,profile:x}=(0,F.useNavContext)(),[b,p]=(0,t.useState)(!1),{locale:_="us"}=(0,oe.useAiuiContext)(),w=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[h,D]=(0,t.useState)(null),[U,E]=(0,t.useState)([]),L=(0,t.useRef)(null),[z,B]=(0,t.useState)(!1),G=(0,t.useRef)(null),J=(0,t.useRef)(null),R=(0,t.useRef)(w.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{w?.length&&E(w?.map((a,d)=>a?.map((v,N)=>({groupIndex:d,index:N,open:!1}))))},[w]);const f=(0,t.useMemo)(()=>{let a=null;for(const d of U){for(const v of d)if(v.open){a=v;break}if(a)break}return a},[U]);(0,ae.useScrollLock)(!!f?.open||z);const W=(a,d,v)=>{B(!1);const N=w[d][v];if(N?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url,N?.components?.[0]?.target??"_blank");else{const $=w?.flat()||[],T=$?.findIndex(K=>K?.id===w[d][v]?.id);a.stopPropagation(),c?.(),s?.($[T],T),D(N),E(K=>K.map(Ce=>Ce.map(V=>V.groupIndex===d&&V.index===v?{...V,open:!V.open}:{...V,open:!1})))}},I=(a,d,v)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),W(a,d,v)):a.key==="Escape"&&f?.groupIndex===d&&f?.index===v&&(a.preventDefault(),A())},A=()=>{E(a=>a.map(d=>d.map(v=>({...v,open:!1}))))},H=(0,t.useMemo)(()=>{if(h)return h?.components?.[0]?.blockType},[h]),Y=(0,C.WithSidebar)(he.SidebarDropdown,h),g=(0,C.WithResource)(ve.ResourceSidebarDropdown,h),O=(0,C.WithMulticol)(ye.MulticolDropdown,h),M=(0,C.WithSupports)(Ne.SupportsDropdown,{categoriesItem:h,currentNavItemRef:R.current?.[f?.groupIndex||0]?.[f?.index||0]}),q=(0,t.useMemo)(()=>{switch(H){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(Y,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(g,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(M,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(O,{});default:return null}},[H,h]),Q=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),j=(0,t.useMemo)(()=>Q?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[Q]),y=(0,t.useCallback)(()=>{B(a=>!a)},[]);return(0,t.useEffect)(()=>{if(L?.current){const a=L.current;return a.addEventListener("click",y),()=>{a.removeEventListener("click",y)}}},[y]),(0,te.useGSAP)(()=>{f?.open&&X.gsap.fromTo(J?.current,{height:0},{height:"auto"})},[f?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[92px]",u),children:[(0,e.jsxs)("div",{ref:G,onClick:A,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(de,{}),(0,e.jsx)(re,{ref:L,actions:Q,activeStatus:z})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:w?.map((a,d)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((v,N)=>{const $=f?.groupIndex===d&&f?.index===N;return(0,e.jsx)("div",{ref:T=>{R.current[d][N]=T},className:"group",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:T=>W(T,d,N),onKeyDown:T=>I(T,d,N),"aria-expanded":$,"aria-haspopup":"true","aria-label":v.text,children:[(0,e.jsx)(l.Text,{html:v.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(S.DownArrow,{className:(0,k.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":f?.groupIndex===d&&f?.index===N,"opacity-100":b&&f?.groupIndex===d&&f?.index===N,invisible:!v?.components?.length||v?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links})})]}),(0,e.jsx)("div",{className:(0,k.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":$},P==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},v.id)})},`groupCategory-${d}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(f?.open&&h),className:(0,k.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(f?.open&&h)}),onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),style:{height:`calc(100dvh - ${G?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:J,className:(0,k.cn)("relative z-50",{"overflow-hidden":H!==o.HeaderNavigationBlockType.Supports}),children:q}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:A,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),A())}})]}),z&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${L?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:x?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:x?.nick_name||j?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:j?.profiles?.map(a=>(0,e.jsx)(ne.MenuItem,{className:"py-2",label:a?.title,href:(0,k.getLocalizedPath)(a?.url,_)},a.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:j?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:j?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4 shrink-0",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex flex-wrap gap-2",children:[(0,e.jsx)(l.Button,{className:"grow",variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:(0,e.jsx)(l.Text,{html:j?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{className:"grow",variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:(0,e.jsx)(l.Text,{html:j?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>B(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),B(!1))}})]})]})}),ue=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:c,onMobileMenuToggle:u},P)=>{const s=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(n?.categories?.filter(g=>g?.mobileShow)),[n]),{currentMenu:m,setCurrentMenu:x,subSubCategory:b}=(0,F.useNavContext)(),[p,_]=(0,t.useState)(!1),[w,h]=(0,t.useState)(0),[D,U]=(0,t.useState)(null),E=(0,t.useRef)(null),L=(0,t.useRef)(!1);(0,t.useEffect)(()=>{if(E?.current&&p){const g=E?.current?.getBoundingClientRect();h(window?.innerHeight-(g?.top||0))}u?.({open:p})},[p,u]),(0,t.useEffect)(()=>{if(!p)return;const g=(0,ie.default)(()=>{if(E?.current){const O=E.current.getBoundingClientRect();L.current=!0,h(window?.innerHeight-(O?.top||0))}},100);return window.addEventListener("resize",g),()=>window.removeEventListener("resize",g)},[p]),(0,te.useGSAP)(()=>{if(L.current){X.gsap.set(E.current,{height:w}),L.current=!1;return}X.gsap.fromTo(E.current,{height:0},{height:w,duration:.3})},[w]),(0,ae.useScrollLock)(p);const z=(0,t.useMemo)(()=>D?.components?.[0]?.blockType,[D]),B=(0,C.WithSupports)(we.MobileSupportMenu,{categoriesItem:D}),G=(0,C.WithSidebar)(ke.MobileSidebarMenu,D),J=(0,C.WithResource)(ge.MobileResourceSidebarMenu,D),R=(0,C.WithMulticol)(xe.MobileMulticolMenu,D),f=(0,t.useMemo)(()=>{switch(z){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(G,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(J,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(B,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[z,D,B]),W=(0,t.useCallback)(()=>{_(!1),h(0),x&&x(o.HeaderNavigationMenu.Primary)},[_,h,x]),I=(0,t.useMemo)(()=>n?.bar?.actions?.filter(g=>g?.mobileShow&&g?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),A=(0,t.useMemo)(()=>n?.bar?.actions?.find(g=>g?.mobileShow&&g?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),H=(0,t.useMemo)(()=>{switch(m){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Be,{actions:I,menuOpen:p,onMenuOpenClose:()=>{_(!1),h(0)},onMenuOpenClick:()=>_(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(me,{title:D?.text,onMenuOpenClose:W,onMenuBackClick:()=>x?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(me,{title:b?.label,onMenuOpenClose:W,onMenuBackClick:()=>x?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[p,m,x,D,I,b,W]),Y=(0,t.useCallback)((g,O)=>{const M=Array.isArray(s)?Array.isArray(s[g])?s[g][O]:{}:{};U(M),M?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?M?.components?.[0]?.url&&window.open(M?.components?.[0]?.url,M?.components?.[0]?.target??"_blank"):x?.(o.HeaderNavigationMenu.Secondary)},[s,x]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[56px]",i),children:[H,p&&(0,e.jsxs)("nav",{ref:E,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:w},role:"navigation","aria-label":"Mobile navigation menu",children:[m===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,m===o.HeaderNavigationMenu.Primary?(0,e.jsx)(Le,{categories:s,onPrimaryMenuClick:Y,onPrimaryNavClick:c,profileAction:A}):f]})]})}),Le=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:c})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:n?.map((u,P)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,k.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),u?.map((s,m)=>(0,e.jsx)(ne.MenuItem,{label:s.text,onClick:()=>{const b=(n?.flat()||[])?.findIndex(p=>p?.id===n[P][m]?.id);r(P,m),c?.(s,b)},icon:s.components?.[0]?.icon},s.id))]},`groupCategory-${P}`))}),(0,e.jsx)(ze,{profileAction:i})]}),ze=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:c,event:u}=(0,F.useNavContext)(),{locale:P="us"}=(0,oe.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,k.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":c?.nick_name||n?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(S.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:c?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(S.DownArrow,{"aria-hidden":"true",className:(0,k.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),c?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(s=>(0,e.jsx)(ne.MenuItem,{label:s?.title,href:(0,k.getLocalizedPath)(s?.url,P)},s.id))}),r&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(s=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>u?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>u?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Be=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(de,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(re,{actions:c}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(S.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(S.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),de=()=>{const{payloadData:n,isMobile:r}=(0,F.useNavContext)(),{locale:i="us"}=(0,oe.useAiuiContext)();return(0,e.jsx)("a",{href:(0,k.getLocalizedPath)("/",i),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},re=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:c,cartCount:u}=(0,F.useNavContext)(),[P,s]=(0,t.useState)(null),m=b=>{switch(b){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${u>0?` (${u} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},x=(0,t.useCallback)((b,p)=>{switch(s(p),b?.blockType){case o.HeaderNavigationActionBlockType.Search:c?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((b,p)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":b?.tag||"",ref:b.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>x(b,p),"aria-label":m(b.blockType),"aria-pressed":r&&P===p,children:[(0,e.jsx)(l.Text,{html:b.icon,className:(0,k.cn)("size-5",{"text-brand-0":r&&P===p}),"aria-hidden":"true"}),b.blockType===o.HeaderNavigationActionBlockType.Cart&&u>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(l.Text,{html:u?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},b.id))})}),me=({title:n,onMenuOpenClose:r,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(S.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:n,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(S.Close,{className:"size-5","aria-hidden":"true"})})]});ue.displayName="MobileNavigation",re.displayName="Actions",se.displayName="HeaderNavigation",ce.displayName="DesktopNavigation";var Re=(0,pe.withLayout)(se);
1
+ "use strict";"use client";var Me=Object.create;var Z=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Te=(n,r)=>{for(var i in r)Z(n,i,{get:r[i],enumerable:!0})},le=(n,r,i,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of Pe(r))!Ee.call(n,u)&&u!==i&&Z(n,u,{get:()=>r[u],enumerable:!(c=Se(r,u))||c.enumerable});return n};var ee=(n,r,i)=>(i=n!=null?Me(De(n)):{},le(r||!n||!n.__esModule?Z(i,"default",{value:n,enumerable:!0}):i,n)),He=n=>le(Z({},"__esModule",{value:!0}),n);var Ie={};Te(Ie,{default:()=>Re});module.exports=He(Ie);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),pe=require("../../shared/Styles.js"),w=require("../../helpers/utils.js"),F=ee(require("./NavProvider.js")),o=require("./types.js"),fe=ee(require("jump.js")),te=require("@gsap/react"),X=require("gsap"),x=require("./withCategory.js"),S=require("./icons/index.js"),be=ee(require("../NavigationSearch/index.js")),ve=require("./ResourceSidebarDropdown.js"),ge=require("./MobileResourceSidebarMenu.js"),he=require("./SidebarDropdown.js"),ae=require("./useScrollLock.js"),ye=require("./MulticolDropdown.js"),Ne=require("./SupportsDropdown.js"),ke=require("./MobileSidebarMenu.js"),we=require("./MobileSupportMenu.js"),Ce=require("./MobileMulticolMenu.js"),ne=require("./MobileMenuComponents.js"),oe=require("../AiuiProvider/index.js"),ie=ee(require("../../shared/throttle.js"));const se=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:c,event:u,profile:T,theme:s="light",isTop:d=!1,searchResult:h,onSearch:v,isSearching:p,keywords:L,onPrimaryNavClick:C,onSeriesProductClick:y,onSidebarNavClick:P,onMobileMenuToggle:U,headerId:D,cartCount:z,menuData:B,render:R,componentOverrides:G,...J}=n,[I,f]=(0,t.useState)(!1),[W,A]=(0,t.useState)(!1),[O,H]=(0,t.useState)(!1),[Y,g]=(0,t.useState)(!1),j=(0,t.useRef)(null),M=(0,t.useRef)(null),q=()=>{const N=document?.querySelector("body")?.offsetWidth||0;g(N<=1440)};(0,t.useEffect)(()=>(q(),window.addEventListener("resize",q),()=>{window.removeEventListener("resize",q)}),[]),(0,t.useImperativeHandle)(r,()=>M.current),(0,t.useEffect)(()=>{M.current&&d&&(0,fe.default)(M.current,{duration:0,offset:M.current?.getBoundingClientRect()?.bottom||0})},[d]),(0,t.useEffect)(()=>{if(d){A(!1),H(!1);return}let N=0,a=0,m=0;const b=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,k=b();N=k,A(k>300),H(k>30);const $=(0,ie.default)(()=>{const E=b(),K=E-N;H(E>30),K>0?(a=0,m+=K,m>=300&&E>300&&A(!0)):K<0&&(m=0,a+=Math.abs(K),a>=300&&(A(!1),a=0)),N=E},100);return window.addEventListener("scroll",$,{passive:!0}),()=>window.removeEventListener("scroll",$)},[d]),(0,t.useEffect)(()=>{u&&(u.search=()=>f(!0))},[u]),(0,te.useGSAP)(()=>{j?.current&&I&&X.gsap.fromTo(j.current,{height:0},{height:"auto",duration:.3})},[I]),(0,ae.useScrollLock)(I);const Q=(0,t.useMemo)(()=>i?.bar?.actions?.find(N=>N?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]),_=R?.mobileHeaderNavigation;return(0,e.jsx)(F.default,{buildProps:c,profile:T,isMobile:Y,event:u,payloadData:i,onSidebarNavClick:P,onSeriesProductClick:y,cartCount:z,componentOverrides:G,children:(0,e.jsx)("header",{...J,id:D||"header","data-ui-component-id":"HeaderNavigation",className:d?"relative z-[100] bg-white":(0,w.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":W}),ref:M,children:(0,e.jsxs)("div",{className:(0,w.cn)("hover:bg-white hover:text-black",s==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!d&&O},{"hover:!text-black":s==="dark","!text-black":!d&&O}),onClick:()=>!d&&H(!0),children:[(0,e.jsx)(ce,{data:i,className:"desktop:block hidden !bg-white",theme:s,onNavItemClick:()=>!d&&H(!0),onPrimaryNavClick:C}),_?(0,e.jsx)(_,{className:"desktop:hidden block !bg-white",menuData:B,data:i,onPrimaryNavClick:C}):(0,e.jsx)(ue,{menuData:B,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:C,onMobileMenuToggle:U}),I&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${M?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:j,className:(0,w.cn)("overflow-y-auto",{}),children:(0,e.jsx)(be.default,{data:Q,keywords:L,isSearching:p,searchResult:h,onSearch:N=>{v?.(N)},onClose:()=>{v?.(),f(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>f(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:N=>{(N.key==="Enter"||N.key===" "||N.key==="Escape")&&(N.preventDefault(),f(!1))}})]})]})})})}),ce=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:c,className:u,theme:T,onPrimaryNavClick:s}=n,{event:d,profile:h}=(0,F.useNavContext)(),[v,p]=(0,t.useState)(!1),{locale:L="us"}=(0,oe.useAiuiContext)(),C=(0,t.useMemo)(()=>(0,x.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[y,P]=(0,t.useState)(null),[U,D]=(0,t.useState)([]),z=(0,t.useRef)(null),[B,R]=(0,t.useState)(!1),G=(0,t.useRef)(null),J=(0,t.useRef)(null),I=(0,t.useRef)(C.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{C?.length&&D(C?.map((a,m)=>a?.map((b,k)=>({groupIndex:m,index:k,open:!1}))))},[C]);const f=(0,t.useMemo)(()=>{let a=null;for(const m of U){for(const b of m)if(b.open){a=b;break}if(a)break}return a},[U]);(0,ae.useScrollLock)(!!f?.open||B);const W=(a,m,b)=>{R(!1);const k=C[m][b];if(k?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank");else{const $=C?.flat()||[],E=$?.findIndex(K=>K?.id===C[m][b]?.id);a.stopPropagation(),c?.(),s?.($[E],E),P(k),D(K=>K.map(xe=>xe.map(V=>V.groupIndex===m&&V.index===b?{...V,open:!V.open}:{...V,open:!1})))}},A=(a,m,b)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),W(a,m,b)):a.key==="Escape"&&f?.groupIndex===m&&f?.index===b&&(a.preventDefault(),O())},O=()=>{D(a=>a.map(m=>m.map(b=>({...b,open:!1}))))},H=(0,t.useMemo)(()=>{if(y)return y?.components?.[0]?.blockType},[y]),Y=(0,x.WithSidebar)(he.SidebarDropdown,y),g=(0,x.WithResource)(ve.ResourceSidebarDropdown,y),j=(0,x.WithMulticol)(ye.MulticolDropdown,y),M=(0,x.WithSupports)(Ne.SupportsDropdown,{categoriesItem:y,currentNavItemRef:I.current?.[f?.groupIndex||0]?.[f?.index||0]}),q=(0,t.useMemo)(()=>{switch(H){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(Y,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(g,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(M,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(j,{});default:return null}},[H,y]),Q=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),_=(0,t.useMemo)(()=>Q?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[Q]),N=(0,t.useCallback)(()=>{R(a=>!a)},[]);return(0,t.useEffect)(()=>{if(z?.current){const a=z.current;return a.addEventListener("click",N),()=>{a.removeEventListener("click",N)}}},[N]),(0,te.useGSAP)(()=>{f?.open&&X.gsap.fromTo(J?.current,{height:0},{height:"auto"})},[f?.open]),(0,e.jsxs)(l.Container,{className:(0,w.cn)("relative h-[92px]",u),children:[(0,e.jsxs)("div",{ref:G,onClick:O,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(de,{}),(0,e.jsx)(re,{ref:z,actions:Q,activeStatus:B})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:C?.map((a,m)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((b,k)=>{const $=f?.groupIndex===m&&f?.index===k;return(0,e.jsx)("div",{ref:E=>{I.current[m][k]=E},className:"group",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:E=>W(E,m,k),onKeyDown:E=>A(E,m,k),"aria-expanded":$,"aria-haspopup":"true","aria-label":b.text,children:[(0,e.jsx)(l.Text,{html:b.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(S.DownArrow,{className:(0,w.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":f?.groupIndex===m&&f?.index===k,"opacity-100":v&&f?.groupIndex===m&&f?.index===k,invisible:!b?.components?.length||b?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links})})]}),(0,e.jsx)("div",{className:(0,w.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":$},T==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},b.id)})},`groupCategory-${m}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(f?.open&&y),className:(0,w.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(f?.open&&y)}),onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),style:{height:`calc(100dvh - ${G?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:J,className:(0,w.cn)("relative z-50",{"overflow-hidden":H!==o.HeaderNavigationBlockType.Supports}),children:q}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:O,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),O())}})]}),B&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:h?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:h?.nick_name||_?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:_?.profiles?.map(a=>(0,e.jsx)(ne.MenuItem,{className:"py-2",label:a?.title,href:(0,w.getLocalizedPath)(a?.url,L)},a.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:_?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:_?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4 shrink-0",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex flex-wrap gap-2",children:[(0,e.jsx)(l.Button,{className:"grow",variant:"secondary",size:"lg",onClick:()=>d?.join?.(),children:(0,e.jsx)(l.Text,{html:_?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{className:"grow",variant:"primary",size:"lg",onClick:()=>d?.login?.(),children:(0,e.jsx)(l.Text,{html:_?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),R(!1))}})]})]})}),ue=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:c,onMobileMenuToggle:u},T)=>{const s=(0,t.useMemo)(()=>(0,x.WithGroupCategory)(n?.categories?.filter(g=>g?.mobileShow)),[n]),{currentMenu:d,setCurrentMenu:h,subSubCategory:v}=(0,F.useNavContext)(),[p,L]=(0,t.useState)(!1),[C,y]=(0,t.useState)(0),[P,U]=(0,t.useState)(null),D=(0,t.useRef)(null),z=(0,t.useRef)(!1);(0,t.useEffect)(()=>{if(D?.current&&p){const g=D?.current?.getBoundingClientRect();y(window?.innerHeight-(g?.top||0))}u?.({open:p})},[p,u]),(0,t.useEffect)(()=>{if(!p)return;const g=(0,ie.default)(()=>{if(D?.current){const j=D.current.getBoundingClientRect();z.current=!0,y(window?.innerHeight-(j?.top||0))}},100);return window.addEventListener("resize",g),()=>window.removeEventListener("resize",g)},[p]),(0,te.useGSAP)(()=>{if(z.current){X.gsap.set(D.current,{height:C}),z.current=!1;return}X.gsap.fromTo(D.current,{height:0},{height:C,duration:.3})},[C]),(0,ae.useScrollLock)(p);const B=(0,t.useMemo)(()=>P?.components?.[0]?.blockType,[P]),R=(0,x.WithSupports)(we.MobileSupportMenu,{categoriesItem:P}),G=(0,x.WithSidebar)(ke.MobileSidebarMenu,P),J=(0,x.WithResource)(ge.MobileResourceSidebarMenu,P),I=(0,x.WithMulticol)(Ce.MobileMulticolMenu,P),f=(0,t.useMemo)(()=>{switch(B){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(G,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(J,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(R,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(I,{});default:return null}},[B,P,R]),W=(0,t.useCallback)(()=>{L(!1),y(0),h&&h(o.HeaderNavigationMenu.Primary)},[L,y,h]),A=(0,t.useMemo)(()=>n?.bar?.actions?.filter(g=>g?.mobileShow&&g?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),O=(0,t.useMemo)(()=>n?.bar?.actions?.find(g=>g?.mobileShow&&g?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),H=(0,t.useMemo)(()=>{switch(d){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Be,{actions:A,menuOpen:p,onMenuOpenClose:()=>{L(!1),y(0)},onMenuOpenClick:()=>L(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(me,{title:P?.text,onMenuOpenClose:W,onMenuBackClick:()=>h?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(me,{title:v?.label,onMenuOpenClose:W,onMenuBackClick:()=>h?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[p,d,h,P,A,v,W]),Y=(0,t.useCallback)((g,j)=>{const M=Array.isArray(s)?Array.isArray(s[g])?s[g][j]:{}:{};U(M),M?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?M?.components?.[0]?.url&&window.open(M?.components?.[0]?.url,M?.components?.[0]?.target??"_blank"):h?.(o.HeaderNavigationMenu.Secondary)},[s,h]);return(0,e.jsxs)(l.Container,{className:(0,w.cn)("relative h-[56px]",i),children:[H,p&&(0,e.jsxs)("nav",{ref:D,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:C},role:"navigation","aria-label":"Mobile navigation menu",children:[d===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,d===o.HeaderNavigationMenu.Primary?(0,e.jsx)(Le,{categories:s,onPrimaryMenuClick:Y,onPrimaryNavClick:c,profileAction:O,menuData:r}):f]})]})}),Le=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:c,menuData:u})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:n?.map((T,s)=>(0,e.jsxs)("div",{className:"",children:[s>0||u?(0,e.jsx)("div",{className:(0,w.cn)("my-2 h-px w-full bg-[#E5E5E7]")}):null,T?.map((d,h)=>(0,e.jsx)(ne.MenuItem,{label:d.text,onClick:()=>{const p=(n?.flat()||[])?.findIndex(L=>L?.id===n[s][h]?.id);r(s,h),c?.(d,p)},icon:d.components?.[0]?.icon},d.id))]},`groupCategory-${s}`))}),(0,e.jsx)(ze,{profileAction:i})]}),ze=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:c,event:u}=(0,F.useNavContext)(),{locale:T="us"}=(0,oe.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,w.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":c?.nick_name||n?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(S.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:c?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(S.DownArrow,{"aria-hidden":"true",className:(0,w.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),c?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(s=>(0,e.jsx)(ne.MenuItem,{label:s?.title,href:(0,w.getLocalizedPath)(s?.url,T)},s.id))}),r&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(s=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>u?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>u?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Be=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(de,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(re,{actions:c}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(S.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(S.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),de=()=>{const{payloadData:n,isMobile:r}=(0,F.useNavContext)(),{locale:i="us"}=(0,oe.useAiuiContext)();return(0,e.jsx)("a",{href:(0,w.getLocalizedPath)("/",i),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},re=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:c,cartCount:u}=(0,F.useNavContext)(),[T,s]=(0,t.useState)(null),d=v=>{switch(v){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${u>0?` (${u} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},h=(0,t.useCallback)((v,p)=>{switch(s(p),v?.blockType){case o.HeaderNavigationActionBlockType.Search:c?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((v,p)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":v?.tag||"",ref:v.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>h(v,p),"aria-label":d(v.blockType),"aria-pressed":r&&T===p,children:[(0,e.jsx)(l.Text,{html:v.icon,className:(0,w.cn)("size-5",{"text-brand-0":r&&T===p}),"aria-hidden":"true"}),v.blockType===o.HeaderNavigationActionBlockType.Cart&&u>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(l.Text,{html:u?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},v.id))})}),me=({title:n,onMenuOpenClose:r,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(S.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:n,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(S.Close,{className:"size-5","aria-hidden":"true"})})]});ue.displayName="MobileNavigation",re.displayName="Actions",se.displayName="HeaderNavigation",ce.displayName="DesktopNavigation";var Re=(0,pe.withLayout)(se);
@@ -1 +1 @@
1
- "use strict";var ie=Object.create;var H=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,l)=>{for(var i in l)H(e,i,{get:l[i],enumerable:!0})},O=(e,l,i,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of re(l))!se.call(e,s)&&s!==i&&H(e,s,{get:()=>l[s],enumerable:!(w=oe(l,s))||w.enumerable});return e};var de=(e,l,i)=>(i=e!=null?ie(ne(e)):{},O(l||!e||!e.__esModule?H(i,"default",{value:e,enumerable:!0}):i,e)),ue=e=>O(H({},"__esModule",{value:!0}),e);var fe={};ce(fe,{default:()=>ge});module.exports=ue(fe);var t=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),A=require("./types.js"),I=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,t.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),U=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,t.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),pe=()=>{const{copyWriting:e}=(0,W.useAiuiContext)(),{product:l,variant:i,selectedOptions:w}=(0,j.useBizProductContext)(),s=(0,J.useVariantMedia)({product:l,variant:i}),[y,N]=(0,a.useState)(null),V=(0,a.useRef)(null),f=i?.metafields?.component?.custom_media_list;let u,S,E,L;f&&f?.available?(u=f?.product||[],S=f?.scenarios||[],E=f?.keyFeatures||[],L=f?.video||[]):(u=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const p=(0,a.useMemo)(()=>[...u,...S,...L],[u,S,L]),g={productList:u,sceneList:S,keyFeaturesList:E,videoList:L},o=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],d=i?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return n?.map(v=>{const k=Array.isArray(d)?d?.find(F=>v?.galleries===F?.galleries):{};let D=g[v?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 767`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...v,galleries:D}}).filter(v=>v.galleries.length>0)},[i?.payload,g,l?.payload]),[x,r]=(0,a.useState)(o?.[0]),[c,P]=(0,a.useState)(0),[h,G]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const n=(c+1)%o.length;P(n),r(o[n]),G(0)},[c,o]),z=(0,a.useCallback)(()=>{const n=c===0?o.length-1:c-1;P(n),r(o[n]);const d=o[n]?.galleries||[];G(d.length-1)},[c,o]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{V.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(o[0]),P(0)},[i?.id]);const B=(n,d)=>{switch(n?.galleryTabType){case A.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_VIDEO:return(0,t.jsx)(be,{...n,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});default:return null}};return(0,t.jsx)("div",{id:"ipc-product-gallery",children:(0,t.jsxs)(I.Root,{className:"relative",value:x?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,t.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((n,d)=>(0,t.jsx)(I.Content,{className:"h-full",value:n.tabValue,children:B(n,d)},n.tabValue))}),(0,t.jsx)(Z,{ref:V,galleryTabs:o,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},Z=(0,a.forwardRef)((e,l)=>{const{galleryTabs:i,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:y,setTargetSlideIndex:N}=e,{product:V}=(0,j.useBizProductContext)(),f=(0,a.useRef)(null),u=(0,a.useRef)(new Map),S=(0,a.useCallback)(p=>{if(f.current){const g=f.current,o=p.currentTarget,x=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((p,g,o)=>{s(g),y(o),N(0),S(p)},[s,y,N,S]),L=(0,a.useCallback)(p=>{if(f.current&&i[p]){const g=f.current,o=i[p],x=u.current.get(o.tabValue);if(x){const r=x.offsetLeft-g.offsetWidth/2+x.offsetWidth/2;g.scrollTo({left:r,behavior:"smooth"})}}},[i]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,t.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,t.jsx)(I.List,{ref:f,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)("div",{className:"whitespace-nowrap",children:i?.map((p,g)=>(0,t.jsx)(I.Trigger,{ref:o=>{o?u.current.set(p.tabValue,o):u.current.delete(p.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",p.tabValue===w?.tabValue&&"bg-white"),onClick:o=>E(o,p,g),value:p.tabValue,children:p.tabLabel},p.tabValue+g))})}),(0,t.jsx)("div",{className:"desktop:gap-2 desktop:flex hidden",children:V.metafields?.global?.specifications&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(Q.SpecsModal,{})," | ",(0,t.jsx)(X.default,{})]})})]})});Z.displayName="ProductGalleryTab";const $=(0,a.forwardRef)((e,l)=>{const{locale:i="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:y}=(0,j.useBizProductContext)(),N=(0,a.useRef)(null),[V,f]=(0,a.useState)(null),[u,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),p=(0,a.useRef)(null),g=(0,a.useMemo)(()=>{if(e?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,A.GalleryTabType.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),o=(0,a.useCallback)(()=>{u?.isBeginning?e.onPrevTab?.():u?.slidePrev()},[u,e]),x=(0,a.useCallback)(()=>{u?.isEnd?e.onNextTab?.():u?.slideNext()},[u,e]);return(0,a.useEffect)(()=>{u&&e.targetSlideIndex&&(u.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[u,e.targetSlideIndex,e]),(0,a.useEffect)(()=>{const r=()=>{if(!e?.comment?.content||!p.current)return;const h=p.current;h.textContent="Test";const R=h.offsetHeight*2+2,B=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let d="";for(let v=0;v<B.length;v++){const k=B[v],D=d?`${d} ${k}`:k;h.textContent=D,h.offsetHeight>R?d?(n.push(d),d=k):(n.push(k),d=""):d=D}d&&n.push(d),h.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[e?.comment?.content]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?o():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:V},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((r,c)=>{const P=`${e.tabValue}-${c}`,h=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,t.jsx)(T.SwiperSlide,{className:"h-full",children:(0,t.jsx)(le.ExposureDetector,{onExposure:h,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,t.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",g),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!y&&!e.index&&(0,t.jsx)(_.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:y,currencyCode:s?.price?.currencyCode,locale:i})} ${w?.off}`}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,t.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,t.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:e?.galleries?.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,t.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+c))})}),!e?.index&&(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(_.Picture,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,t.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,t.jsx)("div",{ref:p,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,t.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,t.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});$.displayName="ProductGalleryTabImage";const me=({src:e})=>{const l=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const i=l.current;i&&(i.muted=!0,i.play().catch(()=>{}))},[]),(0,t.jsxs)("video",{ref:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[(0,t.jsx)("track",{kind:"captions"}),(0,t.jsx)("source",{src:e,type:"video/mp4"}),(0,t.jsx)("source",{src:e,type:"video/webm"}),(0,t.jsx)("source",{src:e,type:"video/ogg"})]})},be=e=>{const[l,i]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?e.onPrevTab?.():l?.slidePrev()},[l,e]),s=(0,a.useCallback)(()=>{l?.isEnd?e.onNextTab?.():l?.slideNext()},[l,e]);return(0,a.useEffect)(()=>{l&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(l.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[l,e.targetSlideIndex,e]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(y,N)=>{y.isBeginning&&y.swipeDirection==="prev"?w():y.isEnd&&y.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((y,N)=>(0,t.jsx)(T.SwiperSlide,{className:"h-full bg-info-primary",children:(0,t.jsx)(me,{src:y?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+N))}),(0,t.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,t.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,t.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ye=e=>(0,t.jsx)("div",{children:"3D View"});var ge=(0,te.withLayout)(pe);
1
+ "use strict";var ie=Object.create;var H=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,l)=>{for(var r in l)H(e,r,{get:l[r],enumerable:!0})},O=(e,l,r,S)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of re(l))!se.call(e,c)&&c!==r&&H(e,c,{get:()=>l[c],enumerable:!(S=oe(l,c))||S.enumerable});return e};var de=(e,l,r)=>(r=e!=null?ie(ne(e)):{},O(l||!e||!e.__esModule?H(r,"default",{value:e,enumerable:!0}):r,e)),ue=e=>O(H({},"__esModule",{value:!0}),e);var fe={};ce(fe,{default:()=>ge});module.exports=ue(fe);var t=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),k=require("../../../../../components/index.js"),a=require("react"),w=require("swiper/react"),b=require("swiper/modules"),P=require("../../../../../helpers/index.js"),C=require("./types.js"),_=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,t.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),U=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,t.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),pe=()=>{const{copyWriting:e}=(0,W.useAiuiContext)(),{product:l,variant:r,selectedOptions:S}=(0,j.useBizProductContext)(),c=(0,J.useVariantMedia)({product:l,variant:r}),[y,E]=(0,a.useState)(null),M=(0,a.useRef)(null),G=r?.metafields?.component?.custom_media_list;let s,h,x,T;G&&G?.available?(s=G?.product||[],h=G?.scenarios||[],x=G?.keyFeatures||[],T=G?.video||[]):(s=c?.productList,h=c?.sceneList,x=c?.keyFeaturesList,T=c?.videoList);const A=(0,a.useMemo)(()=>[...s,...h,...T],[s,h,T]),V={productList:s,sceneList:h,keyFeaturesList:x,videoList:T},p=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],u=r?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return n?.map(v=>{const L=Array.isArray(u)?u?.find(F=>v?.galleries===F?.galleries):{};let D=V[v?.galleries]||[];if(L?.images&&Array.isArray(L.images)&&L.images.length>0){const F=L.images.map(m=>{const I=[];if(m.image_1920&&m.image_1920.trim()&&I.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&I.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&I.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&I.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&I.push(`${m.image_390} 767`),I.length>0){const K=I.join(", ");return{image:{url:K,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...v,galleries:D}}).filter(v=>v.galleries.length>0)},[r?.payload,V,l?.payload]),[d,i]=(0,a.useState)(p?.[0]),[o,g]=(0,a.useState)(0),[f,N]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const n=(o+1)%p.length;g(n),i(p[n]),N(0)},[o,p]),z=(0,a.useCallback)(()=>{const n=o===0?p.length-1:o-1;g(n),i(p[n]);const u=p[n]?.galleries||[];N(u.length-1)},[o,p]);(0,a.useEffect)(()=>{o!=null&&requestAnimationFrame(()=>{M.current?.scrollToTab(o)})},[o]),(0,a.useEffect)(()=>{i(p[0]),g(0)},[r?.id]);const B=(n,u)=>{switch(n?.galleryTabType){case C.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,t.jsx)($,{...n,index:u,onNextTab:R,onPrevTab:z,targetSlideIndex:f,onSlideChange:()=>N(null)});case C.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,t.jsx)($,{...n,index:u,onNextTab:R,onPrevTab:z,targetSlideIndex:f,onSlideChange:()=>N(null)});case C.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,t.jsx)($,{...n,index:u,onNextTab:R,onPrevTab:z,targetSlideIndex:f,onSlideChange:()=>N(null)});case C.GalleryTabType.GALLERY_VIDEO:return(0,t.jsx)(be,{...n,onNextTab:R,onPrevTab:z,targetSlideIndex:f,onSlideChange:()=>N(null)});default:return null}};return(0,t.jsx)("div",{id:"ipc-product-gallery",children:(0,t.jsxs)(_.Root,{className:"relative",value:d?.tabValue,defaultValue:p?.[0]?.tabValue,children:[(0,t.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:p.map((n,u)=>(0,t.jsx)(_.Content,{className:"h-full",value:n.tabValue,children:B(n,u)},n.tabValue))}),(0,t.jsx)(Z,{ref:M,galleryTabs:p,activeGalleryTab:d,setActiveGalleryTab:i,setActiveTabIndex:g,setTargetSlideIndex:N})]})})},Z=(0,a.forwardRef)((e,l)=>{const{galleryTabs:r,activeGalleryTab:S,setActiveGalleryTab:c,setActiveTabIndex:y,setTargetSlideIndex:E}=e,{product:M,compareData:G}=(0,j.useBizProductContext)(),s=(0,a.useRef)(null),h=(0,a.useRef)(new Map),x=!!M.metafields?.global?.specifications?.length,T=!!G?.specificationKeys?.length,A=(0,a.useCallback)(d=>{if(s.current){const i=s.current,o=d.currentTarget,g=o.offsetLeft-i.offsetWidth/2+o.offsetWidth/2;i.scrollTo({left:g,behavior:"smooth"})}},[]),V=(0,a.useCallback)((d,i,o)=>{c(i),y(o),E(0),A(d)},[c,y,E,A]),p=(0,a.useCallback)(d=>{if(s.current&&r[d]){const i=s.current,o=r[d],g=h.current.get(o.tabValue);if(g){const f=g.offsetLeft-i.offsetWidth/2+g.offsetWidth/2;i.scrollTo({left:f,behavior:"smooth"})}}},[r]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:p})),(0,t.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,t.jsx)(_.List,{ref:s,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)("div",{className:"whitespace-nowrap",children:r?.map((d,i)=>(0,t.jsx)(_.Trigger,{ref:o=>{o?h.current.set(d.tabValue,o):h.current.delete(d.tabValue)},className:(0,P.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",d.tabValue===S?.tabValue&&"bg-white"),onClick:o=>V(o,d,i),value:d.tabValue,children:d.tabLabel},d.tabValue+i))})}),(x||T)&&(0,t.jsxs)("div",{className:"desktop:gap-2 desktop:flex hidden",children:[x&&(0,t.jsx)(Q.SpecsModal,{}),x&&T&&(0,t.jsx)("span",{children:"|"}),T&&(0,t.jsx)(X.default,{})]})]})});Z.displayName="ProductGalleryTab";const $=(0,a.forwardRef)((e,l)=>{const{locale:r="us",copyWriting:S}=(0,W.useAiuiContext)(),{variant:c,totalSavings:y}=(0,j.useBizProductContext)(),E=(0,a.useRef)(null),[M,G]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),[x,T]=(0,a.useState)([]),A=(0,a.useRef)(null),V=(0,a.useMemo)(()=>{if(e?.galleryTabType===C.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===C.GalleryTabType.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,C.GalleryTabType.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),p=(0,a.useCallback)(()=>{s?.isBeginning?e.onPrevTab?.():s?.slidePrev()},[s,e]),d=(0,a.useCallback)(()=>{s?.isEnd?e.onNextTab?.():s?.slideNext()},[s,e]);return(0,a.useEffect)(()=>{s&&e.targetSlideIndex&&(s.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[s,e.targetSlideIndex,e]),(0,a.useEffect)(()=>{const i=()=>{if(!e?.comment?.content||!A.current)return;const f=A.current;f.textContent="Test";const R=f.offsetHeight*2+2,B=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let u="";for(let v=0;v<B.length;v++){const L=B[v],D=u?`${u} ${L}`:L;f.textContent=D,f.offsetHeight>R?u?(n.push(u),u=L):(n.push(L),u=""):u=D}u&&n.push(u),f.textContent="",T(n)},o=requestAnimationFrame(()=>{requestAnimationFrame(()=>{i()})}),g=()=>{i()};return window.addEventListener("resize",(0,Y.debounce)(g,500)),()=>{cancelAnimationFrame(o),window.removeEventListener("resize",(0,Y.debounce)(g,500))}},[e?.comment?.content]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(w.Swiper,{ref:l,className:"h-full",onSwiper:h,onTouchEnd:(i,o)=>{i.isBeginning&&i.swipeDirection==="prev"?p():i.isEnd&&i.swipeDirection==="next"&&d()},pagination:{clickable:!0,el:E.current},thumbs:{swiper:M},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((i,o)=>{const g=`${e.tabValue}-${o}`,f=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${c.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:o+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},N=i?._responsiveSource||i?.image?.url||"";return(0,t.jsx)(w.SwiperSlide,{className:"h-full",children:(0,t.jsx)(le.ExposureDetector,{onExposure:f,exposureKey:g,threshold:.5,duration:2e3,className:"h-full",children:(0,t.jsx)(k.Picture,{source:N,alt:i?.image?.altText,className:(0,P.cn)("h-full",V),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+o)})}),c.availableForSale&&!!y&&!e.index&&(0,t.jsx)(k.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:y,currencyCode:c?.price?.currencyCode,locale:r})} ${S?.off}`}),(0,t.jsx)("div",{className:(0,P.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:p,children:(0,t.jsx)(q,{className:(0,P.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsx)("div",{className:(0,P.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:d,children:(0,t.jsx)(U,{className:(0,P.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(w.Swiper,{className:"flex items-center justify-between",onSwiper:G,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:e?.galleries?.map((i,o)=>(0,t.jsx)(w.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,t.jsx)(k.Picture,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+o))})}),!e?.index&&(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(k.Picture,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,t.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,t.jsx)("div",{ref:A,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,t.jsx)(w.Swiper,{modules:[b.Autoplay],loop:x.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:x.length>0?x.map((i,o)=>(0,t.jsx)(w.SwiperSlide,{children:(0,t.jsx)(k.Text,{html:i,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},o+"text-group")):(0,t.jsx)(w.SwiperSlide,{children:(0,t.jsx)(k.Text,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,t.jsx)("div",{ref:E,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});$.displayName="ProductGalleryTabImage";const me=({src:e})=>{const l=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const r=l.current;r&&(r.muted=!0,r.play().catch(()=>{}))},[]),(0,t.jsxs)("video",{ref:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[(0,t.jsx)("track",{kind:"captions"}),(0,t.jsx)("source",{src:e,type:"video/mp4"}),(0,t.jsx)("source",{src:e,type:"video/webm"}),(0,t.jsx)("source",{src:e,type:"video/ogg"})]})},be=e=>{const[l,r]=(0,a.useState)(null),S=(0,a.useCallback)(()=>{l?.isBeginning?e.onPrevTab?.():l?.slidePrev()},[l,e]),c=(0,a.useCallback)(()=>{l?.isEnd?e.onNextTab?.():l?.slideNext()},[l,e]);return(0,a.useEffect)(()=>{l&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(l.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[l,e.targetSlideIndex,e]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(w.Swiper,{className:"h-full",onSwiper:r,onTouchEnd:(y,E)=>{y.isBeginning&&y.swipeDirection==="prev"?S():y.isEnd&&y.swipeDirection==="next"&&c()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((y,E)=>(0,t.jsx)(w.SwiperSlide,{className:"h-full bg-info-primary",children:(0,t.jsx)(me,{src:y?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+E))}),(0,t.jsx)("div",{className:(0,P.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:S,children:(0,t.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,t.jsx)("div",{className:(0,P.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:c,children:(0,t.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ye=e=>(0,t.jsx)("div",{children:"3D View"});var ge=(0,te.withLayout)(pe);
@@ -1 +1 @@
1
- "use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var i=(a,p)=>{for(var t in p)c(a,t,{get:p[t],enumerable:!0})},x=(a,p,t,e)=>{if(p&&typeof p=="object"||typeof p=="function")for(let l of s(p))!r.call(a,l)&&l!==t&&c(a,l,{get:()=>p[l],enumerable:!(e=m(p,l))||e.enumerable});return a};var g=a=>x(c({},"__esModule",{value:!0}),a);var R={};i(R,{default:()=>N});module.exports=g(R);var o=require("react/jsx-runtime"),d=require("../../../../components/index.js");const G=({BoxLeftGallery:a,BoxRightDetail:p,BoxBottomSummary:t})=>(0,o.jsxs)("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,o.jsxs)(d.Grid,{className:"laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[(0,o.jsx)(d.GridItem,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:a}),(0,o.jsx)(d.GridItem,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:p})]}),t]});var N=G;
1
+ "use strict";var c=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var s=(t,p)=>{for(var a in p)c(t,a,{get:p[a],enumerable:!0})},x=(t,p,a,e)=>{if(p&&typeof p=="object"||typeof p=="function")for(let d of m(p))!r.call(t,d)&&d!==a&&c(t,d,{get:()=>p[d],enumerable:!(e=i(p,d))||e.enumerable});return t};var g=t=>x(c({},"__esModule",{value:!0}),t);var R={};s(R,{default:()=>N});module.exports=g(R);var o=require("react/jsx-runtime"),l=require("../../../../components/index.js");const G=({BoxLeftGallery:t,BoxRightDetail:p,BoxBottomSummary:a})=>(0,o.jsxs)("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,o.jsxs)(l.Grid,{className:"ipc-box-grid laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[(0,o.jsx)(l.GridItem,{className:"ipc-box-left-grid-item laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:t}),(0,o.jsx)(l.GridItem,{className:"ipc-box-right-grid-item laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:p})]}),a]});var N=G;
@@ -1,7 +1,13 @@
1
1
  import { type ReactNode } from 'react';
2
+ export interface ComparePriceRenderData {
3
+ /** 划线价金额 */
4
+ comparePrice: number;
5
+ }
2
6
  export interface ProductActionsProps {
3
7
  /** 自定义总节省组件,传入时会替代默认的 totalSavings 显示 */
4
8
  totalSavingsSlot?: ReactNode;
9
+ /** 自定义划线价渲染,传入时替换默认的划线价显示 */
10
+ renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
5
11
  }
6
- declare const ProductActions: ({ totalSavingsSlot }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
12
+ declare const ProductActions: ({ totalSavingsSlot, renderComparePrice }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
7
13
  export default ProductActions;
@@ -1 +1 @@
1
- "use strict";var j=Object.create;var u=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var $=(t,e)=>{for(var o in e)u(t,o,{get:e[o],enumerable:!0})},h=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of z(e))!W.call(t,n)&&n!==o&&u(t,n,{get:()=>e[n],enumerable:!(c=q(e,n))||c.enumerable});return t};var G=(t,e,o)=>(o=t!=null?j(U(t)):{},h(e||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),H=t=>h(u({},"__esModule",{value:!0}),t);var K={};$(K,{default:()=>J});module.exports=H(K);var a=require("react/jsx-runtime"),r=require("../../../../../components/index.js"),w=require("../../../../AiuiProvider/index.js"),S=require("../../../BizProductProvider.js"),b=require("react"),i=require("../../../utils/index.js"),f=require("../../../utils/textFormat.js"),T=require("../../../hooks/useBenefits.js"),k=G(require("../../CartActionButtons/index.js"));const I=({totalSavingsSlot:t}={})=>{const{copyWriting:e,locale:o="us",trackingData:c,currencyCode:n}=(0,w.useAiuiContext)(),{variant:l,finalPrice:A,totalSavings:d,isLogin:p,comparePrice:M,onAddToCart:P,onBuyNow:D,savingDetail:x,addToCartLoading:B,buyNowLoading:F,notifyMeMode:L,onNotifyMeClick:E,discount:Q,memberFunctionResult:g}=(0,S.useBizProductContext)(),R=(0,T.useBenefits)({variant:l}),{commonCoupon:m,memberDiscount:s}=R,O=c?.showComparePrice??!0,_=(0,b.useMemo)(()=>(0,f.replaceTemplate)(e?.totalSavings||"",{amount:(0,i.formatPrice)({amount:d,currencyCode:l.price.currencyCode,locale:n==="CAD"?"us":o||"us"})}),[e?.totalSavings,d,l.price.currencyCode,o]),C=(0,b.useMemo)(()=>{if(!e?.unlockedSaving)return;const y=m?.enable?Number(m?.config?.fixed_value||0):0,v=s?.enable?s.config?.amount??0:0,N=Math.round((g?.withoutCouponMaxMemberTotalSave?Math.max(v,y):v+y)*100)/100;if(!(N<=0))return(0,f.replaceTemplate)(e.unlockedSaving,{amount:(0,i.formatPrice)({amount:N,currencyCode:l.price.currencyCode,locale:n==="CAD"?"us":o||"us"})})},[e?.unlockedSaving,m?.enable,m?.config?.fixed_value,s?.enable,s?.config?.amount,g,l.price.currencyCode,o]);return(0,a.jsxs)(r.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[l.availableForSale?(0,a.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(r.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,i.formatPrice)({amount:parseFloat(A.toFixed(2)),currencyCode:l.price.currencyCode,locale:n==="CAD"?"us":o||"us"})}),O&&(d>0||x?.member>0&&p)&&(0,a.jsx)(r.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,i.formatPrice)({amount:M,currencyCode:l.price.currencyCode,locale:n==="CAD"?"us":o||"us"})}),x?.member>0&&p&&(0,a.jsx)(r.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),t||(d>0||x?.member>0&&p?(0,a.jsx)(r.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${_}`}):C?(0,a.jsx)(r.Text,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:C}):null)]}):(0,a.jsx)(r.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsx)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:(0,a.jsx)(k.default,{mode:L,availableForSale:l.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:B,buyNowLoading:F,onAddToCart:P,onBuyNow:D,onNotifyMeClick:E,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var J=I;
1
+ "use strict";var q=Object.create;var p=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var G=(t,o)=>{for(var e in o)p(t,e,{get:o[e],enumerable:!0})},S=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of U(o))!$.call(t,i)&&i!==e&&p(t,i,{get:()=>o[i],enumerable:!(n=z(o,i))||n.enumerable});return t};var H=(t,o,e)=>(e=t!=null?q(W(t)):{},S(o||!t||!t.__esModule?p(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>S(p({},"__esModule",{value:!0}),t);var Q={};G(Q,{default:()=>K});module.exports=I(Q);var a=require("react/jsx-runtime"),l=require("../../../../../components/index.js"),P=require("../../../../AiuiProvider/index.js"),T=require("../../../BizProductProvider.js"),f=require("react"),c=require("../../../utils/index.js"),g=require("../../../utils/textFormat.js"),k=require("../../../hooks/useBenefits.js"),A=H(require("../../CartActionButtons/index.js"));const J=({totalSavingsSlot:t,renderComparePrice:o}={})=>{const{copyWriting:e,locale:n="us",trackingData:i,currencyCode:d}=(0,P.useAiuiContext)(),{variant:r,finalPrice:M,totalSavings:m,isLogin:x,comparePrice:C,onAddToCart:D,onBuyNow:B,savingDetail:b,addToCartLoading:F,buyNowLoading:R,notifyMeMode:L,onNotifyMeClick:E,discount:V,memberFunctionResult:y}=(0,T.useBizProductContext)(),O=(0,k.useBenefits)({variant:r}),{commonCoupon:s,memberDiscount:u}=O,_=i?.showComparePrice??!0,j=(0,f.useMemo)(()=>(0,g.replaceTemplate)(e?.totalSavings||"",{amount:(0,c.formatPrice)({amount:m,currencyCode:r.price.currencyCode,locale:d==="CAD"?"us":n||"us"})}),[e?.totalSavings,m,r.price.currencyCode,n]),v=(0,f.useMemo)(()=>{if(!e?.unlockedSaving)return;const N=s?.enable?Number(s?.config?.fixed_value||0):0,h=u?.enable?u.config?.amount??0:0,w=Math.round((y?.withoutCouponMaxMemberTotalSave?Math.max(h,N):h+N)*100)/100;if(!(w<=0))return(0,g.replaceTemplate)(e.unlockedSaving,{amount:(0,c.formatPrice)({amount:w,currencyCode:r.price.currencyCode,locale:d==="CAD"?"us":n||"us"})})},[e?.unlockedSaving,s?.enable,s?.config?.fixed_value,u?.enable,u?.config?.amount,y,r.price.currencyCode,n]);return(0,a.jsxs)(l.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[r.availableForSale?(0,a.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,c.formatPrice)({amount:parseFloat(M.toFixed(2)),currencyCode:r.price.currencyCode,locale:d==="CAD"?"us":n||"us"})}),o?o({comparePrice:C}):_&&(m>0||b?.member>0&&x)&&(0,a.jsx)(l.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,c.formatPrice)({amount:C,currencyCode:r.price.currencyCode,locale:d==="CAD"?"us":n||"us"})}),b?.member>0&&x&&(0,a.jsx)(l.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),t||(m>0||b?.member>0&&x?(0,a.jsx)(l.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${j}`}):v?(0,a.jsx)(l.Text,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:v}):null)]}):(0,a.jsx)(l.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsx)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:(0,a.jsx)(A.default,{mode:L,availableForSale:r.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:F,buyNowLoading:R,onAddToCart:D,onBuyNow:B,onNotifyMeClick:E,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var K=J;
@@ -1 +1 @@
1
- "use strict";var b=Object.create;var s=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!g.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(l=v(e,o))||l.enumerable});return t};var P=(t,e,r)=>(r=t!=null?b(N(t)):{},m(e||!t||!t.__esModule?s(r,"default",{value:t,enumerable:!0}):r,t)),y=t=>m(s({},"__esModule",{value:!0}),t);var C={};w(C,{default:()=>B});module.exports=y(C);var a=require("react/jsx-runtime"),i=require("../../../../components/index.js"),n=require("../index.js"),c=require("../../BizProductProvider.js"),u=require("../../hooks/useComponentData.js"),p=P(require("./ScrollSpyNav/index.js")),f=require("../../../../shared/Styles.js");const x=({onSpyNavItemClick:t,totalSavingsSlot:e,actionsSlot:r})=>{const{product:l,renderRating:o}=(0,c.useBizProductContext)(),d=(0,u.useComponentData)("PurchaseBar")??[];return(0,a.jsxs)("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[(0,a.jsx)(i.Container,{children:(0,a.jsxs)("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[(0,a.jsxs)("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[(0,a.jsx)(i.Heading,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:l?.title}),(0,a.jsx)("div",{className:"laptop-md:block mt-3 hidden",children:(0,a.jsx)(p.default,{tabs:d,className:"",renderRating:o,onSpyNavItemClick:t})})]}),(0,a.jsx)("div",{className:"laptop-md:block hidden shrink-0",children:r??(0,a.jsx)(n.ProductActions,{totalSavingsSlot:e})})]})}),(0,a.jsxs)(i.Container,{className:"laptop-md:hidden relative",children:[(0,a.jsx)("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),(0,a.jsx)(p.default,{tabs:d,renderRating:o,onSpyNavItemClick:t})]})]})};var B=(0,f.withLayout)(x);
1
+ "use strict";var v=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(a,e)=>{for(var r in e)p(a,r,{get:e[r],enumerable:!0})},n=(a,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of N(e))!P.call(a,o)&&o!==r&&p(a,o,{get:()=>e[o],enumerable:!(l=h(e,o))||l.enumerable});return a};var y=(a,e,r)=>(r=a!=null?v(g(a)):{},n(e||!a||!a.__esModule?p(r,"default",{value:a,enumerable:!0}):r,a)),x=a=>n(p({},"__esModule",{value:!0}),a);var E={};w(E,{default:()=>B});module.exports=x(E);var t=require("react/jsx-runtime"),i=require("../../../../components/index.js"),c=require("../index.js"),u=require("../../BizProductProvider.js"),f=require("../../hooks/useComponentData.js"),s=y(require("./ScrollSpyNav/index.js")),b=require("../../../../shared/Styles.js");const C=({onSpyNavItemClick:a,totalSavingsSlot:e,actionsSlot:r,renderComparePrice:l})=>{const{product:o,renderRating:d}=(0,u.useBizProductContext)(),m=(0,f.useComponentData)("PurchaseBar")??[];return(0,t.jsxs)("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[(0,t.jsx)(i.Container,{children:(0,t.jsxs)("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[(0,t.jsxs)("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[(0,t.jsx)(i.Heading,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:o?.title}),(0,t.jsx)("div",{className:"laptop-md:block mt-3 hidden",children:(0,t.jsx)(s.default,{tabs:m,className:"",renderRating:d,onSpyNavItemClick:a})})]}),(0,t.jsx)("div",{className:"laptop-md:block hidden shrink-0",children:r??(0,t.jsx)(c.ProductActions,{totalSavingsSlot:e,renderComparePrice:l})})]})}),(0,t.jsxs)(i.Container,{className:"laptop-md:hidden relative",children:[(0,t.jsx)("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),(0,t.jsx)(s.default,{tabs:m,renderRating:d,onSpyNavItemClick:a})]})]})};var B=(0,b.withLayout)(C);
@@ -1,10 +1,13 @@
1
1
  import type { ReactNode } from 'react';
2
+ import type { ComparePriceRenderData } from './ProductActions/index.js';
2
3
  export interface PurchaseBarProps {
3
4
  onSpyNavItemClick?: (tab: ScrollSpyNavItem) => void;
4
5
  /** 自定义总节省组件,传入时会替代默认的 totalSavings 显示 */
5
6
  totalSavingsSlot?: ReactNode;
6
7
  /** 自定义右侧 Actions 插槽,传入时替代默认的 ProductActions */
7
8
  actionsSlot?: ReactNode;
9
+ /** 自定义划线价渲染,传入时替换默认的划线价显示 */
10
+ renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
8
11
  }
9
12
  export interface ScrollSpyNavItem {
10
13
  label: string;
@@ -1 +1 @@
1
- "use strict";var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(t,e,c,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!p.call(t,r)&&r!==c&&o(t,r,{get:()=>e[r],enumerable:!(a=i(e,r))||a.enumerable});return t};var S=t=>s(o({},"__esModule",{value:!0}),t);var n={};module.exports=S(n);
1
+ "use strict";var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var l=(r,e,c,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!n.call(r,t)&&t!==c&&o(r,t,{get:()=>e[t],enumerable:!(a=i(e,t))||a.enumerable});return r};var s=r=>l(o({},"__esModule",{value:!0}),r);var d={};module.exports=s(d);
@@ -1 +1 @@
1
- "use client";import{Fragment as Pe,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ae,useCallback as ne,useEffect as G,useImperativeHandle as Ee,useMemo as D,useRef as J,useState as E}from"react";import{Picture as me,Text as w,Button as oe,Container as pe,BrandStrip as Te}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as T,getLocalizedPath as ie}from"../../helpers/utils.js";import Le,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as W,HeaderNavigationBlockType as H,HeaderNavigationActionBlockType as x}from"./types.js";import ze from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as Be,Close as ye,User as Re,LeftArrow as Ie,DownArrow as Ne,Polygon as Ae}from"./icons/index.js";import Oe from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as _e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as $e}from"./MulticolDropdown.js";import{SupportsDropdown as Ke}from"./SupportsDropdown.js";import{MobileSidebarMenu as Fe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ue}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ge}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import ke from"../../shared/throttle.js";const we=ae((a,l)=>{const{data:{header:r}={},buildProps:s,event:f,profile:C,theme:n="light",isTop:c=!1,searchResult:N,onSearch:m,isSearching:u,keywords:$,onPrimaryNavClick:y,onSeriesProductClick:v,onSidebarNavClick:M,onMobileMenuToggle:Y,headerId:S,cartCount:z,menuData:B,render:R,componentOverrides:q,...Q}=a,[I,d]=E(!1),[K,A]=E(!1),[O,L]=E(!1),[V,b]=E(!1),j=J(null),k=J(null),X=()=>{const g=document?.querySelector("body")?.offsetWidth||0;b(g<=1440)};G(()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)}),[]),Ee(l,()=>k.current),G(()=>{k.current&&c&&ze(k.current,{duration:0,offset:k.current?.getBoundingClientRect()?.bottom||0})},[c]),G(()=>{if(c){A(!1),L(!1);return}let g=0,t=0,i=0;const p=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,h=p();g=h,A(h>300),L(h>30);const F=ke(()=>{const P=p(),U=P-g;L(P>30),U>0?(t=0,i+=U,i>=300&&P>300&&A(!0)):U<0&&(i=0,t+=Math.abs(U),t>=300&&(A(!1),t=0)),g=P},100);return window.addEventListener("scroll",F,{passive:!0}),()=>window.removeEventListener("scroll",F)},[c]),G(()=>{f&&(f.search=()=>d(!0))},[f]),le(()=>{j?.current&&I&&re.fromTo(j.current,{height:0},{height:"auto",duration:.3})},[I]),se(I);const Z=D(()=>r?.bar?.actions?.find(g=>g?.blockType===x.Search)?.searchBar?.[0]||{},[r]),_=R?.mobileHeaderNavigation;return e(Le,{buildProps:s,profile:C,isMobile:V,event:f,payloadData:r,onSidebarNavClick:M,onSeriesProductClick:v,cartCount:z,componentOverrides:q,children:e("header",{...Q,id:S||"header","data-ui-component-id":"HeaderNavigation",className:c?"relative z-[100] bg-white":T("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":K}),ref:k,children:o("div",{className:T("hover:bg-white hover:text-black",n==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!c&&O},{"hover:!text-black":n==="dark","!text-black":!c&&O}),onClick:()=>!c&&L(!0),children:[e(xe,{data:r,className:"desktop:block hidden !bg-white",theme:n,onNavItemClick:()=>!c&&L(!0),onPrimaryNavClick:y}),_?e(_,{className:"desktop:hidden block !bg-white",menuData:B,data:r,onPrimaryNavClick:y}):e(Ce,{menuData:B,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:y,onMobileMenuToggle:Y}),I&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${k?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:j,className:T("overflow-y-auto",{}),children:e(Oe,{data:Z,keywords:$,isSearching:u,searchResult:N,onSearch:g=>{m?.(g)},onClose:()=>{m?.(),d(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:g=>{(g.key==="Enter"||g.key===" "||g.key==="Escape")&&(g.preventDefault(),d(!1))}})]})]})})})}),xe=ae((a,l)=>{const{data:r,onNavItemClick:s,className:f,theme:C,onPrimaryNavClick:n}=a,{event:c,profile:N}=te(),[m,u]=E(!1),{locale:$="us"}=ue(),y=D(()=>ge(r?.categories?.filter(t=>t?.pcShow)),[r]),[v,M]=E(null),[Y,S]=E([]),z=J(null),[B,R]=E(!1),q=J(null),Q=J(null),I=J(y.map(t=>Array(t?.length||0).fill(null)));G(()=>{y?.length&&S(y?.map((t,i)=>t?.map((p,h)=>({groupIndex:i,index:h,open:!1}))))},[y]);const d=D(()=>{let t=null;for(const i of Y){for(const p of i)if(p.open){t=p;break}if(t)break}return t},[Y]);se(!!d?.open||B);const K=(t,i,p)=>{R(!1);const h=y[i][p];if(h?.components?.[0]?.blockType===H.Links)h?.components?.[0]?.url&&window.open(h?.components?.[0]?.url,h?.components?.[0]?.target??"_blank");else{const F=y?.flat()||[],P=F?.findIndex(U=>U?.id===y[i][p]?.id);t.stopPropagation(),s?.(),n?.(F[P],P),M(h),S(U=>U.map(De=>De.map(ee=>ee.groupIndex===i&&ee.index===p?{...ee,open:!ee.open}:{...ee,open:!1})))}},A=(t,i,p)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),K(t,i,p)):t.key==="Escape"&&d?.groupIndex===i&&d?.index===p&&(t.preventDefault(),O())},O=()=>{S(t=>t.map(i=>i.map(p=>({...p,open:!1}))))},L=D(()=>{if(v)return v?.components?.[0]?.blockType},[v]),V=fe(We,v),b=he(je,v),j=ve($e,v),k=be(Ke,{categoriesItem:v,currentNavItemRef:I.current?.[d?.groupIndex||0]?.[d?.index||0]}),X=D(()=>{switch(L){case H.Sidebar:return e(V,{});case H.Resource:return e(b,{});case H.Supports:return e(k,{});case H.Multicol:return e(j,{});default:return null}},[L,v]),Z=D(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),_=D(()=>Z?.find(t=>t?.blockType===x.Profile),[Z]),g=ne(()=>{R(t=>!t)},[]);return G(()=>{if(z?.current){const t=z.current;return t.addEventListener("click",g),()=>{t.removeEventListener("click",g)}}},[g]),le(()=>{d?.open&&re.fromTo(Q?.current,{height:0},{height:"auto"})},[d?.open]),o(pe,{className:T("relative h-[92px]",f),children:[o("div",{ref:q,onClick:O,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Me,{}),e(de,{ref:z,actions:Z,activeStatus:B})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:y?.map((t,i)=>e("div",{className:"flex gap-3",children:t?.map((p,h)=>{const F=d?.groupIndex===i&&d?.index===h;return e("div",{ref:P=>{I.current[i][h]=P},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:P=>K(P,i,h),onKeyDown:P=>A(P,i,h),"aria-expanded":F,"aria-haspopup":"true","aria-label":p.text,children:[e(w,{html:p.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:T("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":d?.groupIndex===i&&d?.index===h,"opacity-100":m&&d?.groupIndex===i&&d?.index===h,invisible:!p?.components?.length||p?.components?.[0]?.blockType===H.Links})})]}),e("div",{className:T("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":F},C==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},p.id)})},`groupCategory-${i}`))})]}),o("div",{role:"menu","aria-hidden":!(d?.open&&v),className:T("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(d?.open&&v)}),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:Q,className:T("relative z-50",{"overflow-hidden":L!==H.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:O,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),O())}})]}),B&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:N?.email?o(Pe,{children:[e(w,{html:N?.nick_name||_?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:_?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:ie(t?.url,$)},t.id))})]}):o(Pe,{children:[e(Ae,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(w,{html:_?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:_?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(w,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(oe,{className:"grow",variant:"secondary",size:"lg",onClick:()=>c?.join?.(),children:e(w,{html:_?.primaryButton||"Join Now",className:"font-bold"})}),e(oe,{className:"grow",variant:"primary",size:"lg",onClick:()=>c?.login?.(),children:e(w,{html:_?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),R(!1))}})]})]})}),Ce=ae(({data:a,menuData:l,className:r,onPrimaryNavClick:s,onMobileMenuToggle:f},C)=>{const n=D(()=>ge(a?.categories?.filter(b=>b?.mobileShow)),[a]),{currentMenu:c,setCurrentMenu:N,subSubCategory:m}=te(),[u,$]=E(!1),[y,v]=E(0),[M,Y]=E(null),S=J(null),z=J(!1);G(()=>{if(S?.current&&u){const b=S?.current?.getBoundingClientRect();v(window?.innerHeight-(b?.top||0))}f?.({open:u})},[u,f]),G(()=>{if(!u)return;const b=ke(()=>{if(S?.current){const j=S.current.getBoundingClientRect();z.current=!0,v(window?.innerHeight-(j?.top||0))}},100);return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[u]),le(()=>{if(z.current){re.set(S.current,{height:y}),z.current=!1;return}re.fromTo(S.current,{height:0},{height:y,duration:.3})},[y]),se(u);const B=D(()=>M?.components?.[0]?.blockType,[M]),R=be(Ue,{categoriesItem:M}),q=fe(Fe,M),Q=he(_e,M),I=ve(Ge,M),d=D(()=>{switch(B){case H.Sidebar:return e(q,{});case H.Resource:return e(Q,{});case H.Supports:return e(R,{});case H.Multicol:return e(I,{});default:return null}},[B,M,R]),K=ne(()=>{$(!1),v(0),N&&N(W.Primary)},[$,v,N]),A=D(()=>a?.bar?.actions?.filter(b=>b?.mobileShow&&b?.blockType!==x.Profile),[a]),O=D(()=>a?.bar?.actions?.find(b=>b?.mobileShow&&b?.blockType===x.Profile)||{},[a]),L=D(()=>{switch(c){case W.Primary:return e(qe,{actions:A,menuOpen:u,onMenuOpenClose:()=>{$(!1),v(0)},onMenuOpenClick:()=>$(!0)});case W.Secondary:return e(Se,{title:M?.text,onMenuOpenClose:K,onMenuBackClick:()=>N?.(W.Primary)});case W.Third:return e(Se,{title:m?.label,onMenuOpenClose:K,onMenuBackClick:()=>N?.(W.Secondary)});default:return null}},[u,c,N,M,A,m,K]),V=ne((b,j)=>{const k=Array.isArray(n)?Array.isArray(n[b])?n[b][j]:{}:{};Y(k),k?.components?.[0]?.blockType===H.Links?k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank"):N?.(W.Secondary)},[n,N]);return o(pe,{className:T("relative h-[56px]",r),children:[L,u&&o("nav",{ref:S,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:y},role:"navigation","aria-label":"Mobile navigation menu",children:[c===W.Primary&&l?e("div",{className:"pt-4",children:e(Te,{data:l})}):null,c===W.Primary?e(Je,{categories:n,onPrimaryMenuClick:V,onPrimaryNavClick:s,profileAction:O}):d]})]})}),Je=({categories:a,onPrimaryMenuClick:l,profileAction:r,onPrimaryNavClick:s})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((f,C)=>o("div",{className:"",children:[e("div",{className:T("my-2 h-px w-full bg-[#E5E5E7]")}),f?.map((n,c)=>e(ce,{label:n.text,onClick:()=>{const m=(a?.flat()||[])?.findIndex(u=>u?.id===a[C][c]?.id);l(C,c),s?.(n,m)},icon:n.components?.[0]?.icon},n.id))]},`groupCategory-${C}`))}),e(Ye,{profileAction:r})]}),Ye=({profileAction:a})=>{const[l,r]=E(!1),{profile:s,event:f}=te(),{locale:C="us"}=ue();return o("div",{className:T("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":l}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!l),"aria-expanded":l,"aria-label":s?.nick_name||a?.welcome,children:[o("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(Re,{"aria-hidden":"true"})}),e(w,{html:s?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&e(Ne,{"aria-hidden":"true",className:T("laptop:size-4 size-5",{"rotate-180":l})})]}),s?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(n=>e(ce,{label:n?.title,href:ie(n?.url,C)},n.id))}),l&&!s?.email&&o("div",{className:"mt-4",children:[e(w,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(n=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:n.benefitIcon?.url,className:"size-4",alt:n.benefit,width:16,height:16}),e(w,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))})]}),!s?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(oe,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(w,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(oe,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(w,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:l,onMenuOpenClick:r,actions:s})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Me,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:s}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),Me=()=>{const{payloadData:a,isMobile:l}=te(),{locale:r="us"}=ue();return e("a",{href:ie("/",r),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:l?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ae(({actions:a,activeStatus:l=!1},r)=>{const{event:s,cartCount:f}=te(),[C,n]=E(null),c=m=>{switch(m){case x.Search:return"Search";case x.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case x.Profile:return"User profile";case x.Livestream:return"Livestream";default:return"Action"}},N=ne((m,u)=>{switch(n(u),m?.blockType){case x.Search:s?.search?.();break;case x.Cart:s?.cart?.();break;case x.Profile:s?.profile?.();break;case x.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((m,u)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":m?.tag||"",ref:m.blockType===x.Profile?r:null,onClick:()=>N(m,u),"aria-label":c(m.blockType),"aria-pressed":l&&C===u,children:[e(w,{html:m.icon,className:T("size-5",{"text-brand-0":l&&C===u}),"aria-hidden":"true"}),m.blockType===x.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(w,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},m.id))})}),Se=({title:a,onMenuOpenClose:l,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(Ie,{className:"size-5","aria-hidden":"true"})}),e(w,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});Ce.displayName="MobileNavigation",de.displayName="Actions",we.displayName="HeaderNavigation",xe.displayName="DesktopNavigation";var kt=He(we);export{kt as default};
1
+ "use client";import{Fragment as Pe,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ae,useCallback as ne,useEffect as G,useImperativeHandle as Ee,useMemo as P,useRef as J,useState as D}from"react";import{Picture as me,Text as w,Button as oe,Container as pe,BrandStrip as Te}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as E,getLocalizedPath as ie}from"../../helpers/utils.js";import Le,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as T,HeaderNavigationActionBlockType as C}from"./types.js";import ze from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as Be,Close as ye,User as Re,LeftArrow as Ie,DownArrow as Ne,Polygon as Ae}from"./icons/index.js";import Oe from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as _e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as $e}from"./MulticolDropdown.js";import{SupportsDropdown as Ke}from"./SupportsDropdown.js";import{MobileSidebarMenu as Fe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ue}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ge}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import ke from"../../shared/throttle.js";const we=ae((a,s)=>{const{data:{header:r}={},buildProps:c,event:f,profile:H,theme:n="light",isTop:i=!1,searchResult:v,onSearch:p,isSearching:u,keywords:z,onPrimaryNavClick:N,onSeriesProductClick:g,onSidebarNavClick:x,onMobileMenuToggle:Y,headerId:M,cartCount:B,menuData:R,render:I,componentOverrides:q,...Q}=a,[A,d]=D(!1),[K,O]=D(!1),[j,L]=D(!1),[V,b]=D(!1),_=J(null),k=J(null),X=()=>{const h=document?.querySelector("body")?.offsetWidth||0;b(h<=1440)};G(()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)}),[]),Ee(s,()=>k.current),G(()=>{k.current&&i&&ze(k.current,{duration:0,offset:k.current?.getBoundingClientRect()?.bottom||0})},[i]),G(()=>{if(i){O(!1),L(!1);return}let h=0,t=0,l=0;const m=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,y=m();h=y,O(y>300),L(y>30);const F=ke(()=>{const S=m(),U=S-h;L(S>30),U>0?(t=0,l+=U,l>=300&&S>300&&O(!0)):U<0&&(l=0,t+=Math.abs(U),t>=300&&(O(!1),t=0)),h=S},100);return window.addEventListener("scroll",F,{passive:!0}),()=>window.removeEventListener("scroll",F)},[i]),G(()=>{f&&(f.search=()=>d(!0))},[f]),le(()=>{_?.current&&A&&re.fromTo(_.current,{height:0},{height:"auto",duration:.3})},[A]),se(A);const Z=P(()=>r?.bar?.actions?.find(h=>h?.blockType===C.Search)?.searchBar?.[0]||{},[r]),W=I?.mobileHeaderNavigation;return e(Le,{buildProps:c,profile:H,isMobile:V,event:f,payloadData:r,onSidebarNavClick:x,onSeriesProductClick:g,cartCount:B,componentOverrides:q,children:e("header",{...Q,id:M||"header","data-ui-component-id":"HeaderNavigation",className:i?"relative z-[100] bg-white":E("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":K}),ref:k,children:o("div",{className:E("hover:bg-white hover:text-black",n==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!i&&j},{"hover:!text-black":n==="dark","!text-black":!i&&j}),onClick:()=>!i&&L(!0),children:[e(Ce,{data:r,className:"desktop:block hidden !bg-white",theme:n,onNavItemClick:()=>!i&&L(!0),onPrimaryNavClick:N}),W?e(W,{className:"desktop:hidden block !bg-white",menuData:R,data:r,onPrimaryNavClick:N}):e(xe,{menuData:R,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:N,onMobileMenuToggle:Y}),A&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${k?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:_,className:E("overflow-y-auto",{}),children:e(Oe,{data:Z,keywords:z,isSearching:u,searchResult:v,onSearch:h=>{p?.(h)},onClose:()=>{p?.(),d(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:h=>{(h.key==="Enter"||h.key===" "||h.key==="Escape")&&(h.preventDefault(),d(!1))}})]})]})})})}),Ce=ae((a,s)=>{const{data:r,onNavItemClick:c,className:f,theme:H,onPrimaryNavClick:n}=a,{event:i,profile:v}=te(),[p,u]=D(!1),{locale:z="us"}=ue(),N=P(()=>ge(r?.categories?.filter(t=>t?.pcShow)),[r]),[g,x]=D(null),[Y,M]=D([]),B=J(null),[R,I]=D(!1),q=J(null),Q=J(null),A=J(N.map(t=>Array(t?.length||0).fill(null)));G(()=>{N?.length&&M(N?.map((t,l)=>t?.map((m,y)=>({groupIndex:l,index:y,open:!1}))))},[N]);const d=P(()=>{let t=null;for(const l of Y){for(const m of l)if(m.open){t=m;break}if(t)break}return t},[Y]);se(!!d?.open||R);const K=(t,l,m)=>{I(!1);const y=N[l][m];if(y?.components?.[0]?.blockType===T.Links)y?.components?.[0]?.url&&window.open(y?.components?.[0]?.url,y?.components?.[0]?.target??"_blank");else{const F=N?.flat()||[],S=F?.findIndex(U=>U?.id===N[l][m]?.id);t.stopPropagation(),c?.(),n?.(F[S],S),x(y),M(U=>U.map(De=>De.map(ee=>ee.groupIndex===l&&ee.index===m?{...ee,open:!ee.open}:{...ee,open:!1})))}},O=(t,l,m)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),K(t,l,m)):t.key==="Escape"&&d?.groupIndex===l&&d?.index===m&&(t.preventDefault(),j())},j=()=>{M(t=>t.map(l=>l.map(m=>({...m,open:!1}))))},L=P(()=>{if(g)return g?.components?.[0]?.blockType},[g]),V=fe(We,g),b=he(je,g),_=ve($e,g),k=be(Ke,{categoriesItem:g,currentNavItemRef:A.current?.[d?.groupIndex||0]?.[d?.index||0]}),X=P(()=>{switch(L){case T.Sidebar:return e(V,{});case T.Resource:return e(b,{});case T.Supports:return e(k,{});case T.Multicol:return e(_,{});default:return null}},[L,g]),Z=P(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),W=P(()=>Z?.find(t=>t?.blockType===C.Profile),[Z]),h=ne(()=>{I(t=>!t)},[]);return G(()=>{if(B?.current){const t=B.current;return t.addEventListener("click",h),()=>{t.removeEventListener("click",h)}}},[h]),le(()=>{d?.open&&re.fromTo(Q?.current,{height:0},{height:"auto"})},[d?.open]),o(pe,{className:E("relative h-[92px]",f),children:[o("div",{ref:q,onClick:j,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Me,{}),e(de,{ref:B,actions:Z,activeStatus:R})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:N?.map((t,l)=>e("div",{className:"flex gap-3",children:t?.map((m,y)=>{const F=d?.groupIndex===l&&d?.index===y;return e("div",{ref:S=>{A.current[l][y]=S},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:S=>K(S,l,y),onKeyDown:S=>O(S,l,y),"aria-expanded":F,"aria-haspopup":"true","aria-label":m.text,children:[e(w,{html:m.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:E("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":d?.groupIndex===l&&d?.index===y,"opacity-100":p&&d?.groupIndex===l&&d?.index===y,invisible:!m?.components?.length||m?.components?.[0]?.blockType===T.Links})})]}),e("div",{className:E("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":F},H==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},m.id)})},`groupCategory-${l}`))})]}),o("div",{role:"menu","aria-hidden":!(d?.open&&g),className:E("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(d?.open&&g)}),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:Q,className:E("relative z-50",{"overflow-hidden":L!==T.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),j())}})]}),R&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${B?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:v?.email?o(Pe,{children:[e(w,{html:v?.nick_name||W?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:W?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:ie(t?.url,z)},t.id))})]}):o(Pe,{children:[e(Ae,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(w,{html:W?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:W?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(w,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(oe,{className:"grow",variant:"secondary",size:"lg",onClick:()=>i?.join?.(),children:e(w,{html:W?.primaryButton||"Join Now",className:"font-bold"})}),e(oe,{className:"grow",variant:"primary",size:"lg",onClick:()=>i?.login?.(),children:e(w,{html:W?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),I(!1))}})]})]})}),xe=ae(({data:a,menuData:s,className:r,onPrimaryNavClick:c,onMobileMenuToggle:f},H)=>{const n=P(()=>ge(a?.categories?.filter(b=>b?.mobileShow)),[a]),{currentMenu:i,setCurrentMenu:v,subSubCategory:p}=te(),[u,z]=D(!1),[N,g]=D(0),[x,Y]=D(null),M=J(null),B=J(!1);G(()=>{if(M?.current&&u){const b=M?.current?.getBoundingClientRect();g(window?.innerHeight-(b?.top||0))}f?.({open:u})},[u,f]),G(()=>{if(!u)return;const b=ke(()=>{if(M?.current){const _=M.current.getBoundingClientRect();B.current=!0,g(window?.innerHeight-(_?.top||0))}},100);return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[u]),le(()=>{if(B.current){re.set(M.current,{height:N}),B.current=!1;return}re.fromTo(M.current,{height:0},{height:N,duration:.3})},[N]),se(u);const R=P(()=>x?.components?.[0]?.blockType,[x]),I=be(Ue,{categoriesItem:x}),q=fe(Fe,x),Q=he(_e,x),A=ve(Ge,x),d=P(()=>{switch(R){case T.Sidebar:return e(q,{});case T.Resource:return e(Q,{});case T.Supports:return e(I,{});case T.Multicol:return e(A,{});default:return null}},[R,x,I]),K=ne(()=>{z(!1),g(0),v&&v($.Primary)},[z,g,v]),O=P(()=>a?.bar?.actions?.filter(b=>b?.mobileShow&&b?.blockType!==C.Profile),[a]),j=P(()=>a?.bar?.actions?.find(b=>b?.mobileShow&&b?.blockType===C.Profile)||{},[a]),L=P(()=>{switch(i){case $.Primary:return e(qe,{actions:O,menuOpen:u,onMenuOpenClose:()=>{z(!1),g(0)},onMenuOpenClick:()=>z(!0)});case $.Secondary:return e(Se,{title:x?.text,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Primary)});case $.Third:return e(Se,{title:p?.label,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Secondary)});default:return null}},[u,i,v,x,O,p,K]),V=ne((b,_)=>{const k=Array.isArray(n)?Array.isArray(n[b])?n[b][_]:{}:{};Y(k),k?.components?.[0]?.blockType===T.Links?k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank"):v?.($.Secondary)},[n,v]);return o(pe,{className:E("relative h-[56px]",r),children:[L,u&&o("nav",{ref:M,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:N},role:"navigation","aria-label":"Mobile navigation menu",children:[i===$.Primary&&s?e("div",{className:"pt-4",children:e(Te,{data:s})}):null,i===$.Primary?e(Je,{categories:n,onPrimaryMenuClick:V,onPrimaryNavClick:c,profileAction:j,menuData:s}):d]})]})}),Je=({categories:a,onPrimaryMenuClick:s,profileAction:r,onPrimaryNavClick:c,menuData:f})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((H,n)=>o("div",{className:"",children:[n>0||f?e("div",{className:E("my-2 h-px w-full bg-[#E5E5E7]")}):null,H?.map((i,v)=>e(ce,{label:i.text,onClick:()=>{const u=(a?.flat()||[])?.findIndex(z=>z?.id===a[n][v]?.id);s(n,v),c?.(i,u)},icon:i.components?.[0]?.icon},i.id))]},`groupCategory-${n}`))}),e(Ye,{profileAction:r})]}),Ye=({profileAction:a})=>{const[s,r]=D(!1),{profile:c,event:f}=te(),{locale:H="us"}=ue();return o("div",{className:E("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":s}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!s),"aria-expanded":s,"aria-label":c?.nick_name||a?.welcome,children:[o("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(Re,{"aria-hidden":"true"})}),e(w,{html:c?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(Ne,{"aria-hidden":"true",className:E("laptop:size-4 size-5",{"rotate-180":s})})]}),c?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(n=>e(ce,{label:n?.title,href:ie(n?.url,H)},n.id))}),s&&!c?.email&&o("div",{className:"mt-4",children:[e(w,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(n=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:n.benefitIcon?.url,className:"size-4",alt:n.benefit,width:16,height:16}),e(w,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))})]}),!c?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(oe,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(w,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(oe,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(w,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:s,onMenuOpenClick:r,actions:c})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Me,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:c}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),Me=()=>{const{payloadData:a,isMobile:s}=te(),{locale:r="us"}=ue();return e("a",{href:ie("/",r),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:s?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ae(({actions:a,activeStatus:s=!1},r)=>{const{event:c,cartCount:f}=te(),[H,n]=D(null),i=p=>{switch(p){case C.Search:return"Search";case C.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case C.Profile:return"User profile";case C.Livestream:return"Livestream";default:return"Action"}},v=ne((p,u)=>{switch(n(u),p?.blockType){case C.Search:c?.search?.();break;case C.Cart:c?.cart?.();break;case C.Profile:c?.profile?.();break;case C.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((p,u)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":p?.tag||"",ref:p.blockType===C.Profile?r:null,onClick:()=>v(p,u),"aria-label":i(p.blockType),"aria-pressed":s&&H===u,children:[e(w,{html:p.icon,className:E("size-5",{"text-brand-0":s&&H===u}),"aria-hidden":"true"}),p.blockType===C.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(w,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},p.id))})}),Se=({title:a,onMenuOpenClose:s,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(Ie,{className:"size-5","aria-hidden":"true"})}),e(w,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});xe.displayName="MobileNavigation",de.displayName="Actions",we.displayName="HeaderNavigation",Ce.displayName="DesktopNavigation";var kt=He(we);export{kt as default};
@@ -1 +1 @@
1
- import{Fragment as we,jsx as t,jsxs as h}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as L,useMemo as Y,useState as P,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as k}from"../../../../../helpers/index.js";import{GalleryTabType as A}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:o,variant:d,selectedOptions:C}=q(),m=pe({product:o,variant:d}),[f,w]=P(null),I=V(null),b=d?.metafields?.component?.custom_media_list;let s,x,S,G;b&&b?.available?(s=b?.product||[],x=b?.scenarios||[],S=b?.keyFeatures||[],G=b?.video||[]):(s=m?.productList,x=m?.sceneList,S=m?.keyFeaturesList,G=m?.videoList);const c=Y(()=>[...s,...x,...G],[s,x,G]),p={productList:s,sceneList:x,keyFeaturesList:S,videoList:G},a=Y(()=>{const i=o?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],n=d?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const E=Array.isArray(n)?n?.find(F=>g?.galleries===F?.galleries):{};let D=p[g?.galleries]||[];if(E?.images&&Array.isArray(E.images)&&E.images.length>0){const F=E.images.map(u=>{const _=[];if(u.image_1920&&u.image_1920.trim()&&_.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&_.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&_.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&_.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&_.push(`${u.image_390} 767`),_.length>0){const U=_.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[d?.payload,p,o?.payload]),[y,l]=P(a?.[0]),[r,N]=P(0),[v,T]=P(null),M=L(()=>{const i=(r+1)%a.length;N(i),l(a[i]),T(0)},[r,a]),z=L(()=>{const i=r===0?a.length-1:r-1;N(i),l(a[i]);const n=a[i]?.galleries||[];T(n.length-1)},[r,a]);R(()=>{r!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(r)})},[r]),R(()=>{l(a[0]),N(0)},[d?.id]);const H=(i,n)=>{switch(i?.galleryTabType){case A.GALLERY_IMAGE_MAIN:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_SCENE:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:h(de,{className:"relative",value:y?.tabValue,defaultValue:a?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((i,n)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,n)},i.tabValue))}),t(ie,{ref:I,galleryTabs:a,activeGalleryTab:y,setActiveGalleryTab:l,setActiveTabIndex:N,setTargetSlideIndex:T})]})})},ie=Q((e,o)=>{const{galleryTabs:d,activeGalleryTab:C,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:w}=e,{product:I}=q(),b=V(null),s=V(new Map),x=L(c=>{if(b.current){const p=b.current,a=c.currentTarget,y=a.offsetLeft-p.offsetWidth/2+a.offsetWidth/2;p.scrollTo({left:y,behavior:"smooth"})}},[]),S=L((c,p,a)=>{m(p),f(a),w(0),x(c)},[m,f,w,x]),G=L(c=>{if(b.current&&d[c]){const p=b.current,a=d[c],y=s.current.get(a.tabValue);if(y){const l=y.offsetLeft-p.offsetWidth/2+y.offsetWidth/2;p.scrollTo({left:l,behavior:"smooth"})}}},[d]);return re(o,()=>({scrollToTab:G})),h("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:b,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:d?.map((c,p)=>t(ue,{ref:a=>{a?s.current.set(c.tabValue,a):s.current.delete(c.tabValue)},className:k("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",c.tabValue===C?.tabValue&&"bg-white"),onClick:a=>S(a,c,p),value:c.tabValue,children:c.tabLabel},c.tabValue+p))})}),t("div",{className:"desktop:gap-2 desktop:flex hidden",children:I.metafields?.global?.specifications&&h(we,{children:[t(me,{})," | ",t(be,{})]})})]})});ie.displayName="ProductGalleryTab";const j=Q((e,o)=>{const{locale:d="us",copyWriting:C}=Z(),{variant:m,totalSavings:f}=q(),w=V(null),[I,b]=P(null),[s,x]=P(null),[S,G]=P([]),c=V(null),p=Y(()=>{if(e?.galleryTabType===A.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===A.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,A.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),a=L(()=>{s?.isBeginning?e.onPrevTab?.():s?.slidePrev()},[s,e]),y=L(()=>{s?.isEnd?e.onNextTab?.():s?.slideNext()},[s,e]);return R(()=>{s&&e.targetSlideIndex&&(s.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[s,e.targetSlideIndex,e]),R(()=>{const l=()=>{if(!e?.comment?.content||!c.current)return;const v=c.current;v.textContent="Test";const M=v.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let n="";for(let g=0;g<H.length;g++){const E=H[g],D=n?`${n} ${E}`:E;v.textContent=D,v.offsetHeight>M?n?(i.push(n),n=E):(i.push(E),n=""):n=D}n&&i.push(n),v.textContent="",G(i)},r=requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}),N=()=>{l()};return window.addEventListener("resize",te(N,500)),()=>{cancelAnimationFrame(r),window.removeEventListener("resize",te(N,500))}},[e?.comment?.content]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:o,className:"h-full",onSwiper:x,onTouchEnd:(l,r)=>{l.isBeginning&&l.swipeDirection==="prev"?a():l.isEnd&&l.swipeDirection==="next"&&y()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((l,r)=>{const N=`${e.tabValue}-${r}`,v=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:r+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=l?._responsiveSource||l?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:v,exposureKey:N,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:T,alt:l?.image?.altText,className:k("h-full",p),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+r)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:d})} ${C?.off}`}),t("div",{className:k("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:t(ae,{className:k("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:k("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:y,children:t(le,{className:k("tablet:size-10 lg-desktop:size-12")})}),h("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((l,r)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:l.image?.url,alt:l.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+r))})}),!e?.index&&h("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),h("div",{className:"relative max-w-[528px]",children:[t("div",{ref:c,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:S.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:S.length>0?S.map((l,r)=>t(B,{children:t(J,{html:l,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},r+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const o=V(null);return R(()=>{const d=o.current;d&&(d.muted=!0,d.play().catch(()=>{}))},[]),h("video",{ref:o,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[o,d]=P(null),C=L(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),m=L(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:d,onTouchEnd:(f,w)=>{f.isBeginning&&f.swipeDirection==="prev"?C():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,w)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+w))}),t("div",{className:k("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:C,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:k("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Be=e=>t("div",{children:"3D View"});var He=fe(he);export{He as default};
1
+ import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as N,useMemo as Y,useState as E,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as L}from"../../../../../helpers/index.js";import{GalleryTabType as _}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>x("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>x("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:r,variant:c,selectedOptions:P}=q(),m=pe({product:r,variant:c}),[f,S]=E(null),A=V(null),T=c?.metafields?.component?.custom_media_list;let o,v,y,h;T&&T?.available?(o=T?.product||[],v=T?.scenarios||[],y=T?.keyFeatures||[],h=T?.video||[]):(o=m?.productList,v=m?.sceneList,y=m?.keyFeaturesList,h=m?.videoList);const k=Y(()=>[...o,...v,...h],[o,v,h]),I={productList:o,sceneList:v,keyFeaturesList:y,videoList:h},d=Y(()=>{const i=r?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],s=c?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const G=Array.isArray(s)?s?.find(F=>g?.galleries===F?.galleries):{};let D=I[g?.galleries]||[];if(G?.images&&Array.isArray(G.images)&&G.images.length>0){const F=G.images.map(u=>{const C=[];if(u.image_1920&&u.image_1920.trim()&&C.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&C.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&C.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&C.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&C.push(`${u.image_390} 767`),C.length>0){const U=C.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[c?.payload,I,r?.payload]),[n,a]=E(d?.[0]),[l,p]=E(0),[b,w]=E(null),M=N(()=>{const i=(l+1)%d.length;p(i),a(d[i]),w(0)},[l,d]),z=N(()=>{const i=l===0?d.length-1:l-1;p(i),a(d[i]);const s=d[i]?.galleries||[];w(s.length-1)},[l,d]);R(()=>{l!=null&&requestAnimationFrame(()=>{A.current?.scrollToTab(l)})},[l]),R(()=>{a(d[0]),p(0)},[c?.id]);const H=(i,s)=>{switch(i?.galleryTabType){case _.GALLERY_IMAGE_MAIN:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_IMAGE_SCENE:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:x(de,{className:"relative",value:n?.tabValue,defaultValue:d?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:d.map((i,s)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,s)},i.tabValue))}),t(ie,{ref:A,galleryTabs:d,activeGalleryTab:n,setActiveGalleryTab:a,setActiveTabIndex:p,setTargetSlideIndex:w})]})})},ie=Q((e,r)=>{const{galleryTabs:c,activeGalleryTab:P,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:S}=e,{product:A,compareData:T}=q(),o=V(null),v=V(new Map),y=!!A.metafields?.global?.specifications?.length,h=!!T?.specificationKeys?.length,k=N(n=>{if(o.current){const a=o.current,l=n.currentTarget,p=l.offsetLeft-a.offsetWidth/2+l.offsetWidth/2;a.scrollTo({left:p,behavior:"smooth"})}},[]),I=N((n,a,l)=>{m(a),f(l),S(0),k(n)},[m,f,S,k]),d=N(n=>{if(o.current&&c[n]){const a=o.current,l=c[n],p=v.current.get(l.tabValue);if(p){const b=p.offsetLeft-a.offsetWidth/2+p.offsetWidth/2;a.scrollTo({left:b,behavior:"smooth"})}}},[c]);return re(r,()=>({scrollToTab:d})),x("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:o,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:c?.map((n,a)=>t(ue,{ref:l=>{l?v.current.set(n.tabValue,l):v.current.delete(n.tabValue)},className:L("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===P?.tabValue&&"bg-white"),onClick:l=>I(l,n,a),value:n.tabValue,children:n.tabLabel},n.tabValue+a))})}),(y||h)&&x("div",{className:"desktop:gap-2 desktop:flex hidden",children:[y&&t(me,{}),y&&h&&t("span",{children:"|"}),h&&t(be,{})]})]})});ie.displayName="ProductGalleryTab";const j=Q((e,r)=>{const{locale:c="us",copyWriting:P}=Z(),{variant:m,totalSavings:f}=q(),S=V(null),[A,T]=E(null),[o,v]=E(null),[y,h]=E([]),k=V(null),I=Y(()=>{if(e?.galleryTabType===_.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===_.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,_.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),d=N(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),n=N(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),R(()=>{const a=()=>{if(!e?.comment?.content||!k.current)return;const b=k.current;b.textContent="Test";const M=b.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let s="";for(let g=0;g<H.length;g++){const G=H[g],D=s?`${s} ${G}`:G;b.textContent=D,b.offsetHeight>M?s?(i.push(s),s=G):(i.push(G),s=""):s=D}s&&i.push(s),b.textContent="",h(i)},l=requestAnimationFrame(()=>{requestAnimationFrame(()=>{a()})}),p=()=>{a()};return window.addEventListener("resize",te(p,500)),()=>{cancelAnimationFrame(l),window.removeEventListener("resize",te(p,500))}},[e?.comment?.content]),x("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:r,className:"h-full",onSwiper:v,onTouchEnd:(a,l)=>{a.isBeginning&&a.swipeDirection==="prev"?d():a.isEnd&&a.swipeDirection==="next"&&n()},pagination:{clickable:!0,el:S.current},thumbs:{swiper:A},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((a,l)=>{const p=`${e.tabValue}-${l}`,b=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:l+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},w=a?._responsiveSource||a?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:b,exposureKey:p,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:w,alt:a?.image?.altText,className:L("h-full",I),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+l)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:c})} ${P?.off}`}),t("div",{className:L("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:d,children:t(ae,{className:L("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:L("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:n,children:t(le,{className:L("tablet:size-10 lg-desktop:size-12")})}),x("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:T,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((a,l)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:a.image?.url,alt:a.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+l))})}),!e?.index&&x("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),x("div",{className:"relative max-w-[528px]",children:[t("div",{ref:k,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:y.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:y.length>0?y.map((a,l)=>t(B,{children:t(J,{html:a,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},l+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:S,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const r=V(null);return R(()=>{const c=r.current;c&&(c.muted=!0,c.play().catch(()=>{}))},[]),x("video",{ref:r,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[r,c]=E(null),P=N(()=>{r?.isBeginning?e.onPrevTab?.():r?.slidePrev()},[r,e]),m=N(()=>{r?.isEnd?e.onNextTab?.():r?.slideNext()},[r,e]);return R(()=>{r&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(r.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[r,e.targetSlideIndex,e]),x("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:c,onTouchEnd:(f,S)=>{f.isBeginning&&f.swipeDirection==="prev"?P():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,S)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+S))}),t("div",{className:L("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:P,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:L("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Fe=e=>t("div",{children:"3D View"});var Be=fe(he);export{Be as default};
@@ -1 +1 @@
1
- import{jsx as a,jsxs as t}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:l,BoxBottomSummary:d})=>t("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[t(c,{className:"laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[a(p,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),a(p,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:l})]}),d]});var s=e;export{s as default};
1
+ import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:d,BoxBottomSummary:l})=>a("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(c,{className:"ipc-box-grid laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[t(p,{className:"ipc-box-left-grid-item laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),t(p,{className:"ipc-box-right-grid-item laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:d})]}),l]});var m=e;export{m as default};
@@ -1,7 +1,13 @@
1
1
  import { type ReactNode } from 'react';
2
+ export interface ComparePriceRenderData {
3
+ /** 划线价金额 */
4
+ comparePrice: number;
5
+ }
2
6
  export interface ProductActionsProps {
3
7
  /** 自定义总节省组件,传入时会替代默认的 totalSavings 显示 */
4
8
  totalSavingsSlot?: ReactNode;
9
+ /** 自定义划线价渲染,传入时替换默认的划线价显示 */
10
+ renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
5
11
  }
6
- declare const ProductActions: ({ totalSavingsSlot }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
12
+ declare const ProductActions: ({ totalSavingsSlot, renderComparePrice }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
7
13
  export default ProductActions;
@@ -1 +1 @@
1
- import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as L}from"../../../../../components/index.js";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{useBizProductContext as R}from"../../../BizProductProvider.js";import{useMemo as C}from"react";import{formatPrice as d}from"../../../utils/index.js";import{replaceTemplate as y}from"../../../utils/textFormat.js";import{useBenefits as O}from"../../../hooks/useBenefits.js";import _ from"../../CartActionButtons/index.js";const j=({totalSavingsSlot:v}={})=>{const{copyWriting:e,locale:a="us",trackingData:N,currencyCode:l}=E(),{variant:t,finalPrice:h,totalSavings:r,isLogin:m,comparePrice:w,onAddToCart:S,onBuyNow:T,savingDetail:s,addToCartLoading:k,buyNowLoading:A,notifyMeMode:M,onNotifyMeClick:P,discount:q,memberFunctionResult:p}=R(),D=O({variant:t}),{commonCoupon:i,memberDiscount:c}=D,B=N?.showComparePrice??!0,F=C(()=>y(e?.totalSavings||"",{amount:d({amount:r,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),[e?.totalSavings,r,t.price.currencyCode,a]),x=C(()=>{if(!e?.unlockedSaving)return;const b=i?.enable?Number(i?.config?.fixed_value||0):0,f=c?.enable?c.config?.amount??0:0,g=Math.round((p?.withoutCouponMaxMemberTotalSave?Math.max(f,b):f+b)*100)/100;if(!(g<=0))return y(e.unlockedSaving,{amount:d({amount:g,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})})},[e?.unlockedSaving,i?.enable,i?.config?.fixed_value,c?.enable,c?.config?.amount,p,t.price.currencyCode,a]);return u(L,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?u("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[u("div",{className:"flex items-center gap-1",children:[o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:d({amount:parseFloat(h.toFixed(2)),currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),B&&(r>0||s?.member>0&&m)&&o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:d({amount:w,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),s?.member>0&&m&&o(n,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),v||(r>0||s?.member>0&&m?o(n,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${F}`}):x?o(n,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:x}):null)]}):o(n,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),o("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:o(_,{mode:M,availableForSale:t.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:k,buyNowLoading:A,onAddToCart:S,onBuyNow:T,onNotifyMeClick:P,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var K=j;export{K as default};
1
+ import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as L}from"../../../../../components/index.js";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{useBizProductContext as O}from"../../../BizProductProvider.js";import{useMemo as v}from"react";import{formatPrice as d}from"../../../utils/index.js";import{replaceTemplate as N}from"../../../utils/textFormat.js";import{useBenefits as _}from"../../../hooks/useBenefits.js";import j from"../../CartActionButtons/index.js";const q=({totalSavingsSlot:h,renderComparePrice:p}={})=>{const{copyWriting:e,locale:a="us",trackingData:w,currencyCode:r}=E(),{variant:t,finalPrice:S,totalSavings:l,isLogin:m,comparePrice:x,onAddToCart:P,onBuyNow:T,savingDetail:s,addToCartLoading:k,buyNowLoading:A,notifyMeMode:M,onNotifyMeClick:D,discount:z,memberFunctionResult:b}=O(),B=_({variant:t}),{commonCoupon:i,memberDiscount:c}=B,F=w?.showComparePrice??!0,R=v(()=>N(e?.totalSavings||"",{amount:d({amount:l,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),[e?.totalSavings,l,t.price.currencyCode,a]),f=v(()=>{if(!e?.unlockedSaving)return;const g=i?.enable?Number(i?.config?.fixed_value||0):0,C=c?.enable?c.config?.amount??0:0,y=Math.round((b?.withoutCouponMaxMemberTotalSave?Math.max(C,g):C+g)*100)/100;if(!(y<=0))return N(e.unlockedSaving,{amount:d({amount:y,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})})},[e?.unlockedSaving,i?.enable,i?.config?.fixed_value,c?.enable,c?.config?.amount,b,t.price.currencyCode,a]);return u(L,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?u("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[u("div",{className:"flex items-center gap-1",children:[o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:d({amount:parseFloat(S.toFixed(2)),currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),p?p({comparePrice:x}):F&&(l>0||s?.member>0&&m)&&o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:d({amount:x,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),s?.member>0&&m&&o(n,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),h||(l>0||s?.member>0&&m?o(n,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${R}`}):f?o(n,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:f}):null)]}):o(n,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),o("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:o(j,{mode:M,availableForSale:t.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:k,buyNowLoading:A,onAddToCart:P,onBuyNow:T,onNotifyMeClick:D,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var Q=q;export{Q as default};
@@ -1 +1 @@
1
- import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Heading as m,Container as i}from"../../../../components/index.js";import{ProductActions as n}from"../index.js";import{useBizProductContext as c}from"../../BizProductProvider.js";import{useComponentData as u}from"../../hooks/useComponentData.js";import l from"./ScrollSpyNav/index.js";import{withLayout as f}from"../../../../shared/Styles.js";const b=({onSpyNavItemClick:e,totalSavingsSlot:s,actionsSlot:p})=>{const{product:d,renderRating:r}=c(),o=u("PurchaseBar")??[];return a("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[t(i,{children:a("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[a("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[t(m,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:d?.title}),t("div",{className:"laptop-md:block mt-3 hidden",children:t(l,{tabs:o,className:"",renderRating:r,onSpyNavItemClick:e})})]}),t("div",{className:"laptop-md:block hidden shrink-0",children:p??t(n,{totalSavingsSlot:s})})]})}),a(i,{className:"laptop-md:hidden relative",children:[t("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),t(l,{tabs:o,renderRating:r,onSpyNavItemClick:e})]})]})};var y=f(b);export{y as default};
1
+ import{jsx as a,jsxs as t}from"react/jsx-runtime";import{Heading as n,Container as i}from"../../../../components/index.js";import{ProductActions as c}from"../index.js";import{useBizProductContext as u}from"../../BizProductProvider.js";import{useComponentData as f}from"../../hooks/useComponentData.js";import l from"./ScrollSpyNav/index.js";import{withLayout as b}from"../../../../shared/Styles.js";const v=({onSpyNavItemClick:e,totalSavingsSlot:p,actionsSlot:s,renderComparePrice:d})=>{const{product:m,renderRating:r}=u(),o=f("PurchaseBar")??[];return t("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[a(i,{children:t("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[t("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[a(n,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:m?.title}),a("div",{className:"laptop-md:block mt-3 hidden",children:a(l,{tabs:o,className:"",renderRating:r,onSpyNavItemClick:e})})]}),a("div",{className:"laptop-md:block hidden shrink-0",children:s??a(c,{totalSavingsSlot:p,renderComparePrice:d})})]})}),t(i,{className:"laptop-md:hidden relative",children:[a("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),a(l,{tabs:o,renderRating:r,onSpyNavItemClick:e})]})]})};var x=b(v);export{x as default};
@@ -1,10 +1,13 @@
1
1
  import type { ReactNode } from 'react';
2
+ import type { ComparePriceRenderData } from './ProductActions/index.js';
2
3
  export interface PurchaseBarProps {
3
4
  onSpyNavItemClick?: (tab: ScrollSpyNavItem) => void;
4
5
  /** 自定义总节省组件,传入时会替代默认的 totalSavings 显示 */
5
6
  totalSavingsSlot?: ReactNode;
6
7
  /** 自定义右侧 Actions 插槽,传入时替代默认的 ProductActions */
7
8
  actionsSlot?: ReactNode;
9
+ /** 自定义划线价渲染,传入时替换默认的划线价显示 */
10
+ renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
8
11
  }
9
12
  export interface ScrollSpyNavItem {
10
13
  label: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.3.70",
3
+ "version": "1.3.71",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",