npm - @anker-in/headless-ui - Versions diffs - 1.0.14 → 1.0.16 - Mend

@anker-in/headless-ui 1.0.14 → 1.0.16

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 (125) hide show

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var q=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,o)=>{for(var l in o)I(a,l,{get:o[l],enumerable:!0})},R=(a,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of O(o))!F.call(a,p)&&p!==l&&I(a,p,{get:()=>o[p],enumerable:!(n=A(o,p))||n.enumerable});return a};var B=(a,o,l)=>(l=a!=null?q(Z(a)):{},R(o||!a||!a.__esModule?I(l,"default",{value:a,enumerable:!0}):l,a)),K=a=>R(I({},"__esModule",{value:!0}),a);var X={};J(X,{default:()=>W});module.exports=K(X);var e=require("react/jsx-runtime"),i=B(require("react")),j=require("react-responsive"),E=require("../../shared/Styles.js"),_=B(require("../../components/picture.js")),$=B(require("../../components/button.js")),S=require("../../components/heading.js"),H=require("../VideoModal/index.js"),N=require("../../components/gird.js"),D=B(require("../Title/index.js")),m=require("../../helpers/utils.js"),L=B(require("../SwiperBox/index.js")),z=require("../../shared/mimeType.js"),h=require("../../components/tabs.js"),Q=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js"),Y=require("../../shared/track.js");const x="image",T="p1_banner",M=({data:a,configuration:o,jIndex:l,spanType:n})=>{const[p,b]=(0,i.useState)(!1),d=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),P=()=>{if(n)switch(n){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(o?.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]"}};(0,Q.useExposure)(v,{componentType:x,componentName:T,position:l,componentTitle:a.title,componentDescription:a.description,navigation:o?.activeTab}),(0,i.useEffect)(()=>{b(d)},[d]);const{theme:G="light",title:k,description:g,imageUrl:r,primaryButton:f,secondaryButton:u,imageMobileUrl:c,blockLink:y,video:w,youtubeId:t,isYouTube:s}=a,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,m.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",P(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":G==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:v,children:[y&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,C.trackUrlRef)(y,`${x}_${T}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,z.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:r?.url,alt:r?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${r?.width}/${r?.height}`}}),(0,z.isVideo)(c?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:c?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:c?.url||r?.url,alt:c?.alt||r?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,m.cn)("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",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(S.Heading,{size:3,as:"h3",className:"item-title",html:k}),(0,e.jsx)(S.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:g})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,e.jsxs)($.default,{"aria-label":k??g,className:V,variant:"secondary",as:"a",href:(0,C.trackUrlRef)(u.link,`${x}_${T}`),children:[u.text,(0,e.jsx)("span",{className:"sr-only",children:k??g})]}),f&&f.text&&(0,e.jsx)($.default,{"aria-label":k??g,className:V,variant:"primary",as:"a",href:(0,C.trackUrlRef)(f.link,`${x}_${T}`),children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(w?.url||t)&&(0,e.jsx)("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(w?.url||t,s)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},U=i.default.forwardRef((a,o)=>{const{shape:l,sectionTitle:n,groupByTab:p=!1,items:b=[],carousel:d}=a.data,[v,P]=(0,i.useState)(!1),[G,k]=(0,i.useState)(""),[g,r]=(0,i.useState)(""),f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=b.map(t=>t.tabName).filter(Boolean).filter((t,s,V)=>V.indexOf(t)===s),c=(t,s)=>{P(!0),s?r?.(t||""):k?.(t||"")},y=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},w=u.map(t=>({tabName:t,items:b.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:(0,m.cn)("text-info-primary",a.className),children:[n&&(0,e.jsx)(D.default,{data:{title:n},className:"section-title"}),p?(0,e.jsxs)(h.Tabs,{shape:l,align:"left",defaultValue:(0,m.spaceToHyphen)(u[0]),children:[(0,e.jsx)(h.TabsList,{children:u.map((t,s)=>(0,e.jsx)(h.TabsTrigger,{value:(0,m.spaceToHyphen)(t),onClick:()=>{(0,Y.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:T,component_title:n,component_position:1,navigation:t,button_name:t}})},children:t},s))}),u.map((t,s)=>(0,e.jsx)(h.TabsContent,{value:(0,m.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:w?.[t]||[],configuration:{shape:l,isTab:p,activeTab:t,num:w?.[t]?.length||0,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0)}}}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:d?.items||[],configuration:{shape:l,isTab:p,onVideoPlayBtnClick:c}},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]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(N.Grid,{className:"w-full",children:[b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:t.width})},`${t?.title||""}${s}`)),b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:"full"})},`${t?.title||""}${s}`))]}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:d?.items||[],configuration:{shape:l,onVideoPlayBtnClick:c}},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]}),v&&(0,e.jsx)(H.VideoModal,{visible:v,youTubeId:g,videoUrl:G,onCloseModal:()=>P(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var W=(0,E.withLayout)(U);
+"use strict";var A=Object.create;var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var K=(s,l)=>{for(var o in l)N(s,o,{get:l[o],enumerable:!0})},U=(s,l,o,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of Z(l))!J.call(s,c)&&c!==o&&N(s,c,{get:()=>l[c],enumerable:!(p=O(l,c))||p.enumerable});return s};var T=(s,l,o)=>(o=s!=null?A(F(s)):{},U(l||!s||!s.__esModule?N(o,"default",{value:s,enumerable:!0}):o,s)),W=s=>U(N({},"__esModule",{value:!0}),s);var ee={};K(ee,{default:()=>X});module.exports=W(ee);var e=require("react/jsx-runtime"),n=T(require("react")),H=require("react-responsive"),D=require("../../shared/Styles.js"),C=T(require("../../components/picture.js")),_=T(require("../../components/button.js")),S=require("../../components/heading.js"),j=require("../VideoModal/index.js"),$=require("../../components/gird.js"),Q=T(require("../Title/index.js")),u=require("../../helpers/utils.js"),P=T(require("../SwiperBox/index.js")),z=require("../../shared/mimeType.js"),k=require("../../components/tabs.js"),Y=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),q=require("../../shared/track.js");const w="image",b="p1_banner",M=({data:s,configuration:l,jIndex:o,spanType:p,title:c})=>{const[y,f]=(0,n.useState)(!1),B=(0,H.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,n.useRef)(null),L=()=>{if(p)switch(p){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(l?.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]"}};(0,Y.useExposure)(x,{componentType:w,componentName:b,position:o,componentTitle:s.title,componentDescription:s.description,navigation:l?.activeTab}),(0,n.useEffect)(()=>{f(B)},[B]);const{theme:I="light",title:m,description:h,imageUrl:r,primaryButton:d,secondaryButton:i,imageMobileUrl:g,blockLink:v,video:t,youtubeId:a,isYouTube:G}=s,R="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,u.cn)("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",L(),{"rounded-2xl":l?.shape==="rounded","aiui-dark":I==="dark","h-[400px]":y},"text-info-primary"),ref:x,children:[(v||i.link)&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)(v||i.link,`${w}_${b}`),"data-headless-type-name":`${w}#${b}`,"data-headless-title-desc-button":`${m}#${h}`,"data-headless-nav-postion":`${l?.activeTab}#${o}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,z.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:r?.url,alt:r?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${r?.width}/${r?.height}`}}),(0,z.isVideo)(g?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:g?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:g?.url||r?.url,alt:g?.alt||r?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,u.cn)("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",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":s?.width==="full"}),children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(S.Heading,{size:3,as:"h3",className:"item-title",html:m}),(0,e.jsx)(S.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:h})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[i&&i.text&&(0,e.jsxs)(_.default,{"aria-label":m??h,className:(0,u.cn)(R,"link-left"),variant:"secondary",as:"a",href:(0,V.trackUrlRef)(i.link,`${w}_${b}`),"data-headless-type-name":`${w}#${b}`,"data-headless-title-desc-button":`${m}#${h}#${i.text}`,"data-headless-nav-postion":`${l?.activeTab}#${o}`,children:[i.text,(0,e.jsx)("span",{className:"sr-only",children:m??h})]}),d&&d.text&&(0,e.jsx)(_.default,{"aria-label":m??h,className:(0,u.cn)(R,"link-right"),variant:"primary",as:"a",href:(0,V.trackUrlRef)(d.link,`${w}_${b}`),"data-headless-type-name":`${w}#${b}`,"data-headless-title-desc-button":`${m}#${h}#${d.text}`,"data-headless-nav-postion":`${l?.activeTab}#${o}`,children:d.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(t?.url||a)&&(0,e.jsx)("button",{onClick:()=>{l?.onVideoPlayBtnClick?.(t?.url||a,G)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},E=n.default.forwardRef((s,l)=>{const{shape:o,sectionTitle:p,groupByTab:c=!1,items:y=[],carousel:f}=s.data,[B,x]=(0,n.useState)(!1),[L,I]=(0,n.useState)(""),[m,h]=(0,n.useState)(""),r=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=y.map(t=>t.tabName).filter(Boolean).filter((t,a,G)=>G.indexOf(t)===a),i=(t,a)=>{x(!0),a?h?.(t||""):I?.(t||"")},g=(t,a)=>{switch(t){case 1:return 1;case 2:return 2;default:return a?2.3:3}},v=d.map(t=>({tabName:t,items:y.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:(0,u.cn)("multiLayoutGraphicBlock","text-info-primary",s.className),children:[p&&(0,e.jsx)(Q.default,{data:{title:p},className:"section-title"}),c?(0,e.jsxs)(k.Tabs,{shape:o,align:"left",defaultValue:(0,u.spaceToHyphen)(d[0]),children:[(0,e.jsx)(k.TabsList,{children:d.map((t,a)=>(0,e.jsx)(k.TabsTrigger,{value:(0,u.spaceToHyphen)(t),onClick:()=>{(0,q.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:w,component_name:b,component_title:p,component_position:1,navigation:t,button_name:t}})},children:t},a))}),d.map((t,a)=>(0,e.jsx)(k.TabsContent,{value:(0,u.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:v?.[t]||[],configuration:{shape:o,isTab:c,activeTab:t,title:p,num:v?.[t]?.length||0,onVideoPlayBtnClick:i}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(v?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(v?.[t]?.length||0)}}}),f&&f?.items.length>0?(0,e.jsx)(P.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:f?.items||[],configuration:{shape:o,isTab:c,onVideoPlayBtnClick:i,title:p}},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))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)($.Grid,{className:"w-full",children:[y.map((t,a)=>(0,e.jsx)($.GridItem,{span:r(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(M,{data:t,configuration:{shape:o,onVideoPlayBtnClick:i,title:p},jIndex:a,spanType:t.width})},`${t?.title||""}${a}`)),y.map((t,a)=>(0,e.jsx)($.GridItem,{span:r("full"),className:"laptop:hidden block",children:(0,e.jsx)(M,{data:t,configuration:{shape:o,onVideoPlayBtnClick:i,title:p},jIndex:a,spanType:"full"})},`${t?.title||""}${a}`))]}),f&&f?.items.length>0?(0,e.jsx)(P.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:f?.items||[],configuration:{shape:o,onVideoPlayBtnClick:i,title:p}},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&&(0,e.jsx)(j.VideoModal,{visible:B,youTubeId:m,videoUrl:L,onCloseModal:()=>x(!1)})]})});E.displayName="MultiLayoutGraphicBlock";var X=(0,D.withLayout)(E);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "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/gird.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}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\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 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-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\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 h-full overflow-hidden\">\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            '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              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div>\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={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\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={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\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\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-10 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 { 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('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                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\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: { shape: shape, isTab: groupByTab, onVideoPlayBtnClick: handleVideoPlayBtnClick },\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 }}\n                    jIndex={index}\n                    spanType={item.width}\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 }}\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: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick },\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"],
-  "mappings": "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",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "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", "Title", "SwiperBox"]
+  "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/gird.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}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\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 h-full overflow-hidden\">\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 h-full overflow-hidden\">\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            '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              '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                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                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\">\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 { 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                    },\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                      },\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                  />\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: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\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"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "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", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/index.d.ts CHANGED Viewed

@@ -1,68 +1,5 @@
 import React from 'react';
-import type { ContainerProps } from '../../types/props.js';
-export interface ShelfDisplayItem {
-    id?: string;
-    /** 产品图片*/
-    img?: {
-        url: string;
-    };
-    handle?: string;
-    sku?: string;
-    /** 折扣后价格*/
-    price?: string;
-    title?: string;
-    /** 折扣前价格*/
-    basePrice?: string;
-    subTitle?: string;
-    /** 标签*/
-    tagItems?: string[];
-    tab?: string;
-    data?: ShelfDisplayItem[];
-    custom_name?: string;
-    custom_description?: string;
-}
-type EventType = {
-    primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
-    secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
-};
-type ShelfDisplayType = {
-    title?: string;
-    isShowTab?: boolean;
-    isShowTag?: boolean;
-    isShowRecommendedCard?: boolean;
-    isShowOriginalPrice?: boolean;
-    direction?: 'horizontal' | 'vertical';
-    align?: 'left' | 'center' | 'right';
-    productsTab?: any[];
-    productsCard?: any[];
-    /** 卡片形状 */
-    itemShape?: 'round' | 'square';
-    /** 按钮形状 */
-    shape?: 'round' | 'square';
-    /** 标签页形状*/
-    tabShape?: 'rounded' | 'square';
-    /** 主按钮配置 */
-    primaryButton?: string;
-    primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
-    /** 副按钮配置 */
-    secondaryButton?: string;
-    secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
-    theme?: 'light' | 'dark';
-    containerProps?: ContainerProps;
-};
-export interface ShelfDisplayProps {
-    data: ShelfDisplayType;
-    buildData?: {
-        categories: any[];
-        products: any[];
-    };
-    recommendedData?: any[];
-    /** 按钮事件*/
-    event?: EventType;
-    className?: string;
-    key?: string;
-    target?: '_self' | '_blank';
-}
+import type { ShelfDisplayProps } from './shelfDisplay.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
     className?: string;
     data?: Record<string, any>;

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

@@ -1,6 +1,2 @@
-"use strict";"use client";var re=Object.create;var B=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(e,t)=>{for(var r in t)B(e,r,{get:t[r],enumerable:!0})},L=(e,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of ie(t))!oe.call(e,p)&&p!==r&&B(e,p,{get:()=>t[p],enumerable:!(m=se(t,p))||m.enumerable});return e};var h=(e,t,r)=>(r=e!=null?re(ae(e)):{},L(t||!e||!e.__esModule?B(r,"default",{value:e,enumerable:!0}):r,e)),pe=e=>L(B({},"__esModule",{value:!0}),e);var he={};le(he,{default:()=>fe});module.exports=pe(he);var n=require("react/jsx-runtime"),i=h(require("react")),S=require("../../helpers/utils.js"),$=h(require("../../components/picture.js")),A=h(require("./tabSwitch.js")),H=h(require("../../components/button.js")),F=h(require("../Title/index.js")),j=h(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),U=require("./shelfDisplay.js"),z=require("../../hooks/useExposure.js"),D=require("../../shared/track.js"),W=require("../AiuiProvider/index.js"),G=h(require("../../components/badge.js")),J=require("../../components/heading.js"),K=require("../../components/text.js"),Q=require("../../shared/trackUrlRef.js");const E="image",V="product_shelf",ce=999999999e-2;function me(e){const t=(0,i.useRef)(null),[r,m]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{if(r)return;const p=t.current;if(!p||typeof IntersectionObserver>"u")return;const c=new IntersectionObserver(([a])=>{a.isIntersecting&&(m(!0),c.disconnect())},e);return c.observe(p),()=>c.disconnect()},[r,e]),[t,r]}const de=({data:e,configuration:t})=>{const{locale:r="us",copyWriting:m}=(0,W.useAiuiContext)(),p=(s,l,y)=>t?.event?.primaryButton?.(s,l+1,y),c=(s,l,y)=>t?.event?.secondaryButton?.(s,l+1,y),a=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},P=!a?.availableForSale&&a?.price?.amount===ce,v=t?.isShowTag,b=t?.isShowOriginalPrice,g=a?.coupons?.[0],{price:w,basePrice:N}=(0,U.formatVariantPrice)({locale:r,amount:b&&g?g.variant_price4wscode:a.price,baseAmount:b&&g?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),k=()=>{const s=e?.sku,l=e?.variants;return l?.find(_=>_?.sku===s)?.image?.url||l?.[0]?.image?.url||""},d=e?.custom_name||e?.title,x=e?.custom_description||e?.description;return(0,n.jsx)("div",{className:(0,S.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,n.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,n.jsx)("div",{className:(0,S.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,n.jsx)("a",{"aria-label":d,target:t?.target,href:(0,Q.trackUrlRef)(`${r==="us"||!r?"":`/${r}`}/products/${e?.handle}`,`${E}_${V}`),onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:(0,n.jsx)($.default,{source:k(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),v?(0,n.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,l)=>(0,n.jsx)(G.default,{children:s},l))}):null,d?(0,n.jsx)(J.Heading,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:d||""}):null,x?(0,n.jsx)(K.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:x||""}):null,(0,n.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:P?(0,n.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&w||""}),(0,n.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&N||""})]})}),(0,n.jsxs)("div",{className:(0,S.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,n.jsx)(H.default,{variant:"secondary",onClick:()=>c(e,t?.index,t),className:`
-                ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,n.jsx)(H.default,{variant:"primary",onClick:()=>p(e,t?.index,t),className:`
-              ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},ue=i.default.forwardRef(({data:e,buildData:t,className:r="",key:m,event:p,recommendedData:c,target:a="_self"},P)=>{const[v,b]=(0,i.useState)(""),[g,w]=(0,i.useState)([]),[N,k]=me({threshold:0}),d=(0,i.useRef)(!1),x=(0,i.useRef)(!1),s=(0,i.useRef)(null);(0,i.useImperativeHandle)(P,()=>s.current),(0,z.useExposure)(s,{componentType:E,componentName:V,componentTitle:e?.title,navigation:v});const{productsTab:l=[],productsCard:y=[],title:_,isShowTab:C=!0,tabShape:X="square",isShowTag:Y=!1,isShowOriginalPrice:Z=!0,isShowRecommendedCard:ee=!1,...te}=e,M=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((o,R)=>{const u=o?.variants?.find(f=>f?.sku===o?.sku)||o?.variants?.[0];return{item_id:o?.sku||u?.sku,item_name:o?.name,item_variant:u?.name,price:u?.price,index:R+1}})}})},I=(o,R)=>{if(R){const T=c?.map?.(u=>({...u,isShowRecommended:!0}));w(T?.length?T||[]:[])}else if(Array.isArray(o)){const u=o?.map?.(f=>{const O=t?.products?.find(ne=>ne?.handle===f?.handle);if(O)return{sku:f.sku,isShowRecommended:!1,custom_name:f.custom_name,custom_description:f.custom_description,...O}})?.filter(f=>f);w(u?.length?u||[]:[])}else w([])};return(0,i.useEffect)(()=>{k&&c?.length&&!x.current&&(x.current=!0,M())},[k,c]),(0,i.useEffect)(()=>{if(!d.current){if(!d.current&&c?.length&&(d.current=!0),C){b(l?.[0]?.tab||""),I(l?.[0]?.data||[],l?.[0]?.isShowRecommendedTab);return}I(y,ee)}},[c]),(0,n.jsxs)("div",{ref:s,className:(0,S.cn)("shelf-display-wrap w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[_&&(0,n.jsx)(F.default,{data:{title:_}}),C&&(0,n.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,n.jsx)(A.default,{value:v,tabs:l,tabShape:X,onTabClick:o=>{if(b(o?.tab),I(o?.data||[],o?.isShowRecommendedTab),!o?.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:E,component_name:V,component_title:e?.title,component_position:1,navigation:o?.tab}});return}M()}})}),(0,n.jsx)("div",{ref:N,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,n.jsx)(j.default,{className:`${C?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${m}${v}`,data:{list:g,configuration:{...te,event:p,isShowTag:Y,isShowOriginalPrice:Z,target:a}},Slide:de,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},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var fe=(0,q.withLayout)(ue);
+"use strict";"use client";var ie=Object.create;var g=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(e,t)=>{for(var i in t)g(e,i,{get:t[i],enumerable:!0})},L=(e,t,i,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ae(t))!le.call(e,r)&&r!==i&&g(e,r,{get:()=>t[r],enumerable:!(f=re(t,r))||f.enumerable});return e};var v=(e,t,i)=>(i=e!=null?ie(oe(e)):{},L(t||!e||!e.__esModule?g(i,"default",{value:e,enumerable:!0}):i,e)),me=e=>L(g({},"__esModule",{value:!0}),e);var de={};ce(de,{default:()=>ue});module.exports=me(de);var c=require("react/jsx-runtime"),n=v(require("react")),A=require("../../helpers/utils.js"),$=v(require("./tabSwitch.js")),q=v(require("../Title/index.js")),z=v(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),W=require("../../hooks/useExposure.js"),x=require("../../shared/track.js"),j=require("react-responsive"),b=require("./shelfDisplayItem.js");const N="image",O="product_shelf";function fe(e){const t=(0,n.useRef)(null),[i,f]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{if(i)return;const r=t.current;if(!r||typeof IntersectionObserver>"u")return;const p=new IntersectionObserver(([a])=>{a.isIntersecting&&(f(!0),p.disconnect())},e);return p.observe(r),()=>p.disconnect()},[i,e]),[t,i]}const pe=n.default.forwardRef(({key:e,data:t,event:i,buildData:f,breakpoints:r,className:p="",recommendedData:a,target:F="_self",isDisplayGudgments:M=!1,isDisplayBackImage:G=!1},J)=>{const{productsTab:d=[],productsCard:K=[],title:P,isShowTab:y=!0,tabShape:U="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:Z=!1,...ee}=t,[_,V]=(0,n.useState)(""),[m,S]=(0,n.useState)([]),E=(0,n.useRef)(!1),T=(0,n.useRef)(!1),I=(0,n.useRef)(null),te=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),[ne,H]=fe({threshold:0}),h=m?.length<=1&&M,u=!te&&m?.length<=2&&M,k=s=>{switch(s){case 1440:return u?m?.length:4;case 1024:return u?m?.length:3;default:return u?m?.length:2.3}},B=()=>{(0,x.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:a?.map((s,R)=>{const o=s?.variants?.find(l=>l?.sku===s?.sku)||s?.variants?.[0];return{item_id:s?.sku||o?.sku,item_name:s?.name,item_variant:o?.name,price:o?.price,index:R+1}})}})},D=(s,R)=>{if(R){const w=a?.map?.(o=>({...o,isShowRecommended:!0}));S(w?.length?w||[]:[])}else if(Array.isArray(s)){const o=s?.map?.(l=>{const C=f?.products?.find(se=>se?.handle===l?.handle);if(C)return{sku:l.sku,isShowRecommended:!1,custom_name:l.custom_name,custom_description:l.custom_description,...C}})?.filter(l=>l);S(o?.length?o||[]:[])}else S([])};return(0,n.useImperativeHandle)(J,()=>I.current),(0,W.useExposure)(I,{componentType:N,componentName:O,componentTitle:t?.title,navigation:_}),(0,n.useEffect)(()=>{H&&a?.length&&!E.current&&(E.current=!0,B())},[H,a]),(0,n.useEffect)(()=>{if(!T.current){if(!T.current&&a?.length&&(T.current=!0),y){V(d?.[0]?.tab||""),D(d?.[0]?.data||[],d?.[0]?.isShowRecommendedTab);return}D(K,Z)}},[a]),(0,c.jsxs)("div",{ref:I,className:(0,A.cn)("shelf-display-wrap w-full",p,{"aiui-dark":t?.theme==="dark"}),children:[P&&(0,c.jsx)(q.default,{data:{title:P}}),y&&(0,c.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,c.jsx)($.default,{value:_,tabs:d,tabShape:U,onTabClick:s=>{if(V(s?.tab),D(s?.data||[],s?.isShowRecommendedTab),!s?.isShowRecommendedTab){(0,x.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:N,component_name:O,component_title:t?.title,component_position:1,navigation:s?.tab}});return}B()}})}),(0,c.jsx)("div",{ref:ne,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,c.jsx)(z.default,{data:{list:m,configuration:{...ee,event:i,isShowTag:X,isShowOriginalPrice:Y,target:F,itemLength:m?.length,isDisplayBackImage:G}},id:`ShelfDisplay${e}${_}`,className:`${y?"mt-6":""} !overflow-visible`,itemClassName:u?"flex-1":"",Slide:u?b.ShelfDisplayHorizontalItem:b.ShelfDisplayWrapItem,breakpoints:r||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:k()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:k(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:k(1440)}}})})]})});var ue=(0,Q.withLayout)(pe);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "recommendedData", "target", "tabId", "setTabId", "currentItems", "setCurrentItems", "viewRef", "isRecommend", "isView", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowRecommendedCard", "other", "gackViewEvent", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "Title", "TabSwitch", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_useExposure", "import_track", "import_react_responsive", "import_shelfDisplayItem", "componentType", "componentName", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "isDisplayGudgments", "isDisplayBackImage", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "Title", "TabSwitch", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { ContainerProps } from '../../types/props.js';
 export declare const PRICE_SYMBOL: any;
 export declare const languageTerritory: (locale: string) => string;
 export declare function formatPrice({ amount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
@@ -21,3 +22,76 @@ export declare function formatVariantPrice({ amount, baseAmount, currencyCode, l
     basePrice: string | undefined;
     discount: string | null;
 };
+type EventType = {
+    primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
+    secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
+};
+export interface ShelfDisplayItem {
+    id?: string;
+    /** 产品图片*/
+    img?: {
+        url: string;
+    };
+    handle?: string;
+    sku?: string;
+    /** 折扣后价格*/
+    price?: string;
+    title?: string;
+    /** 折扣前价格*/
+    basePrice?: string;
+    subTitle?: string;
+    /** 标签*/
+    tagItems?: string[];
+    tab?: string;
+    data?: ShelfDisplayItem[];
+    custom_name?: string;
+    custom_description?: string;
+}
+export type ShelfDisplayType = {
+    title?: string;
+    isShowTab?: boolean;
+    isShowTag?: boolean;
+    isShowRecommendedCard?: boolean;
+    isShowOriginalPrice?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    align?: 'left' | 'center' | 'right';
+    productsTab?: any[];
+    productsCard?: any[];
+    /** 卡片形状 */
+    itemShape?: 'round' | 'square';
+    /** 按钮形状 */
+    shape?: 'round' | 'square';
+    /** 标签页形状*/
+    tabShape?: 'rounded' | 'square';
+    /** 主按钮配置 */
+    primaryButton?: string;
+    primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
+    /** 副按钮配置 */
+    secondaryButton?: string;
+    secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
+    theme?: 'light' | 'dark';
+    containerProps?: ContainerProps;
+};
+export interface ShelfDisplayProps {
+    data: ShelfDisplayType;
+    buildData?: {
+        categories: any[];
+        products: any[];
+    };
+    recommendedData?: any[];
+    /** 按钮事件*/
+    event?: EventType;
+    className?: string;
+    key?: string;
+    target?: '_self' | '_blank';
+    breakpoints?: {
+        [key: number]: {
+            spaceBetween: number;
+            freeMode: boolean;
+            slidesPerView: number;
+        };
+    };
+    isDisplayGudgments?: boolean;
+    isDisplayBackImage?: boolean;
+}
+export {};

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},F=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of $(e))!y.call(r,i)&&i!==t&&o(r,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return r};var v=r=>F(o({},"__esModule",{value:!0}),r);var P={};D(P,{PRICE_SYMBOL:()=>c,formatPrice:()=>d,formatVariantPrice:()=>x,languageTerritory:()=>m});module.exports=v(P);const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},m=r=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"de-DE","eu-fr":"de-DE",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl","eu-de":"de-de"})[r]||"";function d({amount:r,currencyCode:e,locale:t,maximumFractionDigits:n,minimumFractionDigits:i,removeTrailingZeros:s=!1}){let u=new Intl.NumberFormat(m(t),{style:"currency",currency:e||"USD",minimumFractionDigits:n===0?0:i,maximumFractionDigits:n}).format(r);return["eu-de","eu-en","de","eu"].includes(t)&&(u=u?.toString()?.replace(/[\s]/g,"")),s&&(u=u.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),u}function x({amount:r,baseAmount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}){if(typeof Intl>"u")return{price:`${c[n]}${r}`,basePrice:`${c[n]}${e}`,discount:`${c[n]}${e-r||0}`};const u=e>r,f=new Intl.NumberFormat(m(n),{style:"percent"}),g=u?f.format((e-r)/e):null,l=d({amount:r,currencyCode:t,locale:n,removeTrailingZeros:a}),b=u?d({amount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}):void 0;return{price:l,basePrice:b,discount:g}}
+"use strict";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var h=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},S=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!D.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(n=b(e,i))||n.enumerable});return r};var v=r=>S(c({},"__esModule",{value:!0}),r);var P={};h(P,{PRICE_SYMBOL:()=>s,formatPrice:()=>l,formatVariantPrice:()=>E,languageTerritory:()=>d});module.exports=v(P);const s={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},d=r=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"de-DE","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl"})[r]||"";function l({amount:r,currencyCode:e,locale:t,maximumFractionDigits:n,minimumFractionDigits:i,removeTrailingZeros:o=!1}){let a=new Intl.NumberFormat(d(t),{style:"currency",currency:e||"USD",minimumFractionDigits:n===0?0:i,maximumFractionDigits:n}).format(r);return["eu-de","eu-en","de","eu"].includes(t)&&(a=a?.toString()?.replace(/[\s]/g,"")),o&&(a=a.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),a}function E({amount:r,baseAmount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:o,removeTrailingZeros:u}){if(typeof Intl>"u")return{price:`${s[n]}${r}`,basePrice:`${s[n]}${e}`,discount:`${s[n]}${e-r||0}`};const a=e>r,p=new Intl.NumberFormat(d(n),{style:"percent"}),m=a?p.format((e-r)/e):null,g=l({amount:r,currencyCode:t,locale:n,removeTrailingZeros:u}),y=a?l({amount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:o,removeTrailingZeros:u}):void 0;return{price:g,basePrice:y,discount:m}}
 //# sourceMappingURL=shelfDisplay.js.map

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'de-DE',\n    'eu-fr': 'de-DE',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    'eu-de': 'de-de',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,sBAAAC,IAAA,eAAAC,EAAAN,GACO,MAAME,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaG,EAAqBE,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,QAAS,OACX,GAAGA,CAAM,GAAK,GAET,SAASJ,EAAY,CAC1B,OAAAK,EACA,aAAAC,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBE,CAAM,EAAG,CACtE,MAAO,WACP,SAAUE,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASD,CAAM,IAChDM,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAAST,EAAmB,CACjC,OAAAI,EACA,WAAAM,EACA,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGV,EAAaK,CAAM,CAAC,GAAGC,CAAM,GACvC,UAAW,GAAGN,EAAaK,CAAM,CAAC,GAAGO,CAAU,GAC/C,SAAU,GAAGZ,EAAaK,CAAM,CAAC,GAAGO,EAAaN,GAAU,CAAC,EAC9D,EAGF,MAAMO,EAAcD,EAAaN,EAC3BQ,EAAiB,IAAI,KAAK,aAAaX,EAAkBE,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKU,EAAWF,EAAcC,EAAe,QAAQF,EAAaN,GAAUM,CAAU,EAAI,KAErFI,EAAQf,EAAY,CAAE,OAAAK,EAAQ,aAAAC,EAAc,OAAAF,EAAQ,oBAAAK,CAAoB,CAAC,EACzEO,EAAYJ,EACdZ,EAAY,CACV,OAAQW,EACR,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAM,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
+  "sourcesContent": ["import type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'de-DE',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,sBAAAC,IAAA,eAAAC,EAAAN,GAEO,MAAME,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaG,EAAqBE,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASJ,EAAY,CAC1B,OAAAK,EACA,aAAAC,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBE,CAAM,EAAG,CACtE,MAAO,WACP,SAAUE,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASD,CAAM,IAChDM,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAAST,EAAmB,CACjC,OAAAI,EACA,WAAAM,EACA,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGV,EAAaK,CAAM,CAAC,GAAGC,CAAM,GACvC,UAAW,GAAGN,EAAaK,CAAM,CAAC,GAAGO,CAAU,GAC/C,SAAU,GAAGZ,EAAaK,CAAM,CAAC,GAAGO,EAAaN,GAAU,CAAC,EAC9D,EAGF,MAAMO,EAAcD,EAAaN,EAC3BQ,EAAiB,IAAI,KAAK,aAAaX,EAAkBE,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKU,EAAWF,EAAcC,EAAe,QAAQF,EAAaN,GAAUM,CAAU,EAAI,KAErFI,EAAQf,EAAY,CAAE,OAAAK,EAAQ,aAAAC,EAAc,OAAAF,EAAQ,oBAAAK,CAAoB,CAAC,EACzEO,EAAYJ,EACdZ,EAAY,CACV,OAAQW,EACR,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAM,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
   "names": ["shelfDisplay_exports", "__export", "PRICE_SYMBOL", "formatPrice", "formatVariantPrice", "languageTerritory", "__toCommonJS", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice"]
 }

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare const ShelfDisplayWrapItem: ({ data, configuration }: {
+    data: any;
+    configuration?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ShelfDisplayHorizontalItem: ({ data, configuration }: {
+    data: any;
+    configuration?: any;
+}) => import("react/jsx-runtime").JSX.Element;