npm - @anker-in/headless-ui - Versions diffs - 1.1.17-alpha.1766373865742 → 1.1.17-alpha.1766376946694 - Mend

@anker-in/headless-ui 1.1.17-alpha.1766373865742 → 1.1.17-alpha.1766376946694

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.

Files changed (9) hide show

package/dist/cjs/biz-components/MediaPlayerSticky/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var me=Object.create;var w=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,n)=>{for(var t in n)w(r,t,{get:n[t],enumerable:!0})},V=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of ye(n))!ge.call(r,a)&&a!==t&&w(r,a,{get:()=>n[a],enumerable:!(o=fe(n,a))||o.enumerable});return r};var d=(r,n,t)=>(t=r!=null?me(be(r)):{},V(n||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),we=r=>V(w({},"__esModule",{value:!0}),r);var ke={};ve(ke,{default:()=>he});module.exports=we(ke);var e=require("react/jsx-runtime"),l=d(require("react")),O=require("es-toolkit"),Q=require("react-intersection-observer"),b=require("../../helpers/utils.js"),W=require("../../shared/Styles.js"),A=d(require("../Slogan/index.js")),U=require("../VideoModal/YouTubePlayer.js"),k=require("../../components/grid.js"),_=require("../../components/container.js"),J=d(require("../BrandEquity/index.js")),K=d(require("../MemberEquity/index.js")),X=d(require("../Spacer/index.js")),h=d(require("gsap")),C=require("gsap/dist/ScrollTrigger"),E=require("@payloadcms/richtext-lexical/html"),Z=require("react-responsive"),D=d(require("../../helpers/ScrollLoadVideo.js"));typeof window<"u"&&h.default.registerPlugin(C.ScrollTrigger);const I=({defaultConverters:r})=>({...r,text:n=>{const{node:t}=n;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:r,spaceY:n,className:t})=>(0,e.jsx)(_.Container,{spaceY:n,className:(0,b.cn)("!bg-transparent",t),children:(0,e.jsx)(k.Grid,{children:(0,e.jsx)(k.GridItem,{span:12,children:r})})}),j=l.default.forwardRef(({children:r,id:n,components:t},o)=>{const a=(0,l.useRef)(null);return(0,e.jsxs)("div",{ref:a,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map((s,i)=>{switch(s.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(J.default,{data:s,style:s?.style})})},`${s.blockType}-${i}`);case"ipc-member-equity":return(0,e.jsx)("div",{className:"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(K.default,{data:s,className:"w-full",style:s?.style})})},`${s.blockType}-${i}`);case"ipc-spacer":return(0,e.jsx)(X.default,{data:s,style:s?.style,className:"!bg-transparent"},`${s.blockType}-${i}`);default:return null}})})]})});j.displayName="SubBox";const G=(0,l.forwardRef)(({className:r="",wrapperClassName:n="",id:t,data:{title:o,videoTitle:a,mobVideo:s,mobImg:i,img:g,isYouTube:ee,youtubePcId:H,youtubeMobileId:te,video:x,theme:z,shape:re,components:le}},xe)=>{const L=(0,l.useRef)(null),M=(0,l.useRef)(null),{ref:ne,inView:f}=(0,Q.useInView)(),[B,se]=(0,l.useState)(!1),[ae,oe]=(0,l.useState)(!1),ie=(0,l.useRef)(null),p=(0,l.useRef)(null),c=(0,l.useRef)(null),ce=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:I});typeof a=="string"||a&&(0,E.convertLexicalToHTML)({data:a,converters:I});const[ue,de]=(0,l.useState)(0),[u,pe]=(0,l.useState)(!1),N=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,l.useRef)(u);return(0,l.useEffect)(()=>{pe(N),q.current=N},[N]),(0,l.useEffect)(()=>{const m=(0,O.debounce)(()=>{if(M.current){const R=M.current.getBoundingClientRect(),y=q.current?window.screen.height:window.innerHeight,v=window.scrollY||window.pageYOffset,S=R.bottom+v,$=document.documentElement.scrollHeight-S;de($>y?y:$)}},2e3);return m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),m.cancel?.()}},[]),(0,l.useEffect)(()=>{f&&!B&&(L.current?.play(),se(!0))},[f,B]),(0,l.useEffect)(()=>{if(p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null),!f||!t)return;const m=u?window.screen.height:window.innerHeight,R=document.querySelector(`#${t}`),y=document.querySelector(`#${t} .media-content`),v=document.querySelector(`.${t} .sticky-cover`);if(!(!R||!y||!v))return c.current=C.ScrollTrigger.create({trigger:`#${t}`,start:"top top",end:`top+=${m*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:S=>{const T=S.progress;requestAnimationFrame(()=>{const Y=50+Math.min(1,T*2)*50;h.default.set(y,{top:`${Y}%`,transform:`translate(-50%, -${Y}%)`,force3D:!0});const F=Math.max(0,Math.min(1,(T-.5)*2))*8;h.default.set(v,{backdropFilter:`blur(${F}px)`,WebkitBackdropFilter:`blur(${F}px)`,force3D:!0})})}}),()=>{p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null)}},[f,t,u]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,b.cn)("relative z-20 h-screen w-full overflow-hidden",r,{"aiui-dark":z==="dark","rounded-box":re==="rounded"}),ref:ie,children:(0,e.jsx)("div",{ref:ne,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(A.default,{className:"sticky-title antialiased",data:{title:ce||"",theme:z}})})})}),(0,e.jsxs)("div",{ref:M,style:{marginBottom:`-${ue}px`,zIndex:f?2:1},className:(0,b.cn)(t,"relative mt-[-200vh]",n),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,b.cn)("media-cover","relative h-screen w-full"),children:[ee?(0,e.jsx)(U.YouTubePlayer,{youTubeId:u&&te||H}):x?.url&&(0,e.jsx)(D.default,{videoRef:L,poster:u&&i?.url?i?.url:g?.url,src:u&&s?.url?s?.url:x?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{oe(!0)}}),g?.url&&(!x?.url||ae)&&(0,e.jsx)("img",{src:u&&i?.url?i?.url:g?.url,alt:g?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(j,{components:le}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var he=(0,W.withLayout)(G);
+"use strict";"use client";var me=Object.create;var w=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,s)=>{for(var t in s)w(r,t,{get:s[t],enumerable:!0})},V=(r,s,t,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of ye(s))!ge.call(r,a)&&a!==t&&w(r,a,{get:()=>s[a],enumerable:!(o=fe(s,a))||o.enumerable});return r};var d=(r,s,t)=>(t=r!=null?me(be(r)):{},V(s||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),we=r=>V(w({},"__esModule",{value:!0}),r);var ke={};ve(ke,{default:()=>he});module.exports=we(ke);var e=require("react/jsx-runtime"),l=d(require("react")),O=require("es-toolkit"),Q=require("react-intersection-observer"),b=require("../../helpers/utils.js"),W=require("../../shared/Styles.js"),A=d(require("../Slogan/index.js")),U=require("../VideoModal/YouTubePlayer.js"),k=require("../../components/grid.js"),_=require("../../components/container.js"),J=d(require("../BrandEquity/index.js")),K=d(require("../MemberEquity/index.js")),X=d(require("../Spacer/index.js")),h=d(require("gsap")),C=require("gsap/dist/ScrollTrigger"),E=require("@payloadcms/richtext-lexical/html"),Z=require("react-responsive"),D=d(require("../../helpers/ScrollLoadVideo.js"));typeof window<"u"&&h.default.registerPlugin(C.ScrollTrigger);const I=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:r,spaceY:s,className:t})=>(0,e.jsx)(_.Container,{spaceY:s,className:(0,b.cn)("!bg-transparent",t),children:(0,e.jsx)(k.Grid,{children:(0,e.jsx)(k.GridItem,{span:12,children:r})})}),j=l.default.forwardRef(({children:r,id:s,components:t},o)=>{const a=(0,l.useRef)(null);return(0,e.jsxs)("div",{ref:a,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map((n,i)=>{switch(n.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(J.default,{data:n,style:n?.style})})},`${n.blockType}-${i}`);case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(K.default,{data:n,className:"w-full",style:n?.style})})},`${n.blockType}-${i}`);case"ipc-spacer":return(0,e.jsx)(X.default,{data:n,style:n?.style,className:"!bg-transparent"},`${n.blockType}-${i}`);default:return null}})})]})});j.displayName="SubBox";const G=(0,l.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:o,videoTitle:a,mobVideo:n,mobImg:i,img:g,isYouTube:ee,youtubePcId:H,youtubeMobileId:te,video:x,theme:z,shape:re,components:le}},xe)=>{const L=(0,l.useRef)(null),M=(0,l.useRef)(null),{ref:se,inView:f}=(0,Q.useInView)(),[B,ne]=(0,l.useState)(!1),[ae,oe]=(0,l.useState)(!1),ie=(0,l.useRef)(null),p=(0,l.useRef)(null),c=(0,l.useRef)(null),ce=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:I});typeof a=="string"||a&&(0,E.convertLexicalToHTML)({data:a,converters:I});const[ue,de]=(0,l.useState)(0),[u,pe]=(0,l.useState)(!1),N=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,l.useRef)(u);return(0,l.useEffect)(()=>{pe(N),q.current=N},[N]),(0,l.useEffect)(()=>{const m=(0,O.debounce)(()=>{if(M.current){const R=M.current.getBoundingClientRect(),y=q.current?window.screen.height:window.innerHeight,v=window.scrollY||window.pageYOffset,S=R.bottom+v,$=document.documentElement.scrollHeight-S;de($>y?y:$)}},2e3);return m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),m.cancel?.()}},[]),(0,l.useEffect)(()=>{f&&!B&&(L.current?.play(),ne(!0))},[f,B]),(0,l.useEffect)(()=>{if(p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null),!f||!t)return;const m=u?window.screen.height:window.innerHeight,R=document.querySelector(`#${t}`),y=document.querySelector(`#${t} .media-content`),v=document.querySelector(`.${t} .sticky-cover`);if(!(!R||!y||!v))return c.current=C.ScrollTrigger.create({trigger:`#${t}`,start:"top top",end:`top+=${m*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:S=>{const T=S.progress;requestAnimationFrame(()=>{const Y=50+Math.min(1,T*2)*50;h.default.set(y,{top:`${Y}%`,transform:`translate(-50%, -${Y}%)`,force3D:!0});const F=Math.max(0,Math.min(1,(T-.5)*2))*8;h.default.set(v,{backdropFilter:`blur(${F}px)`,WebkitBackdropFilter:`blur(${F}px)`,force3D:!0})})}}),()=>{p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null)}},[f,t,u]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,b.cn)("relative z-20 h-screen w-full overflow-hidden",r,{"aiui-dark":z==="dark","rounded-box":re==="rounded"}),ref:ie,children:(0,e.jsx)("div",{ref:se,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(A.default,{className:"sticky-title antialiased",data:{title:ce||"",theme:z}})})})}),(0,e.jsxs)("div",{ref:M,style:{marginBottom:`-${ue}px`,zIndex:f?2:1},className:(0,b.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,b.cn)("media-cover","relative h-screen w-full"),children:[ee?(0,e.jsx)(U.YouTubePlayer,{youTubeId:u&&te||H}):x?.url&&(0,e.jsx)(D.default,{videoRef:L,poster:u&&i?.url?i?.url:g?.url,src:u&&n?.url?n?.url:x?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{oe(!0)}}),g?.url&&(!x?.url||ae)&&(0,e.jsx)("img",{src:u&&i?.url?i?.url:g?.url,alt:g?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(j,{components:le}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var he=(0,W.withLayout)(G);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger)\n}\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div\n                  key={`${componentData.blockType}-${index}`}\n                  className=\"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent\"\n                >\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const timelineRef = useRef<gsap.core.Timeline | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const isMobileRef = useRef(isMobile)\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n      isMobileRef.current = mediaQuery\n    }, [mediaQuery])\n\n    useEffect(() => {\n      const debouncedHandleResize = debounce(() => {\n        if (boxRef.current) {\n          const rect = boxRef.current.getBoundingClientRect()\n          const screenHeight = isMobileRef.current ? window.screen.height : window.innerHeight\n          const scrollTop = window.scrollY || window.pageYOffset\n          const elementBottomToPageTop = rect.bottom + scrollTop\n          const pageHeight = document.documentElement.scrollHeight\n          const distanceToPageBottom = pageHeight - elementBottomToPageTop\n          setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        }\n      }, 2000)\n\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n        debouncedHandleResize.cancel?.()\n      }\n    }, [])\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n      if (timelineRef.current) {\n        timelineRef.current.kill()\n        timelineRef.current = null\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n        scrollTriggerRef.current = null\n      }\n\n      if (!inView || !id) return\n\n      const height = isMobile ? window.screen.height : window.innerHeight\n      const triggerElement = document.querySelector(`#${id}`)\n      const mediaContent = document.querySelector(`#${id} .media-content`)\n      const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n      if (!triggerElement || !mediaContent || !stickyCover) return\n\n      // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: `#${id}`,\n        start: 'top top',\n        end: `top+=${height * 1.8}px bottom`,\n        scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n        invalidateOnRefresh: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n          requestAnimationFrame(() => {\n            // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n            const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n            const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n            gsap.set(mediaContent, {\n              top: `${topValue}%`,\n              transform: `translate(-50%, -${topValue}%)`,\n              force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n            })\n\n            // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n            const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n            const blurValue = blurProgress * 8\n            gsap.set(stickyCover, {\n              backdropFilter: `blur(${blurValue}px)`,\n              WebkitBackdropFilter: `blur(${blurValue}px)`,\n              force3D: true,\n            })\n          })\n        },\n      })\n\n      return () => {\n        if (timelineRef.current) {\n          timelineRef.current.kill()\n          timelineRef.current = null\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n          scrollTriggerRef.current = null\n        }\n      }\n    }, [inView, id, isMobile])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full overflow-hidden', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger)\n}\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const timelineRef = useRef<gsap.core.Timeline | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const isMobileRef = useRef(isMobile)\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n      isMobileRef.current = mediaQuery\n    }, [mediaQuery])\n\n    useEffect(() => {\n      const debouncedHandleResize = debounce(() => {\n        if (boxRef.current) {\n          const rect = boxRef.current.getBoundingClientRect()\n          const screenHeight = isMobileRef.current ? window.screen.height : window.innerHeight\n          const scrollTop = window.scrollY || window.pageYOffset\n          const elementBottomToPageTop = rect.bottom + scrollTop\n          const pageHeight = document.documentElement.scrollHeight\n          const distanceToPageBottom = pageHeight - elementBottomToPageTop\n          setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        }\n      }, 2000)\n\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n        debouncedHandleResize.cancel?.()\n      }\n    }, [])\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n      if (timelineRef.current) {\n        timelineRef.current.kill()\n        timelineRef.current = null\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n        scrollTriggerRef.current = null\n      }\n\n      if (!inView || !id) return\n\n      const height = isMobile ? window.screen.height : window.innerHeight\n      const triggerElement = document.querySelector(`#${id}`)\n      const mediaContent = document.querySelector(`#${id} .media-content`)\n      const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n      if (!triggerElement || !mediaContent || !stickyCover) return\n\n      // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: `#${id}`,\n        start: 'top top',\n        end: `top+=${height * 1.8}px bottom`,\n        scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n        invalidateOnRefresh: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n          requestAnimationFrame(() => {\n            // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n            const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n            const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n            gsap.set(mediaContent, {\n              top: `${topValue}%`,\n              transform: `translate(-50%, -${topValue}%)`,\n              force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n            })\n\n            // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n            const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n            const blurValue = blurProgress * 8\n            gsap.set(stickyCover, {\n              backdropFilter: `blur(${blurValue}px)`,\n              WebkitBackdropFilter: `blur(${blurValue}px)`,\n              force3D: true,\n            })\n          })\n        },\n      })\n\n      return () => {\n        if (timelineRef.current) {\n          timelineRef.current.kill()\n          timelineRef.current = null\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n          scrollTriggerRef.current = null\n        }\n      }\n    }, [inView, id, isMobile])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full overflow-hidden', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "mappings": "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",
   "names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_YouTubePlayer", "import_grid", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_ScrollTrigger", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "gsap", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "timelineRef", "scrollTriggerRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "isMobileRef", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "triggerElement", "mediaContent", "stickyCover", "self", "progress", "topValue", "blurValue", "Slogan", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/SearchPage/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var j=(s,o)=>{for(var l in o)S(s,l,{get:o[l],enumerable:!0})},$=(s,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of O(o))!R.call(s,c)&&c!==l&&S(s,c,{get:()=>o[c],enumerable:!(n=A(o,c))||n.enumerable});return s};var F=s=>$(S({},"__esModule",{value:!0}),s);var H={};j(H,{default:()=>U});module.exports=F(H);var e=require("react/jsx-runtime"),t=require("../../components/index.js"),E=require("../HeaderNavigation/icons/index.js"),i=require("react"),d=require("../../helpers/utils.js"),k=require("../AiuiProvider/index.js"),I=require("../ShelfDisplay/shelfDisplay.js"),u=require("./types.js");const B=({product:s,onSecondaryButton:o,onPrimaryButton:l,searchValue:n,variantData:c})=>{const p=(0,i.useMemo)(()=>c||s?.variants?.[0],[s,c]),{locale:g="us",copyWriting:m}=(0,k.useAiuiContext)(),h=(0,i.useMemo)(()=>`/products/${s?.handle}?variant=${(0,d.atobID)(p?.id)}`,[s?.handle,p?.id]),x=p?.coupons?.[0],{price:r,basePrice:N}=(0,I.formatVariantPrice)({locale:g,amount:x?x.variant_price4wscode:p?.price,baseAmount:x?p?.price:0,currencyCode:s?.price?.currencyCode||"USD"}),y=(0,i.useMemo)(()=>s?.tags?.filter?.(b=>b?.startsWith?.("CLtag"))?.map?.(b=>b?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:s?.type==="advertising"?(0,e.jsxs)(t.Link,{href:s?.advertisingLink,className:"h-full",children:[(0,e.jsx)(t.Picture,{source:s?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(t.Text,{html:s?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),(0,e.jsx)(t.Heading,{size:3,html:s?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):(0,e.jsxs)("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(t.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${p?.image?.url||s?.images?.[0]?.url}}`,alt:s.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map((b,_)=>(0,e.jsx)(t.Text,{as:"p",html:b,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"},_))}),(0,e.jsx)(t.Text,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,d.highlightSearchWord)(s?.title||"",n||"")}),(0,e.jsx)(t.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,d.highlightSearchWord)(s.description,n||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:p?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:p?.availableForSale&&r||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:p?.availableForSale&&N||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(t.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!p?.availableForSale,onClick:()=>o?.(),children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(t.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!p?.availableForSale,onClick:()=>l?.(),children:m?.shopNowText})]})]})]})]})})},G=({blog:s,searchValue:o})=>{const{copyWriting:l}=(0,k.useAiuiContext)(),n=(0,i.useMemo)(()=>`blogs/${s?.handle}/${s?.handle.replace("storefront-","")}`,[s]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:(0,e.jsx)(t.Picture,{source:s?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:s?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(s?.title,o)}),(0,e.jsx)(t.Text,{html:(0,d.highlightSearchWord)(s?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(t.Button,{as:"a",href:n,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},W=({searchValue:s,page:o})=>{const{copyWriting:l,locale:n="us"}=(0,k.useAiuiContext)(),c=(0,i.useMemo)(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,s)}),(0,e.jsx)(t.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",s),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(t.Button,{as:"a",href:c,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},P=({url:s,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(t.Picture,{source:s,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(t.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),T=({products:s,title:o,buildProps:l,onSecondaryButton:n,onPrimaryButton:c})=>{const{products:p}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:s?.map((g,m)=>{const h=p?.find(r=>r.handle===g.handle),x=h?.variants?.find(r=>r.sku===g.sku);return(0,e.jsx)(B,{product:h,variantData:x,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>c?.()},g.id+m)})})]})},K=({searchResult:s,searchValue:o,data:l,onSecondaryButton:n,onPrimaryButton:c,onChangeSort:p,loading:g,searchResultCount:m,onChangeTab:h,buildProps:x})=>{const[r,N]=(0,i.useState)(l?.tabs?.[0]),y=(0,i.useRef)(!1),[b,_]=(0,i.useState)(!1),[w,z]=(0,i.useState)({[u.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[u.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.BLOGS)?.sortKeys?.[0],[u.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PAGES)?.sortKeys?.[0]}),v=(0,i.useMemo)(()=>s?.products||[],[s]),C=(0,i.useMemo)(()=>s?.blogs||[],[s]),L=(0,i.useMemo)(()=>s?.pages||[],[s]),D=(0,i.useMemo)(()=>Object.values(m||{}).reduce((a,f)=>a+f,0),[m]),M=(0,i.useMemo)(()=>{const a={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&v?.length&&(v?.length>=8?(v?.splice(7,0,a),y.current=!0):(v?.push(a),y.current=!0)),v},[r,v]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",D?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(t.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(t.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(t.TabsTrigger,{onClick:()=>{N(a),h?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(t.DropdownMenu,{onOpenChange:_,children:[(0,e.jsx)(t.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[r?.sortLabel," ",w?.[r?.tabType]?.label," ",(0,e.jsx)(E.DownArrow,{className:(0,d.cn)("inline-block size-4",{"rotate-180":b})})]})}),(0,e.jsx)(t.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:r?.sortKeys?.map(a=>(0,e.jsx)(t.DropdownMenuItem,{className:(0,d.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":w?.[r?.tabType]?.value===a.value}),onClick:()=>{y.current=!1,p?.(r?.tabType,a),z(f=>({...f,[r?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:M?.map((a,f)=>(0,e.jsx)(B,{searchValue:o,product:a,onSecondaryButton:()=>n?.(a),onPrimaryButton:()=>c?.(a)},a.id+f))}),g?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!v?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]}),(0,e.jsx)(t.TabsContent,{value:u.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[C?.map(a=>(0,e.jsx)(G,{blog:a,searchValue:o},a.id)),g?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!C?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:L?.map((a,f)=>(0,e.jsx)(W,{page:a,searchValue:o},a.global_id+f))}),g?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!L?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})]})})]})};var U=K;
+"use strict";var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var R=(s,o)=>{for(var l in o)S(s,l,{get:o[l],enumerable:!0})},j=(s,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of $(o))!O.call(s,p)&&p!==l&&S(s,p,{get:()=>o[p],enumerable:!(r=A(o,p))||r.enumerable});return s};var F=s=>j(S({},"__esModule",{value:!0}),s);var H={};R(H,{default:()=>U});module.exports=F(H);var e=require("react/jsx-runtime"),t=require("../../components/index.js"),E=require("../HeaderNavigation/icons/index.js"),i=require("react"),d=require("../../helpers/utils.js"),N=require("../AiuiProvider/index.js"),I=require("../ShelfDisplay/shelfDisplay.js"),g=require("./types.js");const B=({product:s,onSecondaryButton:o,onPrimaryButton:l,searchValue:r,variantData:p})=>{const c=(0,i.useMemo)(()=>p||s?.variants?.[0],[s,p]),{locale:m="us",copyWriting:u}=(0,N.useAiuiContext)(),h=(0,i.useMemo)(()=>`${m==="us"?"":"/"+m}/products/${s?.handle}?variant=${(0,d.atobID)(c?.id)}?ref=search_result_${r?.toLowerCase()}`,[s?.handle,c?.id,r]),x=c?.coupons?.[0],{price:n,basePrice:k}=(0,I.formatVariantPrice)({locale:m,amount:x?x.variant_price4wscode:c?.price,baseAmount:x?c?.price:0,currencyCode:s?.price?.currencyCode||"USD"}),y=(0,i.useMemo)(()=>s?.tags?.filter?.(b=>b?.startsWith?.("CLtag"))?.map?.(b=>b?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:s?.type==="advertising"?(0,e.jsxs)(t.Link,{href:s?.advertisingLink,className:"h-full",children:[(0,e.jsx)(t.Picture,{source:s?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(t.Text,{html:s?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),(0,e.jsx)(t.Heading,{size:3,html:s?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):(0,e.jsxs)("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(t.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${c?.image?.url||s?.images?.[0]?.url}}`,alt:s.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map((b,_)=>(0,e.jsx)(t.Text,{as:"p",html:b,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"},_))}),(0,e.jsx)(t.Text,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,d.highlightSearchWord)(s?.title||"",r||"")}),(0,e.jsx)(t.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,d.highlightSearchWord)(s.description,r||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:c?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:c?.availableForSale&&n||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:c?.availableForSale&&k||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:u?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[u?.learnMoreText&&(0,e.jsx)(t.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!c?.availableForSale,onClick:()=>o?.(),children:u?.learnMoreText}),u?.shopNowText&&(0,e.jsx)(t.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!c?.availableForSale,onClick:()=>l?.(),children:u?.shopNowText})]})]})]})]})})},G=({blog:s,searchValue:o})=>{const{copyWriting:l,locale:r}=(0,N.useAiuiContext)(),p=(0,i.useMemo)(()=>`${r==="us"?"":"/"+r}/blogs/${s?.blog?.handle}/${s?.handle.replace("storefront-","")}`,[s,r]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:(0,e.jsx)(t.Picture,{source:s?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:s?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(s?.title,o)}),(0,e.jsx)(t.Text,{html:(0,d.highlightSearchWord)(s?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(t.Button,{as:"a",href:p,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},W=({searchValue:s,page:o})=>{const{copyWriting:l,locale:r="us"}=(0,N.useAiuiContext)(),p=(0,i.useMemo)(()=>`${r==="us"?"":`/${r}`}/${o?.handle}`,[o,r]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,s)}),(0,e.jsx)(t.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",s),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(t.Button,{as:"a",href:p,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},P=({url:s,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(t.Picture,{source:s,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(t.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),T=({products:s,title:o,buildProps:l,onSecondaryButton:r,onPrimaryButton:p})=>{const{products:c}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:s?.map((m,u)=>{const h=c?.find(n=>n.handle===m.handle),x=h?.variants?.find(n=>n.sku===m.sku);return(0,e.jsx)(B,{product:h,variantData:x,onSecondaryButton:()=>r?.(),onPrimaryButton:()=>p?.()},m.id+u)})})]})},K=({searchResult:s,searchValue:o,data:l,onSecondaryButton:r,onPrimaryButton:p,onChangeSort:c,loading:m,searchResultCount:u,onChangeTab:h,buildProps:x})=>{const[n,k]=(0,i.useState)(l?.tabs?.[0]),y=(0,i.useRef)(!1),[b,_]=(0,i.useState)(!1),[w,z]=(0,i.useState)({[g.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===g.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[g.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===g.SearchPageTabType.BLOGS)?.sortKeys?.[0],[g.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===g.SearchPageTabType.PAGES)?.sortKeys?.[0]}),v=(0,i.useMemo)(()=>s?.products||[],[s]),C=(0,i.useMemo)(()=>s?.blogs||[],[s]),L=(0,i.useMemo)(()=>s?.pages||[],[s]),D=(0,i.useMemo)(()=>Object.values(u||{}).reduce((a,f)=>a+f,0),[u]);(0,i.useEffect)(()=>{k(l?.tabs?.[0])},[n?.tabType]);const M=(0,i.useMemo)(()=>{const a={advertisingBgImg:n?.advertisingBgImg,advertisingTitle:n?.advertisingTitle,advertisingSubtitle:n?.advertisingSubtitle,advertisingLink:n?.advertisingLink,type:"advertising"};return!y.current&&v?.length&&(v?.length>=8?(v?.splice(7,0,a),y.current=!0):(v?.push(a),y.current=!0)),v},[n,v]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",D?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(t.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(t.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(t.TabsTrigger,{onClick:()=>{k(a),h?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",u?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(t.DropdownMenu,{onOpenChange:_,children:[(0,e.jsx)(t.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[n?.sortLabel," ",w?.[n?.tabType]?.label," ",(0,e.jsx)(E.DownArrow,{className:(0,d.cn)("inline-block size-4",{"rotate-180":b})})]})}),(0,e.jsx)(t.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:n?.sortKeys?.map(a=>(0,e.jsx)(t.DropdownMenuItem,{className:(0,d.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":w?.[n?.tabType]?.value===a.value}),onClick:()=>{y.current=!1,c?.(n?.tabType,a),z(f=>({...f,[n?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(t.TabsContent,{value:g.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:M?.map((a,f)=>(0,e.jsx)(B,{searchValue:o,product:a,onSecondaryButton:()=>r?.(a),onPrimaryButton:()=>p?.(a)},a.id+f))}),m?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!v?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]}),(0,e.jsx)(t.TabsContent,{value:g.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[C?.map(a=>(0,e.jsx)(G,{blog:a,searchValue:o},a.id)),m?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!C?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(t.TabsContent,{value:g.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:L?.map((a,f)=>(0,e.jsx)(W,{page:a,searchValue:o},a.global_id+f))}),m?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!L?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(T,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})]})})]})};var U=K;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/SearchPage/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
-  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [product?.handle, variant?.id])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting } = useAiuiContext()\n\n  const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `${locale === 'us' ? '' : '/' + locale}/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`\n  }, [product?.handle, variant?.id, searchValue])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting, locale } = useAiuiContext()\n\n  const articleLink = useMemo(\n    () =>\n      `${locale === 'us' ? '' : '/' + locale}/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`,\n    [blog, locale]\n  )\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u6807\u7B7E\n    setCurrentTab(data?.tabs?.[0])\n  }, [currentTab?.tabType])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
+  "mappings": "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",
   "names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev"]
 }

package/dist/esm/biz-components/MediaPlayerSticky/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as C,jsx as e,jsxs as h}from"react/jsx-runtime";import re,{useState as g,useRef as o,useEffect as v,forwardRef as le}from"react";import{debounce as ne}from"es-toolkit";import{useInView as se}from"react-intersection-observer";import{cn as w}from"../../helpers/utils.js";import{withLayout as ae}from"../../shared/Styles.js";import oe from"../Slogan/index.js";import{YouTubePlayer as ie}from"../VideoModal/YouTubePlayer.js";import{Grid as ce,GridItem as ue}from"../../components/grid.js";import{Container as de}from"../../components/container.js";import pe from"../BrandEquity/index.js";import me from"../MemberEquity/index.js";import fe from"../Spacer/index.js";import $ from"gsap";import{ScrollTrigger as F}from"gsap/dist/ScrollTrigger";import{convertLexicalToHTML as V}from"@payloadcms/richtext-lexical/html";typeof window<"u"&&$.registerPlugin(F);import{useMediaQuery as ye}from"react-responsive";import be from"../../helpers/ScrollLoadVideo.js";const I=({defaultConverters:n})=>({...n,text:i=>{const{node:t}=i;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:n,spaceY:i,className:t})=>e(de,{spaceY:i,className:w("!bg-transparent",t),children:e(ce,{children:e(ue,{span:12,children:n})})}),j=re.forwardRef(({children:n,id:i,components:t},p)=>{const c=o(null);return h("div",{ref:c,className:"relative z-10",children:[e(C,{children:n}),e(C,{children:t?.map((r,l)=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(P,{spaceY:"none",children:e(pe,{data:r,style:r?.style})})},`${r.blockType}-${l}`);case"ipc-member-equity":return e("div",{className:"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent",children:e(P,{spaceY:"none",children:e(me,{data:r,className:"w-full",style:r?.style})})},`${r.blockType}-${l}`);case"ipc-spacer":return e(fe,{data:r,style:r?.style,className:"!bg-transparent"},`${r.blockType}-${l}`);default:return null}})})]})});j.displayName="SubBox";const G=le(({className:n="",wrapperClassName:i="",id:t,data:{title:p,videoTitle:c,mobVideo:r,mobImg:l,img:y,isYouTube:O,youtubePcId:E,youtubeMobileId:Q,video:k,theme:H,shape:W,components:A}},ge)=>{const z=o(null),x=o(null),{ref:U,inView:m}=se(),[L,_]=g(!1),[J,K]=g(!1),X=o(null),u=o(null),s=o(null),Z=typeof p=="string"?p:p&&V({data:p,converters:I});typeof c=="string"||c&&V({data:c,converters:I});const[D,ee]=g(0),[a,te]=g(!1),M=ye({query:"(max-width: 768px)"}),B=o(a);return v(()=>{te(M),B.current=M},[M]),v(()=>{const d=ne(()=>{if(x.current){const N=x.current.getBoundingClientRect(),f=B.current?window.screen.height:window.innerHeight,b=window.scrollY||window.pageYOffset,R=N.bottom+b,T=document.documentElement.scrollHeight-R;ee(T>f?f:T)}},2e3);return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d),d.cancel?.()}},[]),v(()=>{m&&!L&&(z.current?.play(),_(!0))},[m,L]),v(()=>{if(u.current&&(u.current.kill(),u.current=null),s.current&&(s.current.kill(),s.current=null),!m||!t)return;const d=a?window.screen.height:window.innerHeight,N=document.querySelector(`#${t}`),f=document.querySelector(`#${t} .media-content`),b=document.querySelector(`.${t} .sticky-cover`);if(!(!N||!f||!b))return s.current=F.create({trigger:`#${t}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:R=>{const S=R.progress;requestAnimationFrame(()=>{const q=50+Math.min(1,S*2)*50;$.set(f,{top:`${q}%`,transform:`translate(-50%, -${q}%)`,force3D:!0});const Y=Math.max(0,Math.min(1,(S-.5)*2))*8;$.set(b,{backdropFilter:`blur(${Y}px)`,WebkitBackdropFilter:`blur(${Y}px)`,force3D:!0})})}}),()=>{u.current&&(u.current.kill(),u.current=null),s.current&&(s.current.kill(),s.current=null)}},[m,t,a]),h(C,{children:[e("div",{id:t,className:w("relative z-20 h-screen w-full overflow-hidden",n,{"aiui-dark":H==="dark","rounded-box":W==="rounded"}),ref:X,children:e("div",{ref:U,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(oe,{className:"sticky-title antialiased",data:{title:Z||"",theme:H}})})})}),h("div",{ref:x,style:{marginBottom:`-${D}px`,zIndex:m?2:1},className:w(t,"relative mt-[-200vh]",i),children:[e("div",{className:"sticky top-0 ",children:h("div",{className:w("media-cover","relative h-screen w-full"),children:[O?e(ie,{youTubeId:a&&Q||E}):k?.url&&e(be,{videoRef:z,poster:a&&l?.url?l?.url:y?.url,src:a&&r?.url?r?.url:k?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{K(!0)}}),y?.url&&(!k?.url||J)&&e("img",{src:a&&l?.url?l?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(j,{components:A}),e("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var qe=ae(G);export{qe as default};
+"use client";import{Fragment as C,jsx as e,jsxs as h}from"react/jsx-runtime";import re,{useState as g,useRef as o,useEffect as v,forwardRef as le}from"react";import{debounce as se}from"es-toolkit";import{useInView as ne}from"react-intersection-observer";import{cn as w}from"../../helpers/utils.js";import{withLayout as ae}from"../../shared/Styles.js";import oe from"../Slogan/index.js";import{YouTubePlayer as ie}from"../VideoModal/YouTubePlayer.js";import{Grid as ce,GridItem as ue}from"../../components/grid.js";import{Container as de}from"../../components/container.js";import pe from"../BrandEquity/index.js";import me from"../MemberEquity/index.js";import fe from"../Spacer/index.js";import $ from"gsap";import{ScrollTrigger as F}from"gsap/dist/ScrollTrigger";import{convertLexicalToHTML as V}from"@payloadcms/richtext-lexical/html";typeof window<"u"&&$.registerPlugin(F);import{useMediaQuery as ye}from"react-responsive";import be from"../../helpers/ScrollLoadVideo.js";const I=({defaultConverters:s})=>({...s,text:i=>{const{node:t}=i;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:s,spaceY:i,className:t})=>e(de,{spaceY:i,className:w("!bg-transparent",t),children:e(ce,{children:e(ue,{span:12,children:s})})}),j=re.forwardRef(({children:s,id:i,components:t},p)=>{const c=o(null);return h("div",{ref:c,className:"relative z-10",children:[e(C,{children:s}),e(C,{children:t?.map((r,l)=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(P,{spaceY:"none",children:e(pe,{data:r,style:r?.style})})},`${r.blockType}-${l}`);case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(P,{spaceY:"none",children:e(me,{data:r,className:"w-full",style:r?.style})})},`${r.blockType}-${l}`);case"ipc-spacer":return e(fe,{data:r,style:r?.style,className:"!bg-transparent"},`${r.blockType}-${l}`);default:return null}})})]})});j.displayName="SubBox";const G=le(({className:s="",wrapperClassName:i="",id:t,data:{title:p,videoTitle:c,mobVideo:r,mobImg:l,img:y,isYouTube:O,youtubePcId:E,youtubeMobileId:Q,video:k,theme:H,shape:W,components:A}},ge)=>{const z=o(null),x=o(null),{ref:U,inView:m}=ne(),[L,_]=g(!1),[J,K]=g(!1),X=o(null),u=o(null),n=o(null),Z=typeof p=="string"?p:p&&V({data:p,converters:I});typeof c=="string"||c&&V({data:c,converters:I});const[D,ee]=g(0),[a,te]=g(!1),M=ye({query:"(max-width: 768px)"}),B=o(a);return v(()=>{te(M),B.current=M},[M]),v(()=>{const d=se(()=>{if(x.current){const N=x.current.getBoundingClientRect(),f=B.current?window.screen.height:window.innerHeight,b=window.scrollY||window.pageYOffset,R=N.bottom+b,T=document.documentElement.scrollHeight-R;ee(T>f?f:T)}},2e3);return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d),d.cancel?.()}},[]),v(()=>{m&&!L&&(z.current?.play(),_(!0))},[m,L]),v(()=>{if(u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null),!m||!t)return;const d=a?window.screen.height:window.innerHeight,N=document.querySelector(`#${t}`),f=document.querySelector(`#${t} .media-content`),b=document.querySelector(`.${t} .sticky-cover`);if(!(!N||!f||!b))return n.current=F.create({trigger:`#${t}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:R=>{const S=R.progress;requestAnimationFrame(()=>{const q=50+Math.min(1,S*2)*50;$.set(f,{top:`${q}%`,transform:`translate(-50%, -${q}%)`,force3D:!0});const Y=Math.max(0,Math.min(1,(S-.5)*2))*8;$.set(b,{backdropFilter:`blur(${Y}px)`,WebkitBackdropFilter:`blur(${Y}px)`,force3D:!0})})}}),()=>{u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null)}},[m,t,a]),h(C,{children:[e("div",{id:t,className:w("relative z-20 h-screen w-full overflow-hidden",s,{"aiui-dark":H==="dark","rounded-box":W==="rounded"}),ref:X,children:e("div",{ref:U,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(oe,{className:"sticky-title antialiased",data:{title:Z||"",theme:H}})})})}),h("div",{ref:x,style:{marginBottom:`-${D}px`,zIndex:m?2:1},className:w(t,"relative mt-[-200vh]",i),children:[e("div",{className:"sticky top-0 ",children:h("div",{className:w("media-cover","relative h-screen w-full"),children:[O?e(ie,{youTubeId:a&&Q||E}):k?.url&&e(be,{videoRef:z,poster:a&&l?.url?l?.url:y?.url,src:a&&r?.url?r?.url:k?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{K(!0)}}),y?.url&&(!k?.url||J)&&e("img",{src:a&&l?.url?l?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(j,{components:A}),e("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var qe=ae(G);export{qe as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerSticky/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger)\n}\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div\n                  key={`${componentData.blockType}-${index}`}\n                  className=\"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent\"\n                >\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const timelineRef = useRef<gsap.core.Timeline | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const isMobileRef = useRef(isMobile)\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n      isMobileRef.current = mediaQuery\n    }, [mediaQuery])\n\n    useEffect(() => {\n      const debouncedHandleResize = debounce(() => {\n        if (boxRef.current) {\n          const rect = boxRef.current.getBoundingClientRect()\n          const screenHeight = isMobileRef.current ? window.screen.height : window.innerHeight\n          const scrollTop = window.scrollY || window.pageYOffset\n          const elementBottomToPageTop = rect.bottom + scrollTop\n          const pageHeight = document.documentElement.scrollHeight\n          const distanceToPageBottom = pageHeight - elementBottomToPageTop\n          setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        }\n      }, 2000)\n\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n        debouncedHandleResize.cancel?.()\n      }\n    }, [])\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n      if (timelineRef.current) {\n        timelineRef.current.kill()\n        timelineRef.current = null\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n        scrollTriggerRef.current = null\n      }\n\n      if (!inView || !id) return\n\n      const height = isMobile ? window.screen.height : window.innerHeight\n      const triggerElement = document.querySelector(`#${id}`)\n      const mediaContent = document.querySelector(`#${id} .media-content`)\n      const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n      if (!triggerElement || !mediaContent || !stickyCover) return\n\n      // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: `#${id}`,\n        start: 'top top',\n        end: `top+=${height * 1.8}px bottom`,\n        scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n        invalidateOnRefresh: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n          requestAnimationFrame(() => {\n            // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n            const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n            const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n            gsap.set(mediaContent, {\n              top: `${topValue}%`,\n              transform: `translate(-50%, -${topValue}%)`,\n              force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n            })\n\n            // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n            const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n            const blurValue = blurProgress * 8\n            gsap.set(stickyCover, {\n              backdropFilter: `blur(${blurValue}px)`,\n              WebkitBackdropFilter: `blur(${blurValue}px)`,\n              force3D: true,\n            })\n          })\n        },\n      })\n\n      return () => {\n        if (timelineRef.current) {\n          timelineRef.current.kill()\n          timelineRef.current = null\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n          scrollTriggerRef.current = null\n        }\n      }\n    }, [inView, id, isMobile])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full overflow-hidden', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger)\n}\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const timelineRef = useRef<gsap.core.Timeline | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const isMobileRef = useRef(isMobile)\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n      isMobileRef.current = mediaQuery\n    }, [mediaQuery])\n\n    useEffect(() => {\n      const debouncedHandleResize = debounce(() => {\n        if (boxRef.current) {\n          const rect = boxRef.current.getBoundingClientRect()\n          const screenHeight = isMobileRef.current ? window.screen.height : window.innerHeight\n          const scrollTop = window.scrollY || window.pageYOffset\n          const elementBottomToPageTop = rect.bottom + scrollTop\n          const pageHeight = document.documentElement.scrollHeight\n          const distanceToPageBottom = pageHeight - elementBottomToPageTop\n          setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        }\n      }, 2000)\n\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n        debouncedHandleResize.cancel?.()\n      }\n    }, [])\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n      if (timelineRef.current) {\n        timelineRef.current.kill()\n        timelineRef.current = null\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n        scrollTriggerRef.current = null\n      }\n\n      if (!inView || !id) return\n\n      const height = isMobile ? window.screen.height : window.innerHeight\n      const triggerElement = document.querySelector(`#${id}`)\n      const mediaContent = document.querySelector(`#${id} .media-content`)\n      const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n      if (!triggerElement || !mediaContent || !stickyCover) return\n\n      // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: `#${id}`,\n        start: 'top top',\n        end: `top+=${height * 1.8}px bottom`,\n        scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n        invalidateOnRefresh: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n          requestAnimationFrame(() => {\n            // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n            const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n            const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n            gsap.set(mediaContent, {\n              top: `${topValue}%`,\n              transform: `translate(-50%, -${topValue}%)`,\n              force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n            })\n\n            // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n            const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n            const blurValue = blurProgress * 8\n            gsap.set(stickyCover, {\n              backdropFilter: `blur(${blurValue}px)`,\n              WebkitBackdropFilter: `blur(${blurValue}px)`,\n              force3D: true,\n            })\n          })\n        },\n      })\n\n      return () => {\n        if (timelineRef.current) {\n          timelineRef.current.kill()\n          timelineRef.current = null\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n          scrollTriggerRef.current = null\n        }\n      }\n    }, [inView, id, isMobile])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full overflow-hidden', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "ScrollTrigger", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "timelineRef", "scrollTriggerRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "isMobileRef", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "triggerElement", "mediaContent", "stickyCover", "self", "progress", "topValue", "blurValue", "MediaPlayerSticky_default"]
 }

package/dist/esm/biz-components/SearchPage/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as P,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as N,Tabs as G,TabsList as W,TabsTrigger as K,TabsContent as C,Text as f,Picture as _,Link as U,Button as S,DropdownMenu as H,DropdownMenuTrigger as V,DropdownMenuContent as q,DropdownMenuItem as J,LoadingDots as L}from"../../components/index.js";import{DownArrow as Q}from"../HeaderNavigation/icons/index.js";import{useMemo as c,useRef as X,useState as B}from"react";import{cn as E,atobID as Y,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as I}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as u}from"./types.js";const R=({product:t,onSecondaryButton:o,onPrimaryButton:a,searchValue:n,variantData:g})=>{const i=c(()=>g||t?.variants?.[0],[t,g]),{locale:d="us",copyWriting:p}=I(),h=c(()=>`/products/${t?.handle}?variant=${Y(i?.id)}`,[t?.handle,i?.id]),m=i?.coupons?.[0],{price:r,basePrice:T}=Z({locale:d,amount:m?m.variant_price4wscode:i?.price,baseAmount:m?i?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),y=c(()=>t?.tags?.filter?.(x=>x?.startsWith?.("CLtag"))?.map?.(x=>x?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"?l(U,{href:t?.advertisingLink,className:"h-full",children:[e(_,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(f,{html:t?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),e(N,{size:3,html:t?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):l("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(_,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${i?.image?.url||t?.images?.[0]?.url}}`,alt:t.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map((x,w)=>e(f,{as:"p",html:x,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"},w))}),e(f,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",n||"")}),e(f,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t.description,n||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:i?.availableForSale?l(P,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:i?.availableForSale&&r||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:i?.availableForSale&&T||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:p?.soldOutText||"Sold Out"})}),l("div",{className:E("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[p?.learnMoreText&&e(S,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>o?.(),children:p?.learnMoreText}),p?.shopNowText&&e(S,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>a?.(),children:p?.shopNowText})]})]})]})]})})},ee=({blog:t,searchValue:o})=>{const{copyWriting:a}=I(),n=c(()=>`blogs/${t?.handle}/${t?.handle.replace("storefront-","")}`,[t]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:e(_,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(N,{size:3,html:k(t?.title,o)}),e(f,{html:k(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(S,{as:"a",href:n,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},te=({searchValue:t,page:o})=>{const{copyWriting:a,locale:n="us"}=I(),g=c(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(N,{size:3,html:k(o?.name,t)}),e(f,{as:"p",html:k(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(S,{as:"a",href:g,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},z=({url:t,label:o})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(_,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(f,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),D=({products:t,title:o,buildProps:a,onSecondaryButton:n,onPrimaryButton:g})=>{const{products:i}=a||{};return l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(N,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((d,p)=>{const h=i?.find(r=>r.handle===d.handle),m=h?.variants?.find(r=>r.sku===d.sku);return e(R,{product:h,variantData:m,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>g?.()},d.id+p)})})]})},se=({searchResult:t,searchValue:o,data:a,onSecondaryButton:n,onPrimaryButton:g,onChangeSort:i,loading:d,searchResultCount:p,onChangeTab:h,buildProps:m})=>{const[r,T]=B(a?.tabs?.[0]),y=X(!1),[x,w]=B(!1),[M,j]=B({[u.PRODUCTS]:a?.tabs?.find(s=>s.tabType===u.PRODUCTS)?.sortKeys?.[0],[u.BLOGS]:a?.tabs?.find(s=>s.tabType===u.BLOGS)?.sortKeys?.[0],[u.PAGES]:a?.tabs?.find(s=>s.tabType===u.PAGES)?.sortKeys?.[0]}),b=c(()=>t?.products||[],[t]),A=c(()=>t?.blogs||[],[t]),O=c(()=>t?.pages||[],[t]),$=c(()=>Object.values(p||{}).reduce((s,v)=>s+v,0),[p]),F=c(()=>{const s={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&b?.length&&(b?.length>=8?(b?.splice(7,0,s),y.current=!0):(b?.push(s),y.current=!0)),b},[r,b]);return l("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[e(N,{size:4,weight:"bold",html:a?.title?.replace("$totalCount",$?.toString())?.replace("$inputValue",`"${o}"`)}),e("div",{className:"mt-6",children:l(G,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(W,{children:a?.tabs?.map(s=>l(K,{onClick:()=>{T(s),h?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",p?.[s.tabType],")"]},s.id))}),l(H,{onOpenChange:w,children:[e(V,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[r?.sortLabel," ",M?.[r?.tabType]?.label," ",e(Q,{className:E("inline-block size-4",{"rotate-180":x})})]})}),e(q,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:r?.sortKeys?.map(s=>e(J,{className:E("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":M?.[r?.tabType]?.value===s.value}),onClick:()=>{y.current=!1,i?.(r?.tabType,s),j(v=>({...v,[r?.tabType]:s}))},children:s.label},s.id))})]})]}),l(C,{value:u.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:F?.map((s,v)=>e(R,{searchValue:o,product:s,onSecondaryButton:()=>n?.(s),onPrimaryButton:()=>g?.(s)},s.id+v))}),d?e("div",{className:"mt-6 flex w-full justify-center",children:e(L,{})}):!b?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]}),e(C,{value:u.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[A?.map(s=>e(ee,{blog:s,searchValue:o},s.id)),d?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!A?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})}),l(C,{value:u.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:O?.map((s,v)=>e(te,{page:s,searchValue:o},s.global_id+v))}),d?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!O?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})]})})]})};var me=se;export{me as default};
+import{Fragment as T,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as N,Tabs as G,TabsList as W,TabsTrigger as K,TabsContent as C,Text as f,Picture as S,Link as U,Button as P,DropdownMenu as H,DropdownMenuTrigger as q,DropdownMenuContent as J,DropdownMenuItem as Q,LoadingDots as L}from"../../components/index.js";import{DownArrow as X}from"../HeaderNavigation/icons/index.js";import{useEffect as Y,useMemo as m,useRef as Z,useState as B}from"react";import{cn as E,atobID as V,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as I}from"../AiuiProvider/index.js";import{formatVariantPrice as ee}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as g}from"./types.js";const O=({product:t,onSecondaryButton:o,onPrimaryButton:a,searchValue:i,variantData:d})=>{const n=m(()=>d||t?.variants?.[0],[t,d]),{locale:p="us",copyWriting:c}=I(),h=m(()=>`${p==="us"?"":"/"+p}/products/${t?.handle}?variant=${V(n?.id)}?ref=search_result_${i?.toLowerCase()}`,[t?.handle,n?.id,i]),u=n?.coupons?.[0],{price:r,basePrice:_}=ee({locale:p,amount:u?u.variant_price4wscode:n?.price,baseAmount:u?n?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),y=m(()=>t?.tags?.filter?.(x=>x?.startsWith?.("CLtag"))?.map?.(x=>x?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"?l(U,{href:t?.advertisingLink,className:"h-full",children:[e(S,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(f,{html:t?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),e(N,{size:3,html:t?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):l("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(S,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${n?.image?.url||t?.images?.[0]?.url}}`,alt:t.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map((x,w)=>e(f,{as:"p",html:x,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"},w))}),e(f,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",i||"")}),e(f,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t.description,i||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:n?.availableForSale?l(T,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:n?.availableForSale&&r||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:n?.availableForSale&&_||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:c?.soldOutText||"Sold Out"})}),l("div",{className:E("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[c?.learnMoreText&&e(P,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!n?.availableForSale,onClick:()=>o?.(),children:c?.learnMoreText}),c?.shopNowText&&e(P,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!n?.availableForSale,onClick:()=>a?.(),children:c?.shopNowText})]})]})]})]})})},te=({blog:t,searchValue:o})=>{const{copyWriting:a,locale:i}=I(),d=m(()=>`${i==="us"?"":"/"+i}/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,[t,i]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:e(S,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(N,{size:3,html:k(t?.title,o)}),e(f,{html:k(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(P,{as:"a",href:d,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},se=({searchValue:t,page:o})=>{const{copyWriting:a,locale:i="us"}=I(),d=m(()=>`${i==="us"?"":`/${i}`}/${o?.handle}`,[o,i]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(N,{size:3,html:k(o?.name,t)}),e(f,{as:"p",html:k(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(P,{as:"a",href:d,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},z=({url:t,label:o})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(S,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(f,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),D=({products:t,title:o,buildProps:a,onSecondaryButton:i,onPrimaryButton:d})=>{const{products:n}=a||{};return l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(N,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((p,c)=>{const h=n?.find(r=>r.handle===p.handle),u=h?.variants?.find(r=>r.sku===p.sku);return e(O,{product:h,variantData:u,onSecondaryButton:()=>i?.(),onPrimaryButton:()=>d?.()},p.id+c)})})]})},ae=({searchResult:t,searchValue:o,data:a,onSecondaryButton:i,onPrimaryButton:d,onChangeSort:n,loading:p,searchResultCount:c,onChangeTab:h,buildProps:u})=>{const[r,_]=B(a?.tabs?.[0]),y=Z(!1),[x,w]=B(!1),[M,R]=B({[g.PRODUCTS]:a?.tabs?.find(s=>s.tabType===g.PRODUCTS)?.sortKeys?.[0],[g.BLOGS]:a?.tabs?.find(s=>s.tabType===g.BLOGS)?.sortKeys?.[0],[g.PAGES]:a?.tabs?.find(s=>s.tabType===g.PAGES)?.sortKeys?.[0]}),b=m(()=>t?.products||[],[t]),A=m(()=>t?.blogs||[],[t]),$=m(()=>t?.pages||[],[t]),j=m(()=>Object.values(c||{}).reduce((s,v)=>s+v,0),[c]);Y(()=>{_(a?.tabs?.[0])},[r?.tabType]);const F=m(()=>{const s={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&b?.length&&(b?.length>=8?(b?.splice(7,0,s),y.current=!0):(b?.push(s),y.current=!0)),b},[r,b]);return l("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[e(N,{size:4,weight:"bold",html:a?.title?.replace("$totalCount",j?.toString())?.replace("$inputValue",`"${o}"`)}),e("div",{className:"mt-6",children:l(G,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(W,{children:a?.tabs?.map(s=>l(K,{onClick:()=>{_(s),h?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",c?.[s.tabType],")"]},s.id))}),l(H,{onOpenChange:w,children:[e(q,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[r?.sortLabel," ",M?.[r?.tabType]?.label," ",e(X,{className:E("inline-block size-4",{"rotate-180":x})})]})}),e(J,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:r?.sortKeys?.map(s=>e(Q,{className:E("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":M?.[r?.tabType]?.value===s.value}),onClick:()=>{y.current=!1,n?.(r?.tabType,s),R(v=>({...v,[r?.tabType]:s}))},children:s.label},s.id))})]})]}),l(C,{value:g.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:F?.map((s,v)=>e(O,{searchValue:o,product:s,onSecondaryButton:()=>i?.(s),onPrimaryButton:()=>d?.(s)},s.id+v))}),p?e("div",{className:"mt-6 flex w-full justify-center",children:e(L,{})}):!b?.length&&l(T,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:u,title:a?.recommendProductsTitle})]})]}),e(C,{value:g.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[A?.map(s=>e(te,{blog:s,searchValue:o},s.id)),p?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!A?.length&&l(T,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:u,title:a?.recommendProductsTitle})]})]})}),l(C,{value:g.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:$?.map((s,v)=>e(se,{page:s,searchValue:o},s.global_id+v))}),p?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!$?.length&&l(T,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:u,title:a?.recommendProductsTitle})]})]})]})})]})};var me=ae;export{me as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SearchPage/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
-  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [product?.handle, variant?.id])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting } = useAiuiContext()\n\n  const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev", "SearchPage_default"]
+  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `${locale === 'us' ? '' : '/' + locale}/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`\n  }, [product?.handle, variant?.id, searchValue])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting, locale } = useAiuiContext()\n\n  const articleLink = useMemo(\n    () =>\n      `${locale === 'us' ? '' : '/' + locale}/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`,\n    [blog, locale]\n  )\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u6807\u7B7E\n    setCurrentTab(data?.tabs?.[0])\n  }, [currentTab?.tabType])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useEffect", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev", "SearchPage_default"]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.17-alpha.1766373865742",
+  "version": "1.1.17-alpha.1766376946694",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",