@anker-in/headless-ui 1.1.17-alpha.1766053535791 → 1.1.17-alpha.1766132717397

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 (17) hide show
  1. package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
  2. package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
  3. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  4. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  5. package/dist/cjs/biz-components/NavigationSearch/index.js +1 -1
  6. package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
  7. package/dist/cjs/biz-components/SearchPage/index.js +1 -1
  8. package/dist/cjs/biz-components/SearchPage/index.js.map +2 -2
  9. package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
  10. package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
  11. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  12. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  13. package/dist/esm/biz-components/NavigationSearch/index.js +1 -1
  14. package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
  15. package/dist/esm/biz-components/SearchPage/index.js +1 -1
  16. package/dist/esm/biz-components/SearchPage/index.js.map +2 -2
  17. package/package.json +1 -1
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as H,jsx as t,jsxs as o}from"react/jsx-runtime";import j,{useState as P,useEffect as D,useRef as Q}from"react";import{useMediaQuery as Y}from"react-responsive";import{withLayout as q}from"../../shared/Styles.js";import _ from"../../components/picture.js";import S from"../../components/button.js";import{Heading as z}from"../../components/heading.js";import{VideoModal as A}from"../VideoModal/index.js";import{Grid as O,GridItem as R}from"../../components/grid.js";import Z from"../Title/index.js";import{cn as T,spaceToHyphen as C}from"../../helpers/utils.js";import L from"../SwiperBox/index.js";import{isVideo as U}from"../../shared/mimeType.js";import{Tabs as F,TabsList as J,TabsTrigger as K,TabsContent as W}from"../../components/tabs.js";import{useExposure as X}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{gaTrack as ee}from"../../shared/track.js";const h="image",f="p1_banner",M=({data:i,configuration:r,jIndex:c,spanType:k,title:b,onSecondaryButtonClick:p,onPrimaryButtonClick:v})=>{const[y,m]=P(!1),B=Y({query:"(max-width: 768px)"}),x=Q(null),$=()=>{if(k)switch(k){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(r?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};X(x,{componentType:h,componentName:f,position:c,componentTitle:i.title,componentDescription:i.description,navigation:r?.activeTab}),D(()=>{m(B)},[B]);const{theme:N="light",title:d,description:u,imageUrl:l,primaryButton:n,secondaryButton:s,imageMobileUrl:w,blockLink:g,video:e,youtubeId:a,isYouTube:V}=i,G="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:T("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",$(),{"rounded-2xl":r?.shape==="rounded","aiui-dark":N==="dark","h-[400px]":y},"text-info-primary"),ref:x,children:[(g||s.link)&&t("a",{className:"absolute inset-0 z-10",href:I(g||s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[U(l?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:l?.url,type:"video/mp4"})}):t(_,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),U(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(_,{source:w?.url||l?.url,alt:w?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:T("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[o("div",{className:"flex flex-col gap-1",children:[t(z,{size:3,as:"h3",className:"item-title",html:d}),t(z,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:u})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(S,{"aria-label":d??u,className:T(G,"link-left"),variant:"secondary",as:"a",onClick:()=>{p?.(i)},href:I(s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${s.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:[s.text,t("span",{className:"sr-only",children:d??u})]}),n&&n.text&&t(S,{"aria-label":d??u,className:T(G,"link-right"),variant:"primary",as:"a",onClick:()=>{v?.(i)},href:I(n.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${n.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:n.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{r?.onVideoPlayBtnClick?.(e?.url||a,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},E=j.forwardRef((i,r)=>{const{onSecondaryButtonClick:c,onPrimaryButtonClick:k}=i,{shape:b,sectionTitle:p,groupByTab:v=!1,items:y=[],carousel:m}=i.data,[B,x]=P(!1),[$,N]=P(""),[d,u]=P(""),l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=y.map(e=>e.tabName).filter(Boolean).filter((e,a,V)=>V.indexOf(e)===a),s=(e,a)=>{x(!0),a?u?.(e||""):N?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},g=n.map(e=>({tabName:e,items:y.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:T("multiLayoutGraphicBlock","text-info-primary",i.className),children:[p&&t(Z,{data:{title:p},className:"section-title"}),v?o(F,{shape:b,align:"left",defaultValue:C(n[0]),children:[t(J,{children:n.map((e,a)=>t(K,{value:C(e),onClick:()=>{ee({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:f,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),n.map((e,a)=>t(W,{value:C(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(H,{children:[t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:g?.[e]||[],configuration:{shape:b,isTab:v,activeTab:e,title:p,num:g?.[e]?.length||0,onVideoPlayBtnClick:s,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(g?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(g?.[e]?.length||0)}}}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:b,isTab:v,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(H,{children:[o(O,{className:"w-full",children:[y.map((e,a)=>t(R,{span:l(e.width??"full"),className:"laptop:block hidden",children:t(M,{data:e,configuration:{shape:b,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:e.width,onSecondaryButtonClick:c,onPrimaryButtonClick:k})},`${e?.title||""}${a}`)),y.map((e,a)=>t(R,{span:l("full"),className:"laptop:hidden block",children:t(M,{data:e,configuration:{shape:b,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:b,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),B&&t(A,{visible:B,youTubeId:d,videoUrl:$,onCloseModal:()=>x(!1)})]})});E.displayName="MultiLayoutGraphicBlock";var be=q(E);export{be as default};
1
+ import{Fragment as j,jsx as t,jsxs as o}from"react/jsx-runtime";import D,{useState as $,useEffect as Q,useRef as Y}from"react";import{useMediaQuery as q}from"react-responsive";import{withLayout as A}from"../../shared/Styles.js";import _ from"../../components/picture.js";import z from"../../components/button.js";import{Heading as S}from"../../components/heading.js";import{VideoModal as O}from"../VideoModal/index.js";import{Grid as Z,GridItem as R}from"../../components/grid.js";import F from"../Title/index.js";import{cn as T,spaceToHyphen as C}from"../../helpers/utils.js";import L from"../SwiperBox/index.js";import{isVideo as U}from"../../shared/mimeType.js";import{Tabs as J,TabsList as K,TabsTrigger as W,TabsContent as X}from"../../components/tabs.js";import{useExposure as ee}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{gaTrack as te}from"../../shared/track.js";import E from"../../helpers/ScrollLoadVideo.js";const f="image",k="p1_banner",M=({data:i,configuration:n,jIndex:c,spanType:b,title:w,onSecondaryButtonClick:p,onPrimaryButtonClick:v})=>{const[y,m]=$(!1),B=q({query:"(max-width: 768px)"}),x=Y(null),N=()=>{if(b)switch(b){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(n?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};ee(x,{componentType:f,componentName:k,position:c,componentTitle:i.title,componentDescription:i.description,navigation:n?.activeTab}),Q(()=>{m(B)},[B]);const{theme:P="light",title:d,description:u,imageUrl:l,primaryButton:r,secondaryButton:s,imageMobileUrl:h,blockLink:g,video:e,youtubeId:a,isYouTube:V}=i,G="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:T("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",N(),{"rounded-2xl":n?.shape==="rounded","aiui-dark":P==="dark","h-[400px]":y},"text-info-primary"),ref:x,children:[(g||s.link)&&t("a",{className:"absolute inset-0 z-10",href:I(g||s.link,`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${d}#${u}`,"data-headless-nav-postion":`${n?.activeTab}#${c}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[U(l?.mimeType)&&l?.url?t(E,{src:l.url,className:"tablet:block hidden size-full overflow-hidden",videoClassName:"size-full object-cover",autoplay:!0,muted:!0,loop:!0,playsInline:!0}):t(_,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),U(h?.mimeType)&&h?.url?t(E,{src:h.url,className:"tablet:hidden block size-full overflow-hidden",videoClassName:"size-full object-cover",autoplay:!0,muted:!0,loop:!0,playsInline:!0}):t(_,{source:h?.url||l?.url,alt:h?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:T("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[o("div",{className:"flex flex-col gap-1",children:[t(S,{size:3,as:"h3",className:"item-title",html:d}),t(S,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:u})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(z,{"aria-label":d??u,className:T(G,"link-left"),variant:"secondary",as:"a",onClick:()=>{p?.(i)},href:I(s.link,`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${d}#${u}#${s.text}`,"data-headless-nav-postion":`${n?.activeTab}#${c}`,children:[s.text,t("span",{className:"sr-only",children:d??u})]}),r&&r.text&&t(z,{"aria-label":d??u,className:T(G,"link-right"),variant:"primary",as:"a",onClick:()=>{v?.(i)},href:I(r.link,`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${d}#${u}#${r.text}`,"data-headless-nav-postion":`${n?.activeTab}#${c}`,children:r.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{n?.onVideoPlayBtnClick?.(e?.url||a,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},H=D.forwardRef((i,n)=>{const{onSecondaryButtonClick:c,onPrimaryButtonClick:b}=i,{shape:w,sectionTitle:p,groupByTab:v=!1,items:y=[],carousel:m}=i.data,[B,x]=$(!1),[N,P]=$(""),[d,u]=$(""),l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=y.map(e=>e.tabName).filter(Boolean).filter((e,a,V)=>V.indexOf(e)===a),s=(e,a)=>{x(!0),a?u?.(e||""):P?.(e||"")},h=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},g=r.map(e=>({tabName:e,items:y.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:n,className:T("multiLayoutGraphicBlock","text-info-primary",i.className),children:[p&&t(F,{data:{title:p},className:"section-title"}),v?o(J,{shape:w,align:"left",defaultValue:C(r[0]),children:[t(K,{children:r.map((e,a)=>t(W,{value:C(e),onClick:()=>{te({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:f,component_name:k,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),r.map((e,a)=>t(X,{value:C(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(j,{children:[t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:g?.[e]||[],configuration:{shape:w,isTab:v,activeTab:e,title:p,num:g?.[e]?.length||0,onVideoPlayBtnClick:s,onSecondaryButtonClick:c,onPrimaryButtonClick:b}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(g?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(g?.[e]?.length||0)}}}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:w,isTab:v,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:b}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(j,{children:[o(Z,{className:"w-full",children:[y.map((e,a)=>t(R,{span:l(e.width??"full"),className:"laptop:block hidden",children:t(M,{data:e,configuration:{shape:w,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:e.width,onSecondaryButtonClick:c,onPrimaryButtonClick:b})},`${e?.title||""}${a}`)),y.map((e,a)=>t(R,{span:l("full"),className:"laptop:hidden block",children:t(M,{data:e,configuration:{shape:w,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:w,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:b}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),B&&t(O,{visible:B,youTubeId:d,videoUrl:N,onCloseModal:()=>x(!1)})]})});H.displayName="MultiLayoutGraphicBlock";var ge=A(H);export{ge as default};
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "AAiHQ,OA2MM,YAAAA,EA3MN,OAAAC,EA4CE,QAAAC,MA5CF,oBAjHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,MAAqB,yBAClC,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIlC,EAAkB,EAAK,EACjDmC,EAAahC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DiC,EAAMlC,EAAuB,IAAI,EAEjCmC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAP,EAAYgB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED1B,EAAU,IAAM,CACdiC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAItB,EACEuB,EAAe,mFAErB,OACEnD,EAAC,OACC,UAAWc,EACT,8BACA,qEACAyB,EAAa,EACb,CACE,cAAeV,GAAe,QAAU,UACxC,YAAaW,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7B9C,EAAC,KACC,UAAU,wBACV,KAAMwB,EAAYwB,GAAaF,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EACxF,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,4BAA2B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GAChE,cAAY,OACZ,SAAU,GACZ,EAEF9B,EAAC,OAAI,UAAU,mBACZ,UAAAiB,EAAQ0B,GAAU,QAAQ,EACzB5C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK4C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA5C,EAACQ,EAAA,CACC,OAAQoC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED1B,EAAQ6B,GAAgB,QAAQ,EAC/B/C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK+C,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEA/C,EAACQ,EAAA,CACC,OAAQuC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,EAEF3C,EAAC,OACC,UAAWc,EACT,sIACA,CACE,sEAAuEc,GAAM,QAAU,MACzF,CACF,EAEA,UAAA5B,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMgC,EAAO,EAC9D1C,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMiC,EACR,GACF,EACA1C,EAAC,OAAI,UAAU,8BACZ,UAAA6C,GAAmBA,EAAgB,MAClC7C,EAACQ,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAML,EAAYsB,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EAC3E,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,4BAA2B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAE/D,UAAAe,EAAgB,KACjB9C,EAAC,QAAK,UAAU,UAAW,SAAA0C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9B7C,EAACS,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAML,EAAYqB,EAAc,KAAM,GAAGnB,CAAa,IAAIC,CAAa,EAAE,EACzE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,4BAA2B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAE/D,SAAAc,EAAc,KACjB,GAEJ,GACF,GACF,EACA7C,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,gEACX,UAAAiD,GAAO,KAAOC,IACdlD,EAAC,UACC,QAAS,IAAM,CACb8B,GAAe,sBAAsBmB,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAAnD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMqD,EAA0BnD,EAAM,WAAyD,CAACoD,EAAOf,IAAQ,CAC7G,KAAM,CAAE,uBAAAL,EAAwB,qBAAAC,CAAqB,EAAImB,EACnD,CAAE,MAAAC,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAC1E,CAACM,EAASC,CAAU,EAAI1D,EAAkB,EAAK,EAC/C,CAAC2D,EAAUC,CAAW,EAAI5D,EAAiB,EAAE,EAC7C,CAAC6D,EAAWC,CAAY,EAAI9D,EAAiB,EAAE,EAE/C+D,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWV,EACd,IAAI7B,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAMwC,EAAOC,IAAQA,EAAI,QAAQzC,CAAI,IAAMwC,CAAK,EAErDE,EAA0B,CAACC,EAAarB,IAAuB,CACnEU,EAAW,EAAI,EACXV,EACFc,IAAeO,GAAO,EAAE,EAExBT,IAAcS,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOnB,EAAM,OAAO7B,GAAQA,EAAK,UAAYgD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,OACE7E,EAAC,WACC,uBAAqB,0BACrB,IAAKsC,EACL,UAAWxB,EAAG,0BAA2B,oBAAqBuC,EAAM,SAAS,EAE5E,UAAAE,GAAgBxD,EAACc,EAAA,CAAM,KAAM,CAAE,MAAO0C,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACCxD,EAACkB,EAAA,CAAK,MAAOoC,EAAO,MAAM,OAAO,aAAcvC,EAAcoD,EAAS,CAAC,CAAE,EACvE,UAAApE,EAACoB,EAAA,CACE,SAAAgD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACqB,EAAA,CAEC,MAAOL,EAAc6D,CAAQ,EAC7B,QAAS,IAAM,CACbpD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiB6B,EACjB,mBAAoB,EACpB,WAAYqB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACsB,EAAA,CAAwB,MAAON,EAAc6D,CAAQ,EAAG,UAAU,qCACjE,SAAA5E,EAAAF,EAAA,CACE,UAAAC,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM2D,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOtB,EACP,MAAOE,EACP,UAAWoB,EACX,MAAOrB,EACP,IAAKoB,IAAeC,CAAO,GAAG,QAAU,EACxC,oBAAqBN,EACrB,uBAAArC,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe6C,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACClB,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,MAAOE,EACP,oBAAqBc,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgByC,CAwFlB,CACD,GACH,EAEApE,EAAAF,EAAA,CACE,UAAAE,EAACW,EAAA,CAAK,UAAU,SACb,UAAA8C,EAAM,IAAI,CAAC7B,EAAMwC,IAEdrE,EAACa,EAAA,CAEC,KAAMqD,EAAQrC,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAA7B,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAUxC,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAXK,GAAGN,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAYnC,CAEH,EACAX,EAAM,IAAI,CAAC7B,EAAMwC,IAChBrE,EAACa,EAAA,CAA8C,KAAMqD,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAlE,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAU,OACZ,GANa,GAAGxC,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAO3C,CACD,GACH,EACCV,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,oBAAqBgB,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDgC,GACC5D,EAACW,EAAA,CACC,QAASiD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDR,EAAwB,YAAc,0BAEtC,IAAO2B,GAAQzE,EAAW8C,CAAuB",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
4
+ "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) && imageUrl?.url ? (\n <ScrollLoadVideo\n src={imageUrl.url}\n className=\"tablet:block hidden size-full overflow-hidden\"\n videoClassName=\"size-full object-cover\"\n autoplay={true}\n muted={true}\n loop={true}\n playsInline={true}\n />\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) && imageMobileUrl?.url ? (\n <ScrollLoadVideo\n src={imageMobileUrl.url}\n className=\"tablet:hidden block size-full overflow-hidden\"\n videoClassName=\"size-full object-cover\"\n autoplay={true}\n muted={true}\n loop={true}\n playsInline={true}\n />\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "ScrollLoadVideo", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
package/dist/esm/biz-components/NavigationSearch/index.js CHANGED
@@ -7,5 +7,5 @@ import{Fragment as S,jsx as o,jsxs as a}from"react/jsx-runtime";import{Picture a
7
7
  transition: background-color 9999s ease-in-out 0s !important;
8
8
  caret-color: #000;
9
9
  }
10
- `}),a("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[o("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:T,onChange:e=>{E(e.target.value),e.target.value&&I(e.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none ",placeholder:t?.placeholder}),a("div",{className:"flex items-center gap-3",children:[o(H,{className:"size-5 cursor-pointer",onClick:()=>c(i)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(M,{className:"size-5 cursor-pointer",onClick:n})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===u.Predict?a(S,{children:[a("div",{children:[a("div",{className:"flex items-center gap-1",children:[o(r,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s?.items?.length>6&&o(z,{as:"a",iconClassName:"size-4",href:`${l==="us"?"":l}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:s?.items?.filter(e=>U(e)).slice(0,6)?.map(e=>o(g,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:B(e),children:o(r,{html:Q(e.title,i),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),a("div",{children:[o(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[o(g,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative",children:[o(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:b("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(r,{html:t?.advertisingSubtitle||"20.000mAh",className:b("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),s?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const m=e?.variants?.[0],h=`${m?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,_=e?.description,W=e?.badge||"",q=`/products/${e?.handle}?variant=${$(m?.id)}`;return o(F,{productImage:h,productName:v,productDesc:_,productBadge:W,listingLink:q},e.id)})]})]})]}):a(S,{children:[k===u.Empty&&o(r,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{children:[o(r,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"mt-2",children:[o(X,{data:t,keywords:A,locale:l}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(K,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(j,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:`${l==="us"?"":l}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),a("div",{children:[o(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[o(g,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-[600]",children:[o(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),o(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const m=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${$(e?.shopify_id)}`;return o(F,{productImage:e?.image,productName:e?.name,productDesc:m,productBadge:h,listingLink:v},e.id)})]})]})]})})]})});D.displayName="NavigationSearch";const F=({productImage:t,productName:c,productDesc:n,productBadge:s,className:d,listingLink:p})=>o(g,{href:p,className:"block no-underline hover:text-current",children:a("div",{className:b("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 duration-[600] [&_img]:hover:scale-110",d),children:[o("div",{className:"shrink-0",children:o(x,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),a("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:s&&o(r,{as:"p",html:s,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),a("div",{children:[o(g,{href:p,className:"no-underline hover:text-current",children:o(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c})}),n&&o(r,{as:"p",html:n,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),X=({data:t,keywords:c,locale:n})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((s,d)=>o("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${s?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:s},d))});var ie=D;export{U as canSearch,ie as default};
10
+ `}),a("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[o("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:T,onChange:e=>{E(e.target.value),e.target.value&&I(e.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none ",placeholder:t?.placeholder}),a("div",{className:"flex items-center gap-3",children:[o(H,{className:"size-5 cursor-pointer",onClick:()=>c(i)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(M,{className:"size-5 cursor-pointer",onClick:n})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===u.Predict?a(S,{children:[a("div",{children:[a("div",{className:"flex items-center gap-1",children:[o(r,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s?.items?.length>6&&o(z,{as:"a",iconClassName:"size-4",href:`${l==="us"?"":l}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:s?.items?.filter(e=>U(e)).slice(0,6)?.map(e=>o(g,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:B(e),children:o(r,{html:Q(e.title,i),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),a("div",{children:[o(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[o(g,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative",children:[o(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:b("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(r,{html:t?.advertisingSubtitle||"20.000mAh",className:b("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),s?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const m=e?.variants?.[0],h=`${m?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,_=e?.description,W=e?.badge||"",q=`/products/${e?.handle}?variant=${$(m?.id)}`;return o(F,{productImage:h,productName:v,productDesc:_,productBadge:W,listingLink:q},e.id)})]})]})]}):a(S,{children:[k===u.Empty&&o(r,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{children:[o(r,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"mt-2",children:[o(X,{data:t,keywords:A,locale:l}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(K,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(j,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:`${l==="us"?"":l}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),a("div",{children:[o(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[o(g,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),o(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const m=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${$(e?.shopify_id)}`;return o(F,{productImage:e?.image,productName:e?.name,productDesc:m,productBadge:h,listingLink:v},e.id)})]})]})]})})]})});D.displayName="NavigationSearch";const F=({productImage:t,productName:c,productDesc:n,productBadge:s,className:d,listingLink:p})=>o(g,{href:p,className:"block no-underline hover:text-current",children:a("div",{className:b("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o(x,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),a("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:s&&o(r,{as:"p",html:s,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),a("div",{children:[o(g,{href:p,className:"no-underline hover:text-current",children:o(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c})}),n&&o(r,{as:"p",html:n,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),X=({data:t,keywords:c,locale:n})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((s,d)=>o("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${s?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:s},d))});var ie=D;export{U as canSearch,ie as default};
11
11
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/NavigationSearch/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
4
- "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n window.open(`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`, '_self')\n }\n },\n [isComposing, searchValue, locale, data?.moreLink]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n const type = item.__typename || item.type\n switch (type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue, isSearching])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <style>\n {`\n .navigation-search-component input:-webkit-autofill,\n .navigation-search-component input:-webkit-autofill:hover,\n .navigation-search-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #000 !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #000;\n }\n `}\n </style>\n <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none \"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-1\">\n <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n iconClassName=\"size-4\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"mt-2 flex flex-col\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-[600]\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm font-bold text-white\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <Link href={listingLink} className=\"block no-underline hover:text-current\">\n <div\n className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 duration-[600] [&_img]:hover:scale-110', className)}\n >\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n </Link>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n window.open(`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`, '_self')\n }\n },\n [isComposing, searchValue, locale, data?.moreLink]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n const type = item.__typename || item.type\n switch (type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue, isSearching])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <style>\n {`\n .navigation-search-component input:-webkit-autofill,\n .navigation-search-component input:-webkit-autofill:hover,\n .navigation-search-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #000 !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #000;\n }\n `}\n </style>\n <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none \"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-1\">\n <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n iconClassName=\"size-4\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"mt-2 flex flex-col\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm font-bold text-white\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <Link href={listingLink} className=\"block no-underline hover:text-current\">\n <div\n className={cn(\n 'flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n className\n )}\n >\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n </Link>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useAiuiContext", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "className", "index", "NavigationSearch_default"]
7
7
  }
package/dist/esm/biz-components/SearchPage/index.js CHANGED
@@ -1,2 +1,2 @@
1
- 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-[600]",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};
1
+ 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};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/SearchPage/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
4
- "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-[600]\">\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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }