npm - @anker-in/headless-ui - Versions diffs - 1.3.18 → 1.3.19 - Mend

@anker-in/headless-ui 1.3.18 → 1.3.19

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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var ie=Object.create;var j=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,i)=>{for(var n in i)j(e,n,{get:i[n],enumerable:!0})},U=(e,i,n,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of ae(i))!re.call(e,u)&&u!==n&&j(e,u,{get:()=>i[u],enumerable:!(s=oe(i,u))||s.enumerable});return e};var W=(e,i,n)=>(n=e!=null?ie(ne(e)):{},U(i||!e||!e.__esModule?j(n,"default",{value:e,enumerable:!0}):n,e)),le=e=>U(j({},"__esModule",{value:!0}),e);var fe={};se(fe,{SceneShelfV2ProductCard:()=>N,default:()=>ue});module.exports=le(fe);var t=require("react/jsx-runtime"),r=W(require("react")),a=require("../../helpers/index.js"),c=require("../../components/index.js"),$=W(require("../Media/index.js")),D=require("swiper/react"),Q=require("swiper/modules"),ge=require("swiper/css"),he=require("swiper/css/navigation"),q=require("../../shared/Styles.js"),J=require("../../hooks/useGridRowCount.js"),X=require("../../hooks/useExposure.js"),Y=require("../../hooks/useViewItemList.js"),Z=require("../../shared/trackUrlRef.js"),A=require("../AiuiProvider/index.js"),V=require("../../shared/track.js");const ce="shelf",de="scene_shelf_v2",pe=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),me=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),N=r.memo(({product:e,isShowTag:i=!0,onImageClick:n,onProductImageClick:s,onLearnMore:u,onShopNow:P,onAddToCart:_,secondaryButtonText:y,secondaryButtonFun:b,primaryButtonText:w,primaryButtonFun:k,classNames:d,className:l,theme:B,index:p})=>{const{locale:L="us",trackingData:M}=(0,A.useAiuiContext)(),[z,I]=r.useState(!1),[C,R]=r.useState(!1),f=M?.pageGroup,x=r.useCallback(async(m,g)=>{if(!m)return;const T=g==="primary"?I:R;T(!0);try{switch(m){case"buyNow":await P?.(e);break;case"addCart":await _?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{T(!1)}},[u,P,_,e]),E=r.useCallback(()=>x(k,"primary"),[x,k]),H=r.useCallback(()=>x(b,"secondary"),[x,b]),v=r.useCallback(m=>{const g=s??n;!e.href&&g&&m.preventDefault(),g?.(e),(0,V.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:p}]})},[p,n,s,f,e]);return(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",l,d?.productCard,{"bg-container-secondary-0":B==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,a.getLocalizedPath)((0,Z.trackUrlRef)(e.href,f+"_"+ce+"_"+de),L),onClick:v,className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",d?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(c.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",(s??n)&&"cursor-pointer transition-opacity hover:opacity-80",d?.productCardImage),onClick:s??n?v:void 0,role:s??n?"button":void 0,tabIndex:s??n?0:void 0,"aria-label":s??n?`View ${e.title}`:void 0,children:(0,t.jsx)(c.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",d?.productCardTags),children:i&&e?.tags?.map((m,g)=>(0,t.jsx)(c.Badge,{variant:m.variant??"outline",size:"sm",className:"",children:m.label},g))}),(0,t.jsx)(c.Heading,{as:"h3",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",d?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(c.Text,{as:"p",size:1,className:(0,a.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",d?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",d?.productCardPriceWrapper),children:[(0,t.jsx)(c.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-current-price text-info-primary",d?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(c.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",d?.productCardOriginalPrice),children:e.originalPrice})]}),(y||w)&&(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",d?.productCardButtons),children:[y&&(0,t.jsx)(c.Button,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{H(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:y,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&b!=="learnMore",loading:C,children:y}),w&&(0,t.jsx)(c.Button,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{E(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:w,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&k!=="learnMore",loading:z,children:w})]})]})]})]})});N.displayName="SceneShelfV2.ProductCard";const K=r.forwardRef(({className:e,classNames:i={},data:n,onPlayClick:s,onImageClick:u,onProductImageClick:P,onLearnMore:_,onShopNow:y,onAddToCart:b,...w},k)=>{const{theme:d="light",sceneImage:l,productsTitle:B,products:p,secondaryButtonText:L,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,viewMoreLimit:C=2,copy:R}=n,f=r.useRef(null),x=r.useRef(null),E=r.useRef(null),[H,v]=r.useState(!1),[m,g]=r.useState(!1),{trackingData:T}=(0,A.useAiuiContext)();(0,X.useExposure)(x,{componentType:"image",componentName:"scene_shelf_banner"}),(0,Y.useViewItemList)(E,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:p.map((o,h)=>({item_id:o.sku??"",item_name:o.title,item_variant:o.variantId??"",price:o.currentPrice,index:h})),tabName:""});const O=(0,J.useGridRowCount)({rows:C??0,mobileCols:2}),G=r.useMemo(()=>[l?.pc,l?.desktop,l?.laptop,l?.pad,l?.mobile].some(o=>o?.mimeType==="video/mp4"),[l]),ee=r.useCallback(()=>{const o=f.current;o?o.paused?(o.play(),v(!0),s?.(!0)):(o.pause(),v(!1),s?.(!1)):s?.(!0),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:T?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:l?.pc?.id}})},[s,l?.pc?.id,T?.pageGroup]);return r.useEffect(()=>{const o=f.current;if(!o||!G)return;const h=new IntersectionObserver(S=>{S.forEach(F=>{F.isIntersecting?o.play().catch(te=>{console.warn("Video autoplay failed:",te)}):o.pause()})},{threshold:.5});return h.observe(o),()=>{h.disconnect()}},[]),(0,t.jsxs)("div",{...w,ref:k,className:(0,a.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":d==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",i?.media),ref:x,children:[(0,t.jsx)($.default,{pcImage:l?.pc,desktopImage:l?.desktop,laptopImage:l?.laptop,padImage:l?.pad,mobileImage:l?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>v(!0),onVideoPause:()=>v(!1),onVideoEnded:()=>v(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,a.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),G&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":H?"Pause video":"Play video",onClick:ee,className:(0,a.cn)("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",i?.mediaPlayButton),children:H?(0,t.jsx)(me,{}):(0,t.jsx)(pe,{})})})]}),(0,t.jsxs)("div",{ref:E,className:(0,a.cn)("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",i?.products),children:[B&&(0,t.jsx)(c.Heading,{as:"h2",size:3,className:(0,a.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:B}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const o=C!==void 0&&C>0&&p.length>O,h=o&&!m?p.slice(0,O):p;return(0,t.jsxs)(t.Fragment,{children:[h.map((S,F)=>(0,t.jsx)(N,{isShowTag:n.isShowTag??!0,product:S,onImageClick:u,onProductImageClick:P,onLearnMore:_,onShopNow:y,onAddToCart:b,secondaryButtonText:L,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:d,index:F},S.productKey)),o&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>g(S=>!S),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":m,children:[m?R?.viewLessLabel??"View Less":R?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,a.cn)("size-4 transition-transform",m&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(D.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Q.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:p.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:p.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:p.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:p.length>4?3.8:4}},children:p.map((o,h)=>(0,t.jsx)(D.SwiperSlide,{className:(0,a.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(N,{product:o,isShowTag:n.isShowTag??!0,onImageClick:u,onProductImageClick:P,onLearnMore:_,onShopNow:y,onAddToCart:b,secondaryButtonText:L,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:d,index:h})},o.productKey))})})})]})]})});K.displayName="SceneShelfV2";var ue=(0,q.withLayout)(K);
+"use strict";"use client";var ie=Object.create;var j=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(e,i)=>{for(var r in i)j(e,r,{get:i[r],enumerable:!0})},U=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of ae(i))!ne.call(e,u)&&u!==r&&j(e,u,{get:()=>i[u],enumerable:!(l=oe(i,u))||l.enumerable});return e};var W=(e,i,r)=>(r=e!=null?ie(re(e)):{},U(i||!e||!e.__esModule?j(r,"default",{value:e,enumerable:!0}):r,e)),le=e=>U(j({},"__esModule",{value:!0}),e);var fe={};se(fe,{SceneShelfV2ProductCard:()=>N,default:()=>ue});module.exports=le(fe);var t=require("react/jsx-runtime"),n=W(require("react")),a=require("../../helpers/index.js"),s=require("../../components/index.js"),$=W(require("../Media/index.js")),D=require("swiper/react"),Q=require("swiper/modules"),ve=require("swiper/css"),he=require("swiper/css/navigation"),q=require("../../shared/Styles.js"),J=require("../../hooks/useGridRowCount.js"),X=require("../../hooks/useExposure.js"),Y=require("../../hooks/useViewItemList.js"),Z=require("../../shared/trackUrlRef.js"),A=require("../AiuiProvider/index.js"),V=require("../../shared/track.js");const ce="shelf",de="scene_shelf_v2",pe=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),me=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),N=n.memo(({product:e,isShowTag:i=!0,onImageClick:r,onProductImageClick:l,onLearnMore:u,onShopNow:P,onAddToCart:k,secondaryButtonText:x,secondaryButtonFun:b,primaryButtonText:w,primaryButtonFun:_,classNames:c,className:d,theme:L,index:p})=>{const{locale:B="us",trackingData:M}=(0,A.useAiuiContext)(),[z,I]=n.useState(!1),[C,R]=n.useState(!1),f=M?.pageGroup,y=n.useCallback(async(m,v)=>{if(!m)return;const T=v==="primary"?I:R;T(!0);try{switch(m){case"buyNow":await P?.(e);break;case"addCart":await k?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{T(!1)}},[u,P,k,e]),E=n.useCallback(()=>y(_,"primary"),[y,_]),H=n.useCallback(()=>y(b,"secondary"),[y,b]),g=n.useCallback(m=>{const v=l??r;!e.href&&v&&m.preventDefault(),v?.(e),(0,V.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:p}]})},[p,r,l,f,e]);return(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",d,c?.productCard,{"bg-container-secondary-0":L==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,a.getLocalizedPath)((0,Z.trackUrlRef)(e.href,f+"_"+ce+"_"+de),B),onClick:g,className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",c?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",(l??r)&&"cursor-pointer transition-opacity hover:opacity-80",c?.productCardImage),onClick:l??r?g:void 0,role:l??r?"button":void 0,tabIndex:l??r?0:void 0,"aria-label":l??r?`View ${e.title}`:void 0,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",c?.productCardTags),children:i&&e?.tags?.map((m,v)=>(0,t.jsx)(s.Badge,{variant:m.variant??"outline",size:"sm",className:"",children:m.label},v))}),(0,t.jsx)(s.Heading,{as:"h3",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",c?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(s.Text,{as:"p",size:1,className:(0,a.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",c?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",c?.productCardPriceWrapper),children:[(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-current-price text-info-primary",c?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",c?.productCardOriginalPrice),children:e.originalPrice})]}),e?.priceLabel&&(0,t.jsx)(s.Text,{size:4,className:(0,a.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",c?.productCardPriceLabel),children:e.priceLabel}),(x||w)&&(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",c?.productCardButtons),children:[x&&(0,t.jsx)(s.Button,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{H(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&b!=="learnMore",loading:C,children:x}),w&&(0,t.jsx)(s.Button,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{E(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:w,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&_!=="learnMore",loading:z,children:w})]})]})]})]})});N.displayName="SceneShelfV2.ProductCard";const K=n.forwardRef(({className:e,classNames:i={},data:r,onPlayClick:l,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,...w},_)=>{const{theme:c="light",sceneImage:d,productsTitle:L,products:p,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,viewMoreLimit:C=2,copy:R}=r,f=n.useRef(null),y=n.useRef(null),E=n.useRef(null),[H,g]=n.useState(!1),[m,v]=n.useState(!1),{trackingData:T}=(0,A.useAiuiContext)();(0,X.useExposure)(y,{componentType:"image",componentName:"scene_shelf_banner"}),(0,Y.useViewItemList)(E,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:p.map((o,h)=>({item_id:o.sku??"",item_name:o.title,item_variant:o.variantId??"",price:o.currentPrice,index:h})),tabName:""});const O=(0,J.useGridRowCount)({rows:C??0,mobileCols:2}),G=n.useMemo(()=>[d?.pc,d?.desktop,d?.laptop,d?.pad,d?.mobile].some(o=>o?.mimeType==="video/mp4"),[d]),ee=n.useCallback(()=>{const o=f.current;o?o.paused?(o.play(),g(!0),l?.(!0)):(o.pause(),g(!1),l?.(!1)):l?.(!0),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:T?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:d?.pc?.id}})},[l,d?.pc?.id,T?.pageGroup]);return n.useEffect(()=>{const o=f.current;if(!o||!G)return;const h=new IntersectionObserver(S=>{S.forEach(F=>{F.isIntersecting?o.play().catch(te=>{console.warn("Video autoplay failed:",te)}):o.pause()})},{threshold:.5});return h.observe(o),()=>{h.disconnect()}},[]),(0,t.jsxs)("div",{...w,ref:_,className:(0,a.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":c==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",i?.media),ref:y,children:[(0,t.jsx)($.default,{pcImage:d?.pc,desktopImage:d?.desktop,laptopImage:d?.laptop,padImage:d?.pad,mobileImage:d?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>g(!0),onVideoPause:()=>g(!1),onVideoEnded:()=>g(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,a.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),G&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":H?"Pause video":"Play video",onClick:ee,className:(0,a.cn)("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",i?.mediaPlayButton),children:H?(0,t.jsx)(me,{}):(0,t.jsx)(pe,{})})})]}),(0,t.jsxs)("div",{ref:E,className:(0,a.cn)("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",i?.products),children:[L&&(0,t.jsx)(s.Heading,{as:"h2",size:3,className:(0,a.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:L}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const o=C!==void 0&&C>0&&p.length>O,h=o&&!m?p.slice(0,O):p;return(0,t.jsxs)(t.Fragment,{children:[h.map((S,F)=>(0,t.jsx)(N,{isShowTag:r.isShowTag??!0,product:S,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:F},S.productKey)),o&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>v(S=>!S),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":m,children:[m?R?.viewLessLabel??"View Less":R?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,a.cn)("size-4 transition-transform",m&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(D.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Q.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:p.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:p.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:p.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:p.length>4?3.8:4}},children:p.map((o,h)=>(0,t.jsx)(D.SwiperSlide,{className:(0,a.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(N,{product:o,isShowTag:r.isShowTag??!0,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:h})},o.productKey))})})})]})]})});K.displayName="SceneShelfV2";var ue=(0,q.withLayout)(K);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SceneShelfV2/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n  | 'root'\n  | 'media'\n  | 'mediaOverlay'\n  | 'mediaQuote'\n  | 'mediaPlayButton'\n  | 'products'\n  | 'productsTitle'\n  | 'productGrid'\n  | 'productCardSlideWrapper'\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTags'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceWrapper'\n  | 'productCardCurrentPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n  label: string\n  variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n  /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n  productKey: string\n  /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n  title: string\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 */\n  imageUrl: string\n  imageAlt: string\n  /**\n   * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n   */\n  href?: string\n  /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags?: SceneShelfV2Tag[]\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut?: boolean\n  /**\n   * sku\n   */\n  sku?: string\n  /**\n   * \u53D8\u4F53id\n   */\n  variantId?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n  /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n  viewMoreLabel?: string\n  /** \u6536\u8D77\u6807\u7B7E */\n  viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n  theme?: 'light' | 'dark'\n  isShowTag?: boolean\n  sceneImage: ResponsiveMedia\n  /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n  productsTitle?: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: SceneShelfV2Product[]\n  /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n  viewMoreLimit?: number\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  data: SceneShelfV2Data\n  /**\n   * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n   * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n   */\n  onPlayClick?: (isPlaying: boolean) => void\n  /** @deprecated Use `onProductImageClick` instead. */\n  onImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n  product: SceneShelfV2Product\n  isShowTag: boolean\n  onImageClick?: (product: SceneShelfV2Product) => void\n  onProductImageClick?: (product: SceneShelfV2Product) => void\n  onLearnMore?: (link: string) => void | Promise<void>\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n  className?: string\n  theme?: Theme\n  index?: number\n}\n\nconst ProductCardInner = React.memo(\n  ({\n    product,\n    isShowTag = true,\n    onImageClick,\n    onProductImageClick,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    secondaryButtonText,\n    secondaryButtonFun,\n    primaryButtonText,\n    primaryButtonFun,\n    classNames,\n    className,\n    theme,\n    index,\n  }: ProductCardInnerProps) => {\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const pageGroup = trackingData?.pageGroup\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product?.href ?? '')\n              break\n            default:\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [onLearnMore, onShopNow, onAddToCart, product]\n    )\n\n    const handlePrimary = React.useCallback(\n      () => handleButtonClick(primaryButtonFun, 'primary'),\n      [handleButtonClick, primaryButtonFun]\n    )\n    const handleSecondary = React.useCallback(\n      () => handleButtonClick(secondaryButtonFun, 'secondary'),\n      [handleButtonClick, secondaryButtonFun]\n    )\n\n    const handleImageClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        const callback = onProductImageClick ?? onImageClick\n        if (!product.href && callback) {\n          e.preventDefault()\n        }\n        callback?.(product)\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'select_item',\n          item_list_name: 'Scene_Shelf_2_Products',\n          page_group: pageGroup,\n          items: [\n            {\n              item_id: product.sku,\n              item_name: product.custom_name || product.title,\n              item_variant: product.variantId,\n              price: product.currentPrice,\n              index: index,\n            },\n          ],\n        })\n      },\n      [index, onImageClick, onProductImageClick, pageGroup, product]\n    )\n\n    return (\n      <div\n        className={cn(\n          'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n          className,\n          classNames?.productCard,\n          {\n            'bg-container-secondary-0': theme === 'dark',\n          }\n        )}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247 */}\n        {product.href ? (\n          <a\n            href={getLocalizedPath(\n              trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n              locale\n            )}\n            onClick={handleImageClick}\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            aria-label={`View ${product.title}`}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </a>\n        ) : (\n          <div\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n              (onProductImageClick ?? onImageClick) && 'cursor-pointer transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            onClick={(onProductImageClick ?? onImageClick) ? handleImageClick : undefined}\n            role={(onProductImageClick ?? onImageClick) ? 'button' : undefined}\n            tabIndex={(onProductImageClick ?? onImageClick) ? 0 : undefined}\n            aria-label={(onProductImageClick ?? onImageClick) ? `View ${product.title}` : undefined}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </div>\n        )}\n\n        {/* \u4EA7\u54C1\u4FE1\u606F */}\n        <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n          {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n          <div className=\"flex flex-col gap-2\">\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n                classNames?.productCardTags\n              )}\n            >\n              {isShowTag &&\n                product?.tags?.map((tag, idx) => (\n                  <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n                    {tag.label}\n                  </Badge>\n                ))}\n            </div>\n\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn(\n                'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n                classNames?.productCardTitle\n              )}\n            >\n              {product.custom_name || product.title}\n            </Heading>\n\n            {(product.custom_description || product.description) && (\n              <Text\n                as=\"p\"\n                size={1}\n                className={cn(\n                  'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n                  classNames?.productCardDescription\n                )}\n              >\n                {product.custom_description || product.description}\n              </Text>\n            )}\n          </div>\n\n          {/* \u4EF7\u683C + \u6309\u94AE */}\n          <div className=\"flex flex-col gap-2\">\n            {/* \u4EF7\u683C */}\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n                classNames?.productCardPriceWrapper\n              )}\n            >\n              <Heading\n                as=\"h6\"\n                size={2}\n                className={cn(\n                  'scene-shelf-v2-product-card-current-price text-info-primary',\n                  classNames?.productCardCurrentPrice\n                )}\n              >\n                {product.currentPrice}\n              </Heading>\n              {product.originalPrice && (\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn(\n                    'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n                    classNames?.productCardOriginalPrice\n                  )}\n                >\n                  {product.originalPrice}\n                </Heading>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u7EC4 */}\n            {(secondaryButtonText || primaryButtonText) && (\n              <div\n                className={cn(\n                  'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n                  classNames?.productCardButtons\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handleSecondary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handlePrimary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n  (\n    {\n      className,\n      classNames = {},\n      data,\n      onPlayClick,\n      onImageClick,\n      onProductImageClick,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      ...props\n    },\n    ref\n  ) => {\n    const {\n      theme = 'light',\n      sceneImage,\n      productsTitle,\n      products,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      viewMoreLimit = 2,\n      copy,\n    } = data\n    const videoRef = React.useRef<HTMLVideoElement>(null)\n    const mediaRef = React.useRef<HTMLDivElement>(null)\n    const productWrapperRef = React.useRef<HTMLDivElement>(null)\n    const [isPlaying, setIsPlaying] = React.useState(false)\n    const [isExpanded, setIsExpanded] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    useExposure(mediaRef, {\n      componentType: 'image',\n      componentName: 'scene_shelf_banner',\n    })\n\n    useViewItemList(productWrapperRef, {\n      componentType: 'video',\n      componentName: 'scene_shelf_banner',\n      itemListName: 'Scene_Shelf_2_Products',\n      items: products.map((item, index) => ({\n        item_id: item.sku ?? '',\n        item_name: item.title,\n        item_variant: item.variantId ?? '',\n        price: item.currentPrice,\n        index: index,\n      })),\n      tabName: '',\n    })\n\n    const visibleLimit = useGridRowCount({\n      rows: viewMoreLimit ?? 0,\n      mobileCols: 2,\n    })\n\n    const hasVideo = React.useMemo(\n      () =>\n        [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n          media => media?.mimeType === 'video/mp4'\n        ),\n      [sceneImage]\n    )\n\n    const handlePlayButtonClick = React.useCallback(() => {\n      const video = videoRef.current\n      if (video) {\n        if (video.paused) {\n          video.play()\n          setIsPlaying(true)\n          onPlayClick?.(true)\n        } else {\n          video.pause()\n          setIsPlaying(false)\n          onPlayClick?.(false)\n        }\n      } else {\n        onPlayClick?.(true)\n      }\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingData?.pageGroup,\n          component_type: 'video',\n          component_name: 'scene_shelf_banner',\n          position: 1,\n          creative_id: sceneImage?.pc?.id,\n        },\n      })\n    }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n    // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n    React.useEffect(() => {\n      const video = videoRef.current\n      if (!video || !hasVideo) return\n\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n              video.play().catch(error => {\n                // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n                console.warn('Video autoplay failed:', error)\n              })\n            } else {\n              // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n              video.pause()\n            }\n          })\n        },\n        {\n          threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n        }\n      )\n\n      observer.observe(video)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [])\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'scene-shelf-v2-root w-full overflow-hidden',\n          { 'aiui-dark': theme === 'dark' },\n          className,\n          classNames?.root\n        )}\n      >\n        {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n        <div\n          className={cn(\n            'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n            classNames?.media\n          )}\n          ref={mediaRef}\n        >\n          <Media\n            pcImage={sceneImage?.pc}\n            desktopImage={sceneImage?.desktop}\n            laptopImage={sceneImage?.laptop}\n            padImage={sceneImage?.pad}\n            mobileImage={sceneImage?.mobile}\n            className=\"size-full\"\n            videoClassName=\"absolute inset-0 size-full object-cover\"\n            videoRef={videoRef}\n            onVideoPlay={() => setIsPlaying(true)}\n            onVideoPause={() => setIsPlaying(false)}\n            onVideoEnded={() => setIsPlaying(false)}\n          />\n          {/* \u6E10\u53D8\u906E\u7F69 */}\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n              classNames?.mediaOverlay\n            )}\n          />\n\n          {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n          {hasVideo && (\n            <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n              <button\n                type=\"button\"\n                aria-label={isPlaying ? 'Pause video' : 'Play video'}\n                onClick={handlePlayButtonClick}\n                className={cn(\n                  'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n                  classNames?.mediaPlayButton\n                )}\n              >\n                {isPlaying ? <PauseIcon /> : <PlayIcon />}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n        <div\n          ref={productWrapperRef}\n          className={cn(\n            'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n            classNames?.products\n          )}\n        >\n          {productsTitle && (\n            <Heading\n              as=\"h2\"\n              size={3}\n              className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n              html={productsTitle}\n            />\n          )}\n\n          {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n          <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n            {(() => {\n              const shouldShowViewMore =\n                viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n              const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n              return (\n                <>\n                  {displayedProducts.map((product, index) => (\n                    <ProductCardInner\n                      key={product.productKey}\n                      isShowTag={data.isShowTag ?? true}\n                      product={product}\n                      onImageClick={onImageClick}\n                      onProductImageClick={onProductImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  ))}\n                  {shouldShowViewMore && (\n                    <div className=\"col-span-2 mt-6 flex justify-center\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setIsExpanded(prev => !prev)}\n                        className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n                        aria-expanded={isExpanded}\n                      >\n                        {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n                        <svg\n                          className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          viewBox=\"0 0 24 24\"\n                        >\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                        </svg>\n                      </button>\n                    </div>\n                  )}\n                </>\n              )\n            })()}\n          </div>\n\n          {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n          <div className=\"tablet:block hidden\">\n            <div className=\"relative\">\n              <Swiper\n                slidesPerView=\"auto\"\n                observer\n                observeParents\n                modules={[Mousewheel]}\n                mousewheel={{\n                  enabled: true,\n                  forceToAxis: true,\n                  sensitivity: 1,\n                }}\n                className=\"!overflow-visible\"\n                breakpoints={{\n                  768: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.3 : 2,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.8 : 3,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                  1920: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                }}\n              >\n                {products.map((product, index) => (\n                  <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n                    <ProductCardInner\n                      product={product}\n                      isShowTag={data.isShowTag ?? true}\n                      onImageClick={onImageClick}\n                      onProductImageClick={onProductImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n  | 'root'\n  | 'media'\n  | 'mediaOverlay'\n  | 'mediaQuote'\n  | 'mediaPlayButton'\n  | 'products'\n  | 'productsTitle'\n  | 'productGrid'\n  | 'productCardSlideWrapper'\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTags'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceWrapper'\n  | 'productCardCurrentPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardPriceLabel'\n  | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n  label: string\n  variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n  /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n  productKey: string\n  /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n  title: string\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 */\n  imageUrl: string\n  imageAlt: string\n  /**\n   * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n   */\n  href?: string\n  /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags?: SceneShelfV2Tag[]\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut?: boolean\n  /**\n   * sku\n   */\n  sku?: string\n  /**\n   * \u53D8\u4F53id\n   */\n  variantId?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\u6587\u672C\uFF08\u5982 \"Plus Member Price\"\uFF09 */\n  priceLabel?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n  /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n  viewMoreLabel?: string\n  /** \u6536\u8D77\u6807\u7B7E */\n  viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n  theme?: 'light' | 'dark'\n  isShowTag?: boolean\n  sceneImage: ResponsiveMedia\n  /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n  productsTitle?: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: SceneShelfV2Product[]\n  /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n  viewMoreLimit?: number\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  data: SceneShelfV2Data\n  /**\n   * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n   * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n   */\n  onPlayClick?: (isPlaying: boolean) => void\n  /** @deprecated Use `onProductImageClick` instead. */\n  onImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: SceneShelfV2Product) => void\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n  product: SceneShelfV2Product\n  isShowTag: boolean\n  onImageClick?: (product: SceneShelfV2Product) => void\n  onProductImageClick?: (product: SceneShelfV2Product) => void\n  onLearnMore?: (link: string) => void | Promise<void>\n  onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n  onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n  className?: string\n  theme?: Theme\n  index?: number\n}\n\nconst ProductCardInner = React.memo(\n  ({\n    product,\n    isShowTag = true,\n    onImageClick,\n    onProductImageClick,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    secondaryButtonText,\n    secondaryButtonFun,\n    primaryButtonText,\n    primaryButtonFun,\n    classNames,\n    className,\n    theme,\n    index,\n  }: ProductCardInnerProps) => {\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const pageGroup = trackingData?.pageGroup\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product?.href ?? '')\n              break\n            default:\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [onLearnMore, onShopNow, onAddToCart, product]\n    )\n\n    const handlePrimary = React.useCallback(\n      () => handleButtonClick(primaryButtonFun, 'primary'),\n      [handleButtonClick, primaryButtonFun]\n    )\n    const handleSecondary = React.useCallback(\n      () => handleButtonClick(secondaryButtonFun, 'secondary'),\n      [handleButtonClick, secondaryButtonFun]\n    )\n\n    const handleImageClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        const callback = onProductImageClick ?? onImageClick\n        if (!product.href && callback) {\n          e.preventDefault()\n        }\n        callback?.(product)\n        gaTrack({\n          event: 'ga4Event',\n          event_name: 'select_item',\n          item_list_name: 'Scene_Shelf_2_Products',\n          page_group: pageGroup,\n          items: [\n            {\n              item_id: product.sku,\n              item_name: product.custom_name || product.title,\n              item_variant: product.variantId,\n              price: product.currentPrice,\n              index: index,\n            },\n          ],\n        })\n      },\n      [index, onImageClick, onProductImageClick, pageGroup, product]\n    )\n\n    return (\n      <div\n        className={cn(\n          'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n          className,\n          classNames?.productCard,\n          {\n            'bg-container-secondary-0': theme === 'dark',\n          }\n        )}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247 */}\n        {product.href ? (\n          <a\n            href={getLocalizedPath(\n              trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n              locale\n            )}\n            onClick={handleImageClick}\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            aria-label={`View ${product.title}`}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </a>\n        ) : (\n          <div\n            className={cn(\n              'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n              (onProductImageClick ?? onImageClick) && 'cursor-pointer transition-opacity hover:opacity-80',\n              classNames?.productCardImage\n            )}\n            onClick={(onProductImageClick ?? onImageClick) ? handleImageClick : undefined}\n            role={(onProductImageClick ?? onImageClick) ? 'button' : undefined}\n            tabIndex={(onProductImageClick ?? onImageClick) ? 0 : undefined}\n            aria-label={(onProductImageClick ?? onImageClick) ? `View ${product.title}` : undefined}\n          >\n            <Picture\n              source={product.imageUrl}\n              alt={product.imageAlt}\n              className=\"size-full\"\n              imgClassName=\"object-contain\"\n            />\n          </div>\n        )}\n\n        {/* \u4EA7\u54C1\u4FE1\u606F */}\n        <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n          {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n          <div className=\"flex flex-col gap-2\">\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n                classNames?.productCardTags\n              )}\n            >\n              {isShowTag &&\n                product?.tags?.map((tag, idx) => (\n                  <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n                    {tag.label}\n                  </Badge>\n                ))}\n            </div>\n\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn(\n                'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n                classNames?.productCardTitle\n              )}\n            >\n              {product.custom_name || product.title}\n            </Heading>\n\n            {(product.custom_description || product.description) && (\n              <Text\n                as=\"p\"\n                size={1}\n                className={cn(\n                  'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n                  classNames?.productCardDescription\n                )}\n              >\n                {product.custom_description || product.description}\n              </Text>\n            )}\n          </div>\n\n          {/* \u4EF7\u683C + \u6309\u94AE */}\n          <div className=\"flex flex-col gap-2\">\n            {/* \u4EF7\u683C */}\n            <div\n              className={cn(\n                'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n                classNames?.productCardPriceWrapper\n              )}\n            >\n              <Heading\n                as=\"h6\"\n                size={2}\n                className={cn(\n                  'scene-shelf-v2-product-card-current-price text-info-primary',\n                  classNames?.productCardCurrentPrice\n                )}\n              >\n                {product.currentPrice}\n              </Heading>\n              {product.originalPrice && (\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn(\n                    'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n                    classNames?.productCardOriginalPrice\n                  )}\n                >\n                  {product.originalPrice}\n                </Heading>\n              )}\n            </div>\n\n            {product?.priceLabel && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n                  classNames?.productCardPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n\n            {/* \u6309\u94AE\u7EC4 */}\n            {(secondaryButtonText || primaryButtonText) && (\n              <div\n                className={cn(\n                  'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n                  classNames?.productCardButtons\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handleSecondary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n                    onClick={() => {\n                      handlePrimary()\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.title,\n                          component_description: '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n  (\n    {\n      className,\n      classNames = {},\n      data,\n      onPlayClick,\n      onImageClick,\n      onProductImageClick,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      ...props\n    },\n    ref\n  ) => {\n    const {\n      theme = 'light',\n      sceneImage,\n      productsTitle,\n      products,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      viewMoreLimit = 2,\n      copy,\n    } = data\n    const videoRef = React.useRef<HTMLVideoElement>(null)\n    const mediaRef = React.useRef<HTMLDivElement>(null)\n    const productWrapperRef = React.useRef<HTMLDivElement>(null)\n    const [isPlaying, setIsPlaying] = React.useState(false)\n    const [isExpanded, setIsExpanded] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    useExposure(mediaRef, {\n      componentType: 'image',\n      componentName: 'scene_shelf_banner',\n    })\n\n    useViewItemList(productWrapperRef, {\n      componentType: 'video',\n      componentName: 'scene_shelf_banner',\n      itemListName: 'Scene_Shelf_2_Products',\n      items: products.map((item, index) => ({\n        item_id: item.sku ?? '',\n        item_name: item.title,\n        item_variant: item.variantId ?? '',\n        price: item.currentPrice,\n        index: index,\n      })),\n      tabName: '',\n    })\n\n    const visibleLimit = useGridRowCount({\n      rows: viewMoreLimit ?? 0,\n      mobileCols: 2,\n    })\n\n    const hasVideo = React.useMemo(\n      () =>\n        [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n          media => media?.mimeType === 'video/mp4'\n        ),\n      [sceneImage]\n    )\n\n    const handlePlayButtonClick = React.useCallback(() => {\n      const video = videoRef.current\n      if (video) {\n        if (video.paused) {\n          video.play()\n          setIsPlaying(true)\n          onPlayClick?.(true)\n        } else {\n          video.pause()\n          setIsPlaying(false)\n          onPlayClick?.(false)\n        }\n      } else {\n        onPlayClick?.(true)\n      }\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingData?.pageGroup,\n          component_type: 'video',\n          component_name: 'scene_shelf_banner',\n          position: 1,\n          creative_id: sceneImage?.pc?.id,\n        },\n      })\n    }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n    // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n    React.useEffect(() => {\n      const video = videoRef.current\n      if (!video || !hasVideo) return\n\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n              video.play().catch(error => {\n                // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n                console.warn('Video autoplay failed:', error)\n              })\n            } else {\n              // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n              video.pause()\n            }\n          })\n        },\n        {\n          threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n        }\n      )\n\n      observer.observe(video)\n\n      return () => {\n        observer.disconnect()\n      }\n    }, [])\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'scene-shelf-v2-root w-full overflow-hidden',\n          { 'aiui-dark': theme === 'dark' },\n          className,\n          classNames?.root\n        )}\n      >\n        {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n        <div\n          className={cn(\n            'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n            classNames?.media\n          )}\n          ref={mediaRef}\n        >\n          <Media\n            pcImage={sceneImage?.pc}\n            desktopImage={sceneImage?.desktop}\n            laptopImage={sceneImage?.laptop}\n            padImage={sceneImage?.pad}\n            mobileImage={sceneImage?.mobile}\n            className=\"size-full\"\n            videoClassName=\"absolute inset-0 size-full object-cover\"\n            videoRef={videoRef}\n            onVideoPlay={() => setIsPlaying(true)}\n            onVideoPause={() => setIsPlaying(false)}\n            onVideoEnded={() => setIsPlaying(false)}\n          />\n          {/* \u6E10\u53D8\u906E\u7F69 */}\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n              classNames?.mediaOverlay\n            )}\n          />\n\n          {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n          {hasVideo && (\n            <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n              <button\n                type=\"button\"\n                aria-label={isPlaying ? 'Pause video' : 'Play video'}\n                onClick={handlePlayButtonClick}\n                className={cn(\n                  'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n                  classNames?.mediaPlayButton\n                )}\n              >\n                {isPlaying ? <PauseIcon /> : <PlayIcon />}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n        <div\n          ref={productWrapperRef}\n          className={cn(\n            'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n            classNames?.products\n          )}\n        >\n          {productsTitle && (\n            <Heading\n              as=\"h2\"\n              size={3}\n              className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n              html={productsTitle}\n            />\n          )}\n\n          {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n          <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n            {(() => {\n              const shouldShowViewMore =\n                viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n              const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n              return (\n                <>\n                  {displayedProducts.map((product, index) => (\n                    <ProductCardInner\n                      key={product.productKey}\n                      isShowTag={data.isShowTag ?? true}\n                      product={product}\n                      onImageClick={onImageClick}\n                      onProductImageClick={onProductImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  ))}\n                  {shouldShowViewMore && (\n                    <div className=\"col-span-2 mt-6 flex justify-center\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setIsExpanded(prev => !prev)}\n                        className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n                        aria-expanded={isExpanded}\n                      >\n                        {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n                        <svg\n                          className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          viewBox=\"0 0 24 24\"\n                        >\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                        </svg>\n                      </button>\n                    </div>\n                  )}\n                </>\n              )\n            })()}\n          </div>\n\n          {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n          <div className=\"tablet:block hidden\">\n            <div className=\"relative\">\n              <Swiper\n                slidesPerView=\"auto\"\n                observer\n                observeParents\n                modules={[Mousewheel]}\n                mousewheel={{\n                  enabled: true,\n                  forceToAxis: true,\n                  sensitivity: 1,\n                }}\n                className=\"!overflow-visible\"\n                breakpoints={{\n                  768: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.3 : 2,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 3 ? 2.8 : 3,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                  1920: {\n                    spaceBetween: 16,\n                    slidesPerView: products.length > 4 ? 3.8 : 4,\n                  },\n                }}\n              >\n                {products.map((product, index) => (\n                  <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n                    <ProductCardInner\n                      product={product}\n                      isShowTag={data.isShowTag ?? true}\n                      onImageClick={onImageClick}\n                      onProductImageClick={onProductImageClick}\n                      onLearnMore={onLearnMore}\n                      onShopNow={onShopNow}\n                      onAddToCart={onAddToCart}\n                      secondaryButtonText={secondaryButtonText}\n                      secondaryButtonFun={secondaryButtonFun}\n                      primaryButtonText={primaryButtonText}\n                      primaryButtonFun={primaryButtonFun}\n                      classNames={classNames}\n                      theme={theme}\n                      index={index}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
+  "mappings": "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",
   "names": ["SceneShelfV2_exports", "__export", "ProductCardInner", "SceneShelfV2_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Media", "import_react", "import_modules", "import_css", "import_navigation", "import_Styles", "import_useGridRowCount", "import_useExposure", "import_useViewItemList", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "PlayIcon", "PauseIcon", "product", "isShowTag", "onImageClick", "onProductImageClick", "onLearnMore", "onShopNow", "onAddToCart", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "classNames", "className", "theme", "index", "locale", "trackingData", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "pageGroup", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "handlePrimary", "handleSecondary", "handleImageClick", "e", "callback", "tag", "idx", "SceneShelfV2", "data", "onPlayClick", "props", "ref", "sceneImage", "productsTitle", "products", "viewMoreLimit", "copy", "videoRef", "mediaRef", "productWrapperRef", "isPlaying", "setIsPlaying", "isExpanded", "setIsExpanded", "item", "visibleLimit", "hasVideo", "media", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "Media", "shouldShowViewMore", "displayedProducts", "prev"]
 }

package/dist/cjs/biz-components/SceneShelfV3/ProductCard.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import type { Theme } from '../../types/props.js';
 /**
  * 语义化类名
  */
-export type SceneShelfV3SemanticName = 'root' | 'title' | 'description' | 'tabsList' | 'promotionalBar' | 'productGrid' | 'viewMore' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockTrack' | 'stockBar';
+export type SceneShelfV3SemanticName = 'root' | 'title' | 'description' | 'tabsList' | 'promotionalBar' | 'productGrid' | 'viewMore' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'priceWrapper' | 'originalPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton';
 /**
  * 库存展示模式
  */

package/dist/cjs/biz-components/SceneShelfV3/ProductCard.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var R=Object.create;var g=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of q(o))!I.call(e,n)&&n!==r&&g(e,n,{get:()=>o[n],enumerable:!(m=V(o,n))||m.enumerable});return e};var Q=(e,o,r)=>(r=e!=null?R(K(e)):{},T(o||!e||!e.__esModule?g(r,"default",{value:e,enumerable:!0}):r,e)),W=e=>T(g({},"__esModule",{value:!0}),e);var Y={};J(Y,{ProductCard:()=>_,default:()=>X});module.exports=W(Y);var t=require("react/jsx-runtime"),p=Q(require("react")),i=require("../../helpers/index.js"),a=require("../../components/index.js"),B=require("../../shared/trackUrlRef.js"),f=require("../../shared/track.js"),L=require("../AiuiProvider/index.js");const _=p.forwardRef(({product:e,className:o,showTags:r=!0,onLearnMore:m,onShopNow:n,onAddToCart:h,classNames:s,secondaryButtonText:u,secondaryButtonFun:x,primaryButtonText:y,primaryButtonFun:k,showOriginalPrice:z,copy:D,onProductImageClick:v,theme:M="light",locale:P="us",index:d=0,tabName:w},H)=>{const[O,j]=p.useState(!1),[A,G]=p.useState(!1),{trackingData:U}=(0,L.useAiuiContext)(),c=U?.pageGroup,C=!e.soldOut,S=p.useCallback(async(l,b)=>{if(!l)return;const N=b==="primary"?j:G;N(!0);try{switch(l){case"buyNow":await n?.(e);break;case"addCart":await h?.(e);break;case"learnMore":await m?.(e.href);break}}finally{N(!1)}},[e,n,h,m]),E=p.useMemo(()=>(0,i.getLocalizedPath)((0,B.trackUrlRef)(e.href,c+"_shelf_scene_shelf_v3"),P),[e.href,c,P]),F=p.useCallback(()=>{v?.(e),(0,f.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_3_Products",page_group:c,items:[{item_id:e.sku,item_name:e.title,item_variant:e.id,price:e.currentPrice,index:d}],tab_name:w,position:d})},[v,e,c,d,w]);return(0,t.jsx)(a.Card,{ref:H,className:(0,i.cn)("bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white",o,s?.productCard,{"hover:bg-container-secondary-0 ":M==="dark"}),children:(0,t.jsxs)(a.CardContent,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[(0,t.jsx)("div",{className:"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden",children:(0,t.jsx)("a",{onClick:F,...!v&&{href:E},rel:"noreferrer",children:(0,t.jsx)(a.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),(0,t.jsx)("div",{className:"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1",children:r&&e.tags?.map((l,b)=>(0,t.jsx)(a.Badge,{size:"sm",variant:l.variant||"outline",className:(0,i.cn)(l.variant==="promotional"?"ml-2":""),promotionalType:l.promotionalType,children:l.label},b))}),(0,t.jsxs)("div",{className:"flex h-full flex-1 grow flex-col justify-between",children:[(0,t.jsxs)("div",{className:"mb-4",children:[(0,t.jsx)(a.Heading,{as:"h3",size:2,className:(0,i.cn)("text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]",s?.productTitle),html:e.custom_name||e.title}),(e?.custom_description||e?.description)&&(0,t.jsx)(a.Text,{size:2,className:(0,i.cn)("text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",s?.productDescription),html:e.custom_description||e.description})]}),e?.priceLabel&&C&&(0,t.jsx)(a.Text,{size:4,className:(0,i.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",s?.productPriceLabel),children:e.priceLabel}),(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:(0,i.cn)("mb-2",s?.productPrice),children:(0,t.jsx)("div",{className:"flex items-baseline gap-2",children:C?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.currentPrice}),z&&e.originalPrice&&(0,t.jsx)(a.Heading,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):(0,t.jsx)(a.Heading,{size:2,className:"text-info-tertiary",children:D?.outOfStockLabel??"Sold Out"})})}),(0,t.jsxs)("div",{className:(0,i.cn)("lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2",s?.buttonGroup),children:[u&&(0,t.jsx)(a.Button,{variant:"secondary",size:"base",className:(0,i.cn)("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",s?.secondaryButton),onClick:()=>{S(x,"secondary"),(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:u,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&x!=="learnMore",loading:A,children:u}),y&&(0,t.jsx)(a.Button,{variant:"primary",size:"base",className:(0,i.cn)("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",s?.primaryButton),onClick:()=>{S(k,"primary"),(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:y,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&k!=="learnMore",loading:O,children:y})]})]})]})]})})});_.displayName="SceneShelfV3.ProductCard";var X=_;
+"use strict";"use client";var R=Object.create;var g=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var I=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of q(o))!W.call(e,s)&&s!==r&&g(e,s,{get:()=>o[s],enumerable:!(m=V(o,s))||m.enumerable});return e};var J=(e,o,r)=>(r=e!=null?R(K(e)):{},T(o||!e||!e.__esModule?g(r,"default",{value:e,enumerable:!0}):r,e)),Q=e=>T(g({},"__esModule",{value:!0}),e);var Y={};I(Y,{ProductCard:()=>_,default:()=>X});module.exports=Q(Y);var t=require("react/jsx-runtime"),c=J(require("react")),i=require("../../helpers/index.js"),a=require("../../components/index.js"),B=require("../../shared/trackUrlRef.js"),f=require("../../shared/track.js"),L=require("../AiuiProvider/index.js");const _=c.forwardRef(({product:e,className:o,showTags:r=!0,onLearnMore:m,onShopNow:s,onAddToCart:h,classNames:n,secondaryButtonText:u,secondaryButtonFun:x,primaryButtonText:y,primaryButtonFun:k,showOriginalPrice:z,copy:D,onProductImageClick:v,theme:M="light",locale:P="us",index:d=0,tabName:w},H)=>{const[O,j]=c.useState(!1),[A,G]=c.useState(!1),{trackingData:U}=(0,L.useAiuiContext)(),p=U?.pageGroup,C=!e.soldOut,S=c.useCallback(async(l,b)=>{if(!l)return;const N=b==="primary"?j:G;N(!0);try{switch(l){case"buyNow":await s?.(e);break;case"addCart":await h?.(e);break;case"learnMore":await m?.(e.href);break}}finally{N(!1)}},[e,s,h,m]),E=c.useMemo(()=>(0,i.getLocalizedPath)((0,B.trackUrlRef)(e.href,p+"_shelf_scene_shelf_v3"),P),[e.href,p,P]),F=c.useCallback(()=>{v?.(e),(0,f.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_3_Products",page_group:p,items:[{item_id:e.sku,item_name:e.title,item_variant:e.id,price:e.currentPrice,index:d}],tab_name:w,position:d})},[v,e,p,d,w]);return(0,t.jsx)(a.Card,{ref:H,className:(0,i.cn)("bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white",o,n?.productCard,{"hover:bg-container-secondary-0 ":M==="dark"}),children:(0,t.jsxs)(a.CardContent,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[(0,t.jsx)("div",{className:"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden",children:(0,t.jsx)("a",{onClick:F,...!v&&{href:E},rel:"noreferrer",children:(0,t.jsx)(a.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),(0,t.jsx)("div",{className:"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1",children:r&&e.tags?.map((l,b)=>(0,t.jsx)(a.Badge,{size:"sm",variant:l.variant||"outline",className:(0,i.cn)(l.variant==="promotional"?"ml-2":""),promotionalType:l.promotionalType,children:l.label},b))}),(0,t.jsxs)("div",{className:"flex h-full flex-1 grow flex-col justify-between",children:[(0,t.jsxs)("div",{className:"mb-4",children:[(0,t.jsx)(a.Heading,{as:"h3",size:2,className:(0,i.cn)("text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]",n?.productTitle),html:e.custom_name||e.title}),(e?.custom_description||e?.description)&&(0,t.jsx)(a.Text,{size:2,className:(0,i.cn)("text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",n?.productDescription),html:e.custom_description||e.description})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:(0,i.cn)("mb-2",n?.productPrice),children:(0,t.jsx)("div",{className:(0,i.cn)("flex items-baseline gap-2",n?.priceWrapper),children:C?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.currentPrice}),z&&e.originalPrice&&(0,t.jsx)(a.Heading,{size:2,className:(0,i.cn)("text-info-tertiary line-through",n?.originalPrice),as:"h6",children:e.originalPrice})]}):(0,t.jsx)(a.Heading,{size:2,className:"text-info-tertiary",children:D?.outOfStockLabel??"Sold Out"})})}),e?.priceLabel&&C&&(0,t.jsx)(a.Text,{size:4,className:(0,i.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",n?.productPriceLabel),children:e.priceLabel}),(0,t.jsxs)("div",{className:(0,i.cn)("lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2",n?.buttonGroup),children:[u&&(0,t.jsx)(a.Button,{variant:"secondary",size:"base",className:(0,i.cn)("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",n?.secondaryButton),onClick:()=>{S(x,"secondary"),(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:p||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:u,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&x!=="learnMore",loading:A,children:u}),y&&(0,t.jsx)(a.Button,{variant:"primary",size:"base",className:(0,i.cn)("laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap",n?.primaryButton),onClick:()=>{S(k,"primary"),(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:p||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:y,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&k!=="learnMore",loading:O,children:y})]})]})]})]})})});_.displayName="SceneShelfV3.ProductCard";var X=_;
 //# sourceMappingURL=ProductCard.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SceneShelfV3/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n  | 'stockTrack'\n  | 'stockBar'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u6807\u7B7E */}\n            {product?.priceLabel && availableForSale && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                  classNames?.productPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className=\"flex items-baseline gap-2\">\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                          {product.originalPrice}\n                        </Heading>\n                      )}\n                    </>\n                  ) : (\n                    <Heading size={2} className=\"text-info-tertiary\">\n                      {copy?.outOfStockLabel ?? 'Sold Out'}\n                    </Heading>\n                  )}\n                </div>\n              </div>\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'priceWrapper'\n  | 'originalPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className={cn('flex items-baseline gap-2', classNames?.priceWrapper)}>\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading\n                          size={2}\n                          className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n                          as=\"h6\"\n                        >\n                          {product.originalPrice}\n                        </Heading>\n                      )}\n                    </>\n                  ) : (\n                    <Heading size={2} className=\"text-info-tertiary\">\n                      {copy?.outOfStockLabel ?? 'Sold Out'}\n                    </Heading>\n                  )}\n                </div>\n              </div>\n\n              {product?.priceLabel && availableForSale && (\n                <Text\n                  size={4}\n                  className={cn(\n                    'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                    classNames?.productPriceLabel\n                  )}\n                >\n                  {product.priceLabel}\n                </Text>\n              )}\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
+  "mappings": "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",
   "names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_trackUrlRef", "import_track", "import_AiuiProvider", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "theme", "locale", "index", "tabName", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "trackingData", "pageGroup", "availableForSale", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "trackedHref", "onProductClick", "tag"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var pe=Object.create;var T=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var _e=(t,s)=>{for(var i in s)T(t,i,{get:s[i],enumerable:!0})},A=(t,s,i,h)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of de(s))!ge.call(t,c)&&c!==i&&T(t,c,{get:()=>s[c],enumerable:!(h=ue(s,c))||h.enumerable});return t};var R=(t,s,i)=>(i=t!=null?pe(he(t)):{},A(s||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),we=t=>A(T({},"__esModule",{value:!0}),t);var ke={};_e(ke,{default:()=>ve});module.exports=we(ke);var o=require("react/jsx-runtime"),n=R(require("react")),q=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),S=require("./shelfDisplayItem.js");const be="image",ye="product_shelf",Te=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",Se=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,$=n.default.forwardRef(({key:t,data:s,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:M=!1,isDisplayBackImage:J=!1,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee,...te},se)=>{const{productsTab:m=[],productsCard:x=[],title:P,isShowTab:w=!0,tabShape:ne="square",isShowTag:ae=!1,isShowOriginalPrice:re=!0,isShowRecommendedCard:C=!1,...ie}=s,[b,H]=(0,n.useState)(""),[f,v]=(0,n.useState)([]),L=(0,n.useRef)(!1),k=(0,n.useRef)(!1),V=(0,n.useRef)(null),oe=(0,n.useRef)(Se()),le=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[ce,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&M,g=!le&&f?.length<=2&&M,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));v(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const z=h?.products?.find(fe=>fe?.handle===a?.handle);if(z)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...z}})?.filter(a=>a);v(l?.length?l||[]:[])}else v([])};(0,n.useImperativeHandle)(se,()=>V.current),(0,n.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,n.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),w){const e=m?.find(r=>r?.tab===b)||m?.[0];H(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(x,C)}},[p]),(0,n.useEffect)(()=>{if(w){const e=m?.find(r=>r?.tab===b)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(x,C)},[h]);const me=Te(b),N=`${oe.current}-${me}`;return(0,o.jsxs)("div",{ref:V,...te,className:(0,q.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":s?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),w&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const r=m?.find(u=>u?.tab===e);if(r){if(H(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:be,component_name:ye,component_title:s?.title,component_position:1,navigation:e}});return}E()}},shape:ne==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:ce,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...ie,event:i,isShowTag:ae,isShowOriginalPrice:re,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee}},id:N,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?S.ShelfDisplayHorizontalItem:S.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});$.displayName="ShelfDisplay";var ve=(0,Q.withLayout)($);
+"use strict";"use client";var he=Object.create;var T=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var ye=(t,s)=>{for(var i in s)T(t,i,{get:s[i],enumerable:!0})},A=(t,s,i,h)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of _e(s))!be.call(t,c)&&c!==i&&T(t,c,{get:()=>s[c],enumerable:!(h=ge(s,c))||h.enumerable});return t};var R=(t,s,i)=>(i=t!=null?he(we(t)):{},A(s||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),Te=t=>A(T({},"__esModule",{value:!0}),t);var De={};ye(De,{default:()=>Re});module.exports=Te(De);var o=require("react/jsx-runtime"),n=R(require("react")),q=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),S=require("./shelfDisplayItem.js");const Se="image",ve="product_shelf",ke=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",Ie=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,$=n.default.forwardRef(({key:t,data:s,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:M=!1,isDisplayBackImage:J=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},re)=>{const{productsTab:m=[],productsCard:x=[],title:P,isShowTab:w=!0,tabShape:ie="square",isShowTag:oe=!1,isShowOriginalPrice:le=!0,isShowRecommendedCard:C=!1,...ce}=s,[b,H]=(0,n.useState)(""),[f,v]=(0,n.useState)([]),L=(0,n.useRef)(!1),k=(0,n.useRef)(!1),V=(0,n.useRef)(null),me=(0,n.useRef)(Ie()),fe=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[pe,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&M,g=!fe&&f?.length<=2&&M,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));v(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const z=h?.products?.find(de=>de?.handle===a?.handle);if(z)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...z}})?.filter(a=>a);v(l?.length?l||[]:[])}else v([])};(0,n.useImperativeHandle)(re,()=>V.current),(0,n.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,n.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),w){const e=m?.find(r=>r?.tab===b)||m?.[0];H(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(x,C)}},[p]),(0,n.useEffect)(()=>{if(w){const e=m?.find(r=>r?.tab===b)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(x,C)},[h]);const ue=ke(b),N=`${me.current}-${ue}`;return(0,o.jsxs)("div",{ref:V,...ae,className:(0,q.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":s?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),w&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const r=m?.find(u=>u?.tab===e);if(r){if(H(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Se,component_name:ve,component_title:s?.title,component_position:1,navigation:e}});return}E()}},shape:ie==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:pe,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...ce,event:i,isShowTag:oe,isShowOriginalPrice:le,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne}},id:N,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?S.ShelfDisplayHorizontalItem:S.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});$.displayName="ShelfDisplay";var Re=(0,Q.withLayout)($);
 //# 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 { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\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      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\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    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<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                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  custom_bg_image: item?.custom_bg_image || '',\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    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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n                onAddCart,\n                onBuyNow,\n                onLearnMore,\n                formatPrice,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !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\nShelfDisplay.displayName = 'ShelfDisplay'\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_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\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      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n      renderOriginalPrice,\n      renderPriceLabel,\n      renderPrice,\n      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\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    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<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                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  custom_bg_image: item?.custom_bg_image || '',\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    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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n                renderOriginalPrice,\n                renderPriceLabel,\n                renderPrice,\n                onAddCart,\n                onBuyNow,\n                onLearnMore,\n                formatPrice,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !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\nShelfDisplay.displayName = 'ShelfDisplay'\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_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
 }