npm - @anker-in/headless-ui - Versions diffs - 1.3.7 → 1.3.9 - Mend

@anker-in/headless-ui 1.3.7 → 1.3.9

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as we,jsx as t,jsxs as h}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as L,useMemo as Y,useState as P,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as k}from"../../../../../helpers/index.js";import{GalleryTabType as I}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:o,variant:d,selectedOptions:C}=q(),m=pe({product:o,variant:d}),[f,w]=P(null),A=V(null),b=d?.metafields?.component?.custom_media_list;let n,x,S,G;b&&b?.available?(n=b?.product||[],x=b?.scenarios||[],S=b?.keyFeatures||[],G=b?.video||[]):(n=m?.productList,x=m?.sceneList,S=m?.keyFeaturesList,G=m?.videoList);const s=Y(()=>[...n,...x,...G],[n,x,G]),p={productList:n,sceneList:x,keyFeaturesList:S,videoList:G},a=Y(()=>{const i=o?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],c=d?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const E=c?.find(F=>g?.galleries===F?.galleries);let D=p[g?.galleries]||[];if(E?.images&&Array.isArray(E.images)&&E.images.length>0){const F=E.images.map(u=>{const _=[];if(u.image_1920&&u.image_1920.trim()&&_.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&_.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&_.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&_.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&_.push(`${u.image_390} 767`),_.length>0){const U=_.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[d?.payload,p,o?.payload]),[y,l]=P(a?.[0]),[r,N]=P(0),[v,T]=P(null),M=L(()=>{const i=(r+1)%a.length;N(i),l(a[i]),T(0)},[r,a]),z=L(()=>{const i=r===0?a.length-1:r-1;N(i),l(a[i]);const c=a[i]?.galleries||[];T(c.length-1)},[r,a]);R(()=>{r!=null&&requestAnimationFrame(()=>{A.current?.scrollToTab(r)})},[r]),R(()=>{l(a[0]),N(0)},[d?.id]);const H=(i,c)=>{switch(i?.galleryTabType){case I.GALLERY_IMAGE_MAIN:return t(j,{...i,index:c,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case I.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:c,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case I.GALLERY_IMAGE_SCENE:return t(j,{...i,index:c,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case I.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:h(de,{className:"relative",value:y?.tabValue,defaultValue:a?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((i,c)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,c)},i.tabValue))}),t(ie,{ref:A,galleryTabs:a,activeGalleryTab:y,setActiveGalleryTab:l,setActiveTabIndex:N,setTargetSlideIndex:T})]})})},ie=Q((e,o)=>{const{galleryTabs:d,activeGalleryTab:C,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:w}=e,{product:A}=q(),b=V(null),n=V(new Map),x=L(s=>{if(b.current){const p=b.current,a=s.currentTarget,y=a.offsetLeft-p.offsetWidth/2+a.offsetWidth/2;p.scrollTo({left:y,behavior:"smooth"})}},[]),S=L((s,p,a)=>{m(p),f(a),w(0),x(s)},[m,f,w,x]),G=L(s=>{if(b.current&&d[s]){const p=b.current,a=d[s],y=n.current.get(a.tabValue);if(y){const l=y.offsetLeft-p.offsetWidth/2+y.offsetWidth/2;p.scrollTo({left:l,behavior:"smooth"})}}},[d]);return re(o,()=>({scrollToTab:G})),h("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:b,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:d?.map((s,p)=>t(ue,{ref:a=>{a?n.current.set(s.tabValue,a):n.current.delete(s.tabValue)},className:k("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",s.tabValue===C?.tabValue&&"bg-white"),onClick:a=>S(a,s,p),value:s.tabValue,children:s.tabLabel},s.tabValue+p))})}),t("div",{className:"desktop:gap-2 desktop:flex hidden",children:A.metafields?.global?.specifications&&h(we,{children:[t(me,{})," | ",t(be,{})]})})]})});ie.displayName="ProductGalleryTab";const j=Q((e,o)=>{const{locale:d="us",copyWriting:C}=Z(),{variant:m,totalSavings:f}=q(),w=V(null),[A,b]=P(null),[n,x]=P(null),[S,G]=P([]),s=V(null),p=Y(()=>{if(e?.galleryTabType===I.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===I.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,I.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),a=L(()=>{n?.isBeginning?e.onPrevTab?.():n?.slidePrev()},[n,e]),y=L(()=>{n?.isEnd?e.onNextTab?.():n?.slideNext()},[n,e]);return R(()=>{n&&e.targetSlideIndex&&(n.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[n,e.targetSlideIndex,e]),R(()=>{const l=()=>{if(!e?.comment?.content||!s.current)return;const v=s.current;v.textContent="Test";const M=v.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let c="";for(let g=0;g<H.length;g++){const E=H[g],D=c?`${c} ${E}`:E;v.textContent=D,v.offsetHeight>M?c?(i.push(c),c=E):(i.push(E),c=""):c=D}c&&i.push(c),v.textContent="",G(i)},r=requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}),N=()=>{l()};return window.addEventListener("resize",te(N,500)),()=>{cancelAnimationFrame(r),window.removeEventListener("resize",te(N,500))}},[e?.comment?.content]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:o,className:"h-full",onSwiper:x,onTouchEnd:(l,r)=>{l.isBeginning&&l.swipeDirection==="prev"?a():l.isEnd&&l.swipeDirection==="next"&&y()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:A},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((l,r)=>{const N=`${e.tabValue}-${r}`,v=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:r+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=l?._responsiveSource||l?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:v,exposureKey:N,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:T,alt:l?.image?.altText,className:k("h-full",p),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+r)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:d})} ${C?.off}`}),t("div",{className:k("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:t(ae,{className:k("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:k("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:y,children:t(le,{className:k("tablet:size-10 lg-desktop:size-12")})}),h("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((l,r)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:l.image?.url,alt:l.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+r))})}),!e?.index&&h("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),h("div",{className:"relative max-w-[528px]",children:[t("div",{ref:s,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:S.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:S.length>0?S.map((l,r)=>t(B,{children:t(J,{html:l,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},r+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const o=V(null);return R(()=>{const d=o.current;d&&(d.muted=!0,d.play().catch(()=>{}))},[]),h("video",{ref:o,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[o,d]=P(null),C=L(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),m=L(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:d,onTouchEnd:(f,w)=>{f.isBeginning&&f.swipeDirection==="prev"?C():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,w)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+w))}),t("div",{className:k("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:C,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:k("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Be=e=>t("div",{children:"3D View"});var He=fe(he);export{He as default};
+import{Fragment as we,jsx as t,jsxs as h}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as L,useMemo as Y,useState as P,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as k}from"../../../../../helpers/index.js";import{GalleryTabType as A}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:o,variant:d,selectedOptions:C}=q(),m=pe({product:o,variant:d}),[f,w]=P(null),I=V(null),b=d?.metafields?.component?.custom_media_list;let s,x,S,G;b&&b?.available?(s=b?.product||[],x=b?.scenarios||[],S=b?.keyFeatures||[],G=b?.video||[]):(s=m?.productList,x=m?.sceneList,S=m?.keyFeaturesList,G=m?.videoList);const c=Y(()=>[...s,...x,...G],[s,x,G]),p={productList:s,sceneList:x,keyFeaturesList:S,videoList:G},a=Y(()=>{const i=o?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],n=d?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const E=Array.isArray(n)?n?.find(F=>g?.galleries===F?.galleries):{};let D=p[g?.galleries]||[];if(E?.images&&Array.isArray(E.images)&&E.images.length>0){const F=E.images.map(u=>{const _=[];if(u.image_1920&&u.image_1920.trim()&&_.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&_.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&_.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&_.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&_.push(`${u.image_390} 767`),_.length>0){const U=_.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[d?.payload,p,o?.payload]),[y,l]=P(a?.[0]),[r,N]=P(0),[v,T]=P(null),M=L(()=>{const i=(r+1)%a.length;N(i),l(a[i]),T(0)},[r,a]),z=L(()=>{const i=r===0?a.length-1:r-1;N(i),l(a[i]);const n=a[i]?.galleries||[];T(n.length-1)},[r,a]);R(()=>{r!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(r)})},[r]),R(()=>{l(a[0]),N(0)},[d?.id]);const H=(i,n)=>{switch(i?.galleryTabType){case A.GALLERY_IMAGE_MAIN:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_SCENE:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:h(de,{className:"relative",value:y?.tabValue,defaultValue:a?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((i,n)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,n)},i.tabValue))}),t(ie,{ref:I,galleryTabs:a,activeGalleryTab:y,setActiveGalleryTab:l,setActiveTabIndex:N,setTargetSlideIndex:T})]})})},ie=Q((e,o)=>{const{galleryTabs:d,activeGalleryTab:C,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:w}=e,{product:I}=q(),b=V(null),s=V(new Map),x=L(c=>{if(b.current){const p=b.current,a=c.currentTarget,y=a.offsetLeft-p.offsetWidth/2+a.offsetWidth/2;p.scrollTo({left:y,behavior:"smooth"})}},[]),S=L((c,p,a)=>{m(p),f(a),w(0),x(c)},[m,f,w,x]),G=L(c=>{if(b.current&&d[c]){const p=b.current,a=d[c],y=s.current.get(a.tabValue);if(y){const l=y.offsetLeft-p.offsetWidth/2+y.offsetWidth/2;p.scrollTo({left:l,behavior:"smooth"})}}},[d]);return re(o,()=>({scrollToTab:G})),h("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:b,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:d?.map((c,p)=>t(ue,{ref:a=>{a?s.current.set(c.tabValue,a):s.current.delete(c.tabValue)},className:k("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",c.tabValue===C?.tabValue&&"bg-white"),onClick:a=>S(a,c,p),value:c.tabValue,children:c.tabLabel},c.tabValue+p))})}),t("div",{className:"desktop:gap-2 desktop:flex hidden",children:I.metafields?.global?.specifications&&h(we,{children:[t(me,{})," | ",t(be,{})]})})]})});ie.displayName="ProductGalleryTab";const j=Q((e,o)=>{const{locale:d="us",copyWriting:C}=Z(),{variant:m,totalSavings:f}=q(),w=V(null),[I,b]=P(null),[s,x]=P(null),[S,G]=P([]),c=V(null),p=Y(()=>{if(e?.galleryTabType===A.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===A.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,A.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),a=L(()=>{s?.isBeginning?e.onPrevTab?.():s?.slidePrev()},[s,e]),y=L(()=>{s?.isEnd?e.onNextTab?.():s?.slideNext()},[s,e]);return R(()=>{s&&e.targetSlideIndex&&(s.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[s,e.targetSlideIndex,e]),R(()=>{const l=()=>{if(!e?.comment?.content||!c.current)return;const v=c.current;v.textContent="Test";const M=v.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let n="";for(let g=0;g<H.length;g++){const E=H[g],D=n?`${n} ${E}`:E;v.textContent=D,v.offsetHeight>M?n?(i.push(n),n=E):(i.push(E),n=""):n=D}n&&i.push(n),v.textContent="",G(i)},r=requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}),N=()=>{l()};return window.addEventListener("resize",te(N,500)),()=>{cancelAnimationFrame(r),window.removeEventListener("resize",te(N,500))}},[e?.comment?.content]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:o,className:"h-full",onSwiper:x,onTouchEnd:(l,r)=>{l.isBeginning&&l.swipeDirection==="prev"?a():l.isEnd&&l.swipeDirection==="next"&&y()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((l,r)=>{const N=`${e.tabValue}-${r}`,v=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:r+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=l?._responsiveSource||l?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:v,exposureKey:N,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:T,alt:l?.image?.altText,className:k("h-full",p),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+r)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:d})} ${C?.off}`}),t("div",{className:k("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:t(ae,{className:k("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:k("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:y,children:t(le,{className:k("tablet:size-10 lg-desktop:size-12")})}),h("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((l,r)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:l.image?.url,alt:l.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+r))})}),!e?.index&&h("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),h("div",{className:"relative max-w-[528px]",children:[t("div",{ref:c,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:S.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:S.length>0?S.map((l,r)=>t(B,{children:t(J,{html:l,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},r+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const o=V(null);return R(()=>{const d=o.current;d&&(d.muted=!0,d.play().catch(()=>{}))},[]),h("video",{ref:o,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[o,d]=P(null),C=L(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),m=L(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:d,onTouchEnd:(f,w)=>{f.isBeginning&&f.swipeDirection==="prev"?C():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,w)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+w))}),t("div",{className:k("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:C,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:k("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Be=e=>t("div",{children:"3D View"});var He=fe(he);export{He as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"desktop:gap-2 desktop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductGalleryTab.displayName = 'ProductGalleryTab'\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative max-w-[528px]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\n\nconst VideoItem = ({ src }: { src: string | undefined }) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n    // Fix: React \u4E0D\u4F1A\u6B63\u786E\u628A muted \u6620\u5C04\u5230 DOM attribute\uFF0C\u9700\u624B\u52A8\u8BBE\u7F6E\n    // \u5426\u5219\u6D4F\u89C8\u5668\u5224\u5B9A\u4E3A\u6709\u58F0\u89C6\u9891\uFF0Cautoplay \u88AB\u7B56\u7565\u963B\u6B62\n    video.muted = true\n    video.play().catch(() => {\n      // autoplay \u88AB\u963B\u6B62\u65F6\u9759\u9ED8\u5904\u7406\uFF08\u7528\u6237\u672A\u4EA4\u4E92\u7684\u60C5\u51B5\uFF09\n    })\n  }, [])\n\n  return (\n    <video\n      ref={videoRef}\n      playsInline\n      autoPlay\n      loop\n      muted\n      controls\n      className=\"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover\"\n    >\n      <track kind=\"captions\" />\n      <source src={src} type=\"video/mp4\" />\n      <source src={src} type=\"video/webm\" />\n      <source src={src} type=\"video/ogg\" />\n    </video>\n  )\n}\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full bg-info-primary\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <VideoItem src={item?.sources?.[0]?.url} />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = Array.isArray(variantProductGallery) ? variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        ) : {}\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"desktop:gap-2 desktop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductGalleryTab.displayName = 'ProductGalleryTab'\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative max-w-[528px]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\n\nconst VideoItem = ({ src }: { src: string | undefined }) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n    // Fix: React \u4E0D\u4F1A\u6B63\u786E\u628A muted \u6620\u5C04\u5230 DOM attribute\uFF0C\u9700\u624B\u52A8\u8BBE\u7F6E\n    // \u5426\u5219\u6D4F\u89C8\u5668\u5224\u5B9A\u4E3A\u6709\u58F0\u89C6\u9891\uFF0Cautoplay \u88AB\u7B56\u7565\u963B\u6B62\n    video.muted = true\n    video.play().catch(() => {\n      // autoplay \u88AB\u963B\u6B62\u65F6\u9759\u9ED8\u5904\u7406\uFF08\u7528\u6237\u672A\u4EA4\u4E92\u7684\u60C5\u51B5\uFF09\n    })\n  }, [])\n\n  return (\n    <video\n      ref={videoRef}\n      playsInline\n      autoPlay\n      loop\n      muted\n      controls\n      className=\"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover\"\n    >\n      <track kind=\"captions\" />\n      <source src={src} type=\"video/mp4\" />\n      <source src={src} type=\"video/webm\" />\n      <source src={src} type=\"video/ogg\" />\n    </video>\n  )\n}\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full bg-info-primary\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <VideoItem src={item?.sources?.[0]?.url} />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "debounce", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "VideoItem", "src", "videoRef", "video", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as T}from"react/jsx-runtime";import{Button as L,Text as c}from"../../../../../components/index.js";import{useCallback as h,useEffect as z,useMemo as v,useState as g}from"react";import{cn as B}from"../../../../../helpers/index.js";import D from"../../PaidShipping/ShippingMethod.js";import{ShippingPolicyModal as E}from"../../PaidShipping/ShippingPolicyModal.js";import{isWeightAvailable as b}from"../../PaidShipping/utils.js";import"../../PaidShipping/LearnMore.js";import{useBizProductContext as I}from"../../../BizProductProvider.js";import{withLayout as O}from"../../../../../shared/Styles.js";const V=({metafields:i,productList:u,onShippingInfoChange:y,variant:m,className:P})=>{const{isLogin:_,openSignInPopup:k}=I(),[C,x]=g(!1),[M,N]=g(!1),[A,S]=g(null),f=v(()=>u.reduce((e,t)=>e+(t?.variant?.weight||0),0),[u]),r=h((e,t,n)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!b(t,e),price:e.price,subtitle:e.subtitle,tag:n!==0?i?.memberOnly:"",error:b(t,e)?"":i.overWeightError}),[i?.memberOnly,i.overWeightError]),l=v(()=>{const e=i?.list?.map((t,n)=>r(t,f,n));return e?.reduce((t,n)=>{const s=e.filter(p=>p.code==n.code);let a;return s.every(p=>p.disabled)?a=s[s.length-1]:a=s.find(p=>!p.disabled),t.find(p=>a.id===p.id)?t:[...t,a]},[])},[r,i?.list,f]),d=h(e=>{y({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[y]);z(()=>{if(i?.list?.length>0&&!M){const e=r(i?.list[0],0,0);S(e),d(e),N(!0)}},[r,i?.list,d,M]);const w=h(e=>{e.disabled||(S(e),d(e))},[_,l,m.sku,d,k]);return T("div",{id:"ipc-product-paid-shipping",className:B(P),children:[T("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:[o(c,{className:"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]",html:i?.title}),o(L,{variant:"link",onClick:()=>{x(!0)},className:"lg-desktop:text-[16px] text-[14px] font-bold !p-0",children:i?.policy})]}),o("div",{className:"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden",children:l.map((e,t)=>o(D,{index:t,item:e,active:A?.code===e.code,toggleShipping:()=>w(e),currencyCode:m.price.currencyCode,metafields:i,className:"w-full laptop:h-[100px] h-[80px]"},t))}),l.find(e=>e?.error)&&o(c,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:l.find(e=>e.error)?.error,as:"p"}),i?.seeAvailableArea&&o(c,{as:"div",className:"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline",html:i?.seeAvailableArea}),i?.shippingPolicy&&o(E,{data:i?.shippingPolicy,onClose:()=>x(!1),open:C})]})};var U=O(V);export{U as default};
+import{jsx as o,jsxs as T}from"react/jsx-runtime";import{Button as L,Text as c}from"../../../../../components/index.js";import{useCallback as g,useEffect as z,useMemo as v,useState as h}from"react";import{cn as B}from"../../../../../helpers/index.js";import D from"../../PaidShipping/ShippingMethod.js";import{ShippingPolicyModal as E}from"../../PaidShipping/ShippingPolicyModal.js";import{isWeightAvailable as b}from"../../PaidShipping/utils.js";import"../../PaidShipping/LearnMore.js";import{useBizProductContext as I}from"../../../BizProductProvider.js";import{withLayout as O}from"../../../../../shared/Styles.js";const V=({metafields:i,productList:u,onShippingInfoChange:y,variant:m,className:P})=>{const{isLogin:_,openSignInPopup:k}=I(),[C,M]=h(!1),[S,N]=h(!1),[A,x]=h(null),f=v(()=>u.reduce((e,t)=>e+(t?.variant?.weight||0),0),[u]),r=g((e,t,n)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!b(t,e),price:e.price,subtitle:e.subtitle,tag:n!==0?i?.memberOnly:"",error:b(t,e)?"":i.overWeightError}),[i?.memberOnly,i.overWeightError]),d=v(()=>{const e=i?.list?.map((t,n)=>r(t,f,n));return e?.reduce((t,n)=>{const s=e.filter(p=>p.code==n.code);let a;return s.every(p=>p.disabled)?a=s[s.length-1]:a=s.find(p=>!p.disabled),t.find(p=>a.id===p.id)?t:[...t,a]},[])},[r,i?.list,f]),l=g(e=>{y({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[y]);z(()=>{if(i?.list?.length>0&&!S){const e=r(i?.list[0],0,0);x(e),l(e),N(!0)}},[r,i?.list,l,S]);const w=g(e=>{e.disabled||(x(e),l(e))},[_,d,m.sku,l,k]);return T("div",{id:"ipc-product-paid-shipping",className:B(P),children:[T("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:[o(c,{className:"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]",html:i?.title}),o(L,{variant:"link",onClick:()=>{M(!0)},className:"lg-desktop:text-[16px] text-[14px] font-bold !p-0",children:i?.policy})]}),o("div",{className:"lg-desktop:mt-4 mt-3 grid grid-cols-1 desktop:grid-cols-1 laptop:grid-cols-2 gap-3 overflow-hidden",children:d.map((e,t)=>o(D,{index:t,item:e,active:A?.code===e.code,toggleShipping:()=>w(e),currencyCode:m.price.currencyCode,metafields:i,className:"w-full laptop:h-[100px] h-[80px]"},t))}),d.find(e=>e?.error)&&o(c,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:d.find(e=>e.error)?.error,as:"p"}),i?.seeAvailableArea&&o(c,{as:"div",className:"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline",html:i?.seeAvailableArea}),i?.shippingPolicy&&o(E,{data:i?.shippingPolicy,onClose:()=>M(!1),open:C})]})};var U=O(V);export{U as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.tsx"],
-  "sourcesContent": ["import { Button, Text } from '../../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../../types/product.js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../../helpers/index.js'\n\nimport ShippingMethod from '../../PaidShipping/ShippingMethod.js'\nimport { ShippingPolicyModal } from '../../PaidShipping/ShippingPolicyModal.js'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from '../../PaidShipping/type.js'\nimport { isWeightAvailable } from '../../PaidShipping/utils.js'\nimport LearnMore from '../../PaidShipping/LearnMore.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\n\nconst ProductPaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError]\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n      normalizedMethod(method, weight, index)\n    )\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange]\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n  )\n\n  return (\n    <div id=\"ipc-product-paid-shipping\" className={cn(className)}>\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]\"\n          html={metafields?.title}\n        ></Text>\n        <Button\n          variant=\"link\"\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold !p-0\"\n        >\n          {metafields?.policy}\n        </Button>\n      </div>\n      <div className=\"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:h-[100px] h-[80px]\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        {/* <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full\"\n        /> */}\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default withLayout(ProductPaidShipping)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Button, Text } from '../../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../../types/product.js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../../helpers/index.js'\n\nimport ShippingMethod from '../../PaidShipping/ShippingMethod.js'\nimport { ShippingPolicyModal } from '../../PaidShipping/ShippingPolicyModal.js'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from '../../PaidShipping/type.js'\nimport { isWeightAvailable } from '../../PaidShipping/utils.js'\nimport LearnMore from '../../PaidShipping/LearnMore.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\n\nconst ProductPaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError]\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n      normalizedMethod(method, weight, index)\n    )\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange]\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n  )\n\n  return (\n    <div id=\"ipc-product-paid-shipping\" className={cn(className)}>\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]\"\n          html={metafields?.title}\n        ></Text>\n        <Button\n          variant=\"link\"\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold !p-0\"\n        >\n          {metafields?.policy}\n        </Button>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 grid grid-cols-1 desktop:grid-cols-1 laptop:grid-cols-2 gap-3 overflow-hidden\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:h-[100px] h-[80px]\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        {/* <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full\"\n        /> */}\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default withLayout(ProductPaidShipping)\n"],
+  "mappings": "AA4HM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5HN,OAAS,UAAAC,EAAQ,QAAAC,MAAY,qCAE7B,OAAS,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QAC1D,OAAS,MAAAC,MAAU,kCAEnB,OAAOC,MAAoB,uCAC3B,OAAS,uBAAAC,MAA2B,4CAEpC,OAAS,qBAAAC,MAAyB,8BAClC,MAAsB,kCACtB,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,cAAAC,MAAkB,kCAE3B,MAAMC,EAAsB,CAAC,CAC3B,WAAAC,EACA,YAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,UAAAC,CACF,IAMM,CACJ,KAAM,CAAE,QAAAC,EAAS,gBAAAC,CAAgB,EAAIT,EAAqB,EACpD,CAACU,EAAyBC,CAA0B,EAAIhB,EAAS,EAAK,EACtE,CAACiB,EAAMC,CAAO,EAAIlB,EAAS,EAAK,EAEhC,CAACmB,EAAgBC,CAAiB,EAAIpB,EAAoC,IAAI,EAE9EqB,EAAStB,EAAQ,IACdU,EAAY,OAAO,CAACa,EAAKC,IAAYD,GAAOC,GAAS,SAAS,QAAU,GAAI,CAAC,EACnF,CAACd,CAAW,CAAC,EAEVe,EAAmB3B,EACvB,CAAC4B,EAA4BJ,EAAgBK,KACpC,CACL,GAAI,GAAGD,EAAO,MAAM,KAAKA,EAAO,KAAK,GACrC,KAAMA,EAAO,OACb,KAAMA,EAAO,OACb,MAAOA,EAAO,MACd,SAAU,CAACrB,EAAkBiB,EAAQI,CAAM,EAC3C,MAAOA,EAAO,MACd,SAAUA,EAAO,SACjB,IAAKC,IAAU,EAAIlB,GAAY,WAAa,GAC5C,MAAQJ,EAAkBiB,EAAQI,CAAM,EAAiC,GAA7BjB,EAAW,eACzD,GAEF,CAACA,GAAY,WAAYA,EAAW,eAAe,CACrD,EAEMmB,EAAO5B,EAAQ,IAAM,CACzB,MAAM6B,EAAuCpB,GAAY,MAAM,IAAI,CAACiB,EAA4BC,IAC9FF,EAAiBC,EAAQJ,EAAQK,CAAK,CACxC,EAEA,OAAOE,GAAgB,OAAO,CAACC,EAA4BJ,IAA+B,CAExF,MAAMK,EAAiBF,EAAe,OAAQG,GAA0BA,EAAE,MAAQN,EAAO,IAAI,EAC7F,IAAIO,EAUJ,OARIF,EAAe,MAAOC,GAA0BA,EAAE,QAAQ,EAC5DC,EAAkBF,EAAeA,EAAe,OAAS,CAAC,EAG1DE,EAAkBF,EAAe,KAAMC,GAA0B,CAACA,EAAE,QAAQ,EAGxDF,EAAK,KAAME,GAA0BC,EAAgB,KAAOD,EAAE,EAAE,EAI7EF,EAFA,CAAC,GAAGA,EAAMG,CAAe,CAIpC,EAAG,CAAC,CAAyB,CAC/B,EAAG,CAACR,EAAkBhB,GAAY,KAAMa,CAAM,CAAC,EAEzCY,EAA2BpC,EAC9BsB,GAAuC,CACtCT,EAAqB,CACnB,uBAAwBS,EAAe,KACvC,uBAAwBA,EAAe,IACzC,CAAC,CACH,EACA,CAACT,CAAoB,CACvB,EAEAZ,EAAU,IAAM,CAEd,GAAIU,GAAY,MAAM,OAAS,GAAK,CAACS,EAAM,CACzC,MAAMiB,EAAyBV,EAAiBhB,GAAY,KAAK,CAAC,EAAG,EAAG,CAAC,EACzEY,EAAkBc,CAAsB,EACxCD,EAAyBC,CAAsB,EAC/ChB,EAAQ,EAAI,CACd,CACF,EAAG,CAACM,EAAkBhB,GAAY,KAAMyB,EAA0BhB,CAAI,CAAC,EAEvE,MAAMkB,EAAiBtC,EACpB4B,GAA+B,CAC1BA,EAAO,WAGXL,EAAkBK,CAAM,EACxBQ,EAAyBR,CAAM,EAYjC,EAEA,CAACZ,EAASc,EAAMhB,EAAQ,IAAKsB,EAA0BnB,CAAe,CACxE,EAEA,OACEpB,EAAC,OAAI,GAAG,4BAA4B,UAAWO,EAAGW,CAAS,EACzD,UAAAlB,EAAC,OAAI,UAAU,wDACb,UAAAD,EAACG,EAAA,CACC,UAAU,4EACV,KAAMY,GAAY,MACnB,EACDf,EAACE,EAAA,CACC,QAAQ,OACR,QAAS,IAAM,CACbqB,EAA2B,EAAI,CACjC,EACA,UAAU,oDAET,SAAAR,GAAY,OACf,GACF,EACAf,EAAC,OAAI,UAAU,qGACZ,SAAAkC,EAAK,IAAI,CAACF,EAA4BC,IACrCjC,EAACS,EAAA,CAEC,MAAOwB,EACP,KAAMD,EACN,OAAQN,GAAgB,OAASM,EAAO,KACxC,eAAgB,IAAMU,EAAeV,CAAM,EAC3C,aAAcd,EAAQ,MAAM,aAC5B,WAAYH,EACZ,UAAU,oCAPLkB,CAQP,CACD,EAOH,EACCC,EAAK,KAAMF,GAA+BA,GAAQ,KAAK,GACtDhC,EAACG,EAAA,CACC,UAAU,uEACV,KAAM+B,EAAK,KAAMF,GAA+BA,EAAO,KAAK,GAAG,MAC/D,GAAG,IACL,EAGDjB,GAAY,kBACXf,EAACG,EAAA,CACC,GAAG,MACH,UAAU,sHACV,KAAMY,GAAY,iBACpB,EAEDA,GAAY,gBACXf,EAACU,EAAA,CACC,KAAMK,GAAY,eAClB,QAAS,IAAMQ,EAA2B,EAAK,EAC/C,KAAMD,EACR,GAEJ,CAEJ,EAEA,IAAOqB,EAAQ9B,EAAWC,CAAmB",
   "names": ["jsx", "jsxs", "Button", "Text", "useCallback", "useEffect", "useMemo", "useState", "cn", "ShippingMethod", "ShippingPolicyModal", "isWeightAvailable", "useBizProductContext", "withLayout", "ProductPaidShipping", "metafields", "productList", "onShippingInfoChange", "variant", "className", "isLogin", "openSignInPopup", "openShippingPolicyModal", "setOpenShippingPolicyModal", "init", "setInit", "selectedMethod", "setSelectedMethod", "weight", "acc", "product", "normalizedMethod", "method", "index", "list", "normalizedList", "prev", "sameTypeMethod", "m", "availableMethod", "handleChangeShippingInfo", "standardShippingMethod", "toggleShipping", "ProductPaidShipping_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Text as s,Button as F,Grid as ee,GridItem as q,Picture as A,Heading as te}from"../../../../../components/index.js";import{useBizProductContext as j}from"../../../BizProductProvider.js";import{useEffect as ae,useMemo as B,useState as ne}from"react";import{formatPrice as N}from"../../../utils/index.js";import{useAiuiContext as S}from"../../../../AiuiProvider/index.js";import K from"decimal.js";import{replaceTemplate as oe}from"../../../utils/textFormat.js";import{withLayout as le}from"../../../../../shared/Styles.js";import{ExposureDetector as ie}from"../../../../../components/index.js";import{gaTrack as re}from"../../../../../shared/track.js";const ce=()=>{const{locale:x="us",copyWriting:a}=S(),{product:p,variant:o,finalPrice:g,comparePrice:f,coupon:P,selectedOptions:d,selectedVariants:v,totalSavings:r,onAddToCart:D,onBuyNow:E,savingDetail:b,checkedBundle:k,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:u,setSavingDetail:$,addToCartLoading:O,buyNowLoading:G,profile:L,addOrder:I,setAddOrder:w}=j(),_=B(()=>p?.payload?.components?.find(l=>l.componentKey==="ProductSummary")?.data||{},[p?.payload]),[z]=v,T=B(()=>{const l=k?.variants.find(y=>y.variant.sku===z?.sku),i=new K(z?.price?.amount||0).minus(l?.price||z?.price?.amount).toNumber();let m=new K(z?.price?.amount||0);L?.email&&(m=m.minus(b?.member||0));const h=m.minus(b?.coupon).minus(i).toNumber();return parseFloat(h.toFixed(2))},[z,k,L,b?.member,b?.coupon]),{bundleVariant:V,giftVariant:R,exchangeVariant:W}=se()||{},[c,C]=ne();ae(()=>{C({bundle:t.bundle?.value?void 0:V,gift:t.gift?.value?void 0:R,exchange:t.exchange?.value?void 0:W})},[V,R,W,t]);const M=B(()=>{const l=[];return I&&I.forEach((i,m)=>{t[i]?.value&&l.push({type:i,key:`${i}-${m}`})}),l},[I,t]),U=B(()=>{const l=d?.quantity||"",i=d?.color||d?.colour||d?.couleur||"";return`${l&&i?`${l} | ${i}`:l||i}`},[d?.quantity,d?.color,d?.colour,d?.couleur]),X=B(()=>{const l=o?.payload?.components?.find(Z=>Z.componentKey==="ProductSummary")?.data||{},{image_1920:i,image_1440:m,image_1024:h,image_768:y,image_390:Y}=l?.thumbnail||{};return(l?.thumbnail?`${i} 1920, ${m} 1440, ${h} 1024, ${y} 768, ${Y} 390`:o.image?.url)||o.image?.url},[o.image?.url,o?.payload?.components]);return o.availableForSale?e("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:e("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:n(ee,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[n(q,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[e(te,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:_?.readyWant?.replace?.("{title}",p?.title)}),e("div",{className:"",children:e(A,{source:X,className:"lg-desktop:aspect-[644/320]  laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),n(q,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[n("div",{children:[n("div",{className:"flex flex-col gap-4",children:[e(ie,{exposureKey:"listing_selector",onExposure:()=>{re({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${o.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:o.image?.url||p?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:p.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:U})]})]}),n("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:N({amount:T,currencyCode:o.price.currencyCode,locale:x})}),T<o?.price?.amount&&e(s,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:N({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:x})})]})]})}),M.map(({type:l,key:i})=>l==="gift"&&t?.gift?.value?e(Q,{giftOperation:m=>{u?.({...t,gift:{value:void 0,canOperate:!0}}),C?.({...c,gift:m}),w?.(h=>h.filter(y=>y!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},i):l==="bundle"&&t?.bundle?.value?e(J,{bundleOperation:m=>{u?.({...t,bundle:{value:void 0,canOperate:!0}}),C?.({...c,bundle:m}),w?.(h=>h.filter(y=>y!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},i):l==="exchange"&&t?.exchange?.value?e(H,{exchangeOperation:m=>{u?.({...t,exchange:{value:void 0,canOperate:!0}}),C?.({...c,exchange:m}),w?.(h=>h.filter(y=>y!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},i):null)]}),(c?.bundle||c?.gift||c?.exchange)&&n("div",{className:"laptop-md:mt-8 mt-6",children:[e(s,{className:"laptop-md:text-[18px] text-sm font-bold",html:_?.recommendBuy}),n("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:[c?.exchange&&e(H,{exchangeOperation:l=>{u?.({...t,exchange:{value:l,canOperate:!0}}),C?.({...c,exchange:void 0}),w?.(i=>[...i,"exchange"])},canOperate:t?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&e(J,{bundleOperation:l=>{$?.({...b,exchangePurchase:0}),u?.({...t,bundle:{value:l,canOperate:!0}}),C?.({...c,bundle:void 0}),w?.(i=>[...i,"bundle"])},canOperate:t?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&e(Q,{giftOperation:l=>{u?.({...t,gift:{value:l,canOperate:!0}}),C?.({...c,gift:void 0}),w?.(i=>[...i,"gift"])},canOperate:t?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),n("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${oe(a?.totalPrice||"",{amount:N({amount:parseFloat(g.toFixed(2)),currencyCode:o.price.currencyCode,locale:x})})}`}),r>0&&e(s,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:N({amount:f,currencyCode:o.price.currencyCode,locale:x})}),n("div",{className:"mt-4 flex justify-end gap-3",children:[e(F,{size:"lg",variant:"secondary",loading:O,className:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onClick:()=>D?.(),children:a?.addToCart}),e(F,{size:"lg",loading:G,variant:"primary",className:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onClick:()=>E?.(),children:a?.shopNow})]})]})]})]})})}):null},se=()=>{const{bundle:x,variant:a,checkedBundle:p,freeGift:o,checkedGift:g,exchangePurchase:f,checkedExchangePurchase:P}=j();let d,v,r;const{bundleList:D}=x||{},{giftList:E=[]}=o||{},{giftList:b=[]}=f||{},k=D?.filter(O=>O.variants.slice(1,O.variants.length).every(G=>G.variant.availableForSale))||[],[t]=k;d=p||t;const[u]=E?.filter(O=>O.availableForSale)??[];v=g||u;const[$]=b?.filter(O=>O.availableForSale)??[];return r=P||$,{bundleVariant:d,giftVariant:v,exchangeVariant:r}},J=({bundleOperation:x,bundleListItem:a,canOperate:p,status:o})=>{const{locale:g="us",copyWriting:f}=S(),{variant:P,setCheckedBundle:d}=j(),v=a?.variants.filter(r=>r.variant.sku!==P.sku);return e("div",{className:"",children:v?.map(r=>n("div",{className:"flex items-center justify-between gap-4",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:r?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),e("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:r.variant.product.title})})]}),n("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:N({amount:r?.price||0,locale:g,currencyCode:r.variant?.price?.currencyCode||""})}),r.price<r.variant.price.amount&&e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:N({amount:r.variant.price.amount||0,locale:g,currencyCode:r.variant?.price?.currencyCode||""})})]}),p&&e(F,{size:"icon",variant:"link",onClick:()=>{d?.(o?void 0:a),x?.(a)},className:"size-auto shrink-0 underline",children:o?f?.remove:f?.add})]})]},r.variant.id))})},Q=({giftOperation:x,gift:a,status:p,canOperate:o})=>{const{locale:g="us",copyWriting:f}=S(),{freeGift:P,setCheckedGift:d}=j(),{freeLabel:v}=P||{},{options:r}=a||{},D=B(()=>{const E=r?.find(u=>u.name==="color"||u.name==="colour"||u.name==="couleur")||{},b=r?.find(u=>u.name==="quantity")||{},k=E?E.values?.[0]?.label:"",t=b?b.values?.[0]?.label:"";return`${k&&t?t+" | "+k:t||k} | ${v}`},[v,r]);return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:a?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:v}),e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:N({amount:a.price.amount,locale:g,currencyCode:a.price.currencyCode})})]}),o&&e(F,{size:"icon",variant:"link",onClick:()=>{d?.(p?void 0:a),x(a)},className:"size-auto shrink-0 underline",children:p?f?.remove:f?.add})]})]})},H=({exchangeOperation:x,exchange:a,canOperate:p,status:o})=>{const{locale:g="us",copyWriting:f}=S(),{setCheckedExchangePurchase:P}=j();return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:a?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:N({amount:a.finalPrice?.amount||0,locale:g,currencyCode:a.price.currencyCode})}),e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:N({amount:a.price?.amount||0,locale:g,currencyCode:a.price.currencyCode})})]}),p&&e(F,{size:"icon",variant:"link",onClick:()=>{P?.(o?void 0:a),x(a)},className:"size-auto shrink-0 underline",children:o?f?.remove:f?.add})]})]})};var Pe=le(ce);export{Pe as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as s,Button as _,Grid as Y,GridItem as q,Picture as z,Heading as Z}from"../../../../../components/index.js";import{useBizProductContext as A}from"../../../BizProductProvider.js";import{useComponentData as ee}from"../../../hooks/useComponentData.js";import{useEffect as te,useMemo as S,useState as ae}from"react";import{formatPrice as y}from"../../../utils/index.js";import{useAiuiContext as T}from"../../../../AiuiProvider/index.js";import J from"decimal.js";import{replaceTemplate as oe}from"../../../utils/textFormat.js";import{withLayout as ne}from"../../../../../shared/Styles.js";import{ExposureDetector as le}from"../../../../../components/index.js";import{gaTrack as ie}from"../../../../../shared/track.js";import re from"../../CartActionButtons/index.js";const ce=()=>{const{locale:m="us",copyWriting:a}=T(),{product:x,variant:n,finalPrice:g,comparePrice:f,coupon:P,selectedOptions:d,selectedVariants:v,totalSavings:i,onAddToCart:D,onBuyNow:E,savingDetail:b,checkedBundle:C,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:p,setSavingDetail:j,addToCartLoading:O,buyNowLoading:L,profile:G,addOrder:$,setAddOrder:w}=A(),B=ee("ProductSummary")??{},[F]=v,I=S(()=>{const r=C?.variants.find(N=>N.variant.sku===F?.sku),l=new J(F?.price?.amount||0).minus(r?.price||F?.price?.amount).toNumber();let u=new J(F?.price?.amount||0);G?.email&&(u=u.minus(b?.member||0));const h=u.minus(b?.coupon).minus(l).toNumber();return parseFloat(h.toFixed(2))},[F,C,G,b?.member,b?.coupon]),{bundleVariant:V,giftVariant:R,exchangeVariant:W}=se()||{},[c,k]=ae();te(()=>{k({bundle:t.bundle?.value?void 0:V,gift:t.gift?.value?void 0:R,exchange:t.exchange?.value?void 0:W})},[V,R,W,t]);const M=S(()=>{const r=[];return $&&$.forEach((l,u)=>{t[l]?.value&&r.push({type:l,key:`${l}-${u}`})}),r},[$,t]),U=S(()=>{const r=d?.quantity||"",l=d?.color||d?.colour||d?.couleur||"";return`${r&&l?`${r} | ${l}`:r||l}`},[d?.quantity,d?.color,d?.colour,d?.couleur]),X=S(()=>{const{image_1920:r,image_1440:l,image_1024:u,image_768:h,image_390:N}=B?.thumbnail||{};return(B?.thumbnail?`${r} 1920, ${l} 1440, ${u} 1024, ${h} 768, ${N} 390`:n.image?.url)||n.image?.url},[B?.thumbnail,n.image?.url]);return n.availableForSale?e("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:e("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:o(Y,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[o(q,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[e(Z,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:B?.readyWant?.replace?.("{title}",x?.title)}),e("div",{className:"",children:e(z,{source:X,className:"lg-desktop:aspect-[644/320]  laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),o(q,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[o("div",{children:[o("div",{className:"flex flex-col gap-4",children:[e(le,{exposureKey:"listing_selector",onExposure:()=>{ie({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:o("div",{className:"flex items-center justify-between gap-6",children:[o("div",{className:"flex items-center gap-4",children:[e(z,{source:n.image?.url||x?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),o("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:x.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:U})]})]}),o("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:y({amount:I,currencyCode:n.price.currencyCode,locale:m})}),I<n?.price?.amount&&e(s,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:n?.price?.amount,currencyCode:n.price.currencyCode,locale:m})})]})]})}),M.map(({type:r,key:l})=>r==="gift"&&t?.gift?.value?e(H,{giftOperation:u=>{p?.({...t,gift:{value:void 0,canOperate:!0}}),k?.({...c,gift:u}),w?.(h=>h.filter(N=>N!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},l):r==="bundle"&&t?.bundle?.value?e(Q,{bundleOperation:u=>{p?.({...t,bundle:{value:void 0,canOperate:!0}}),k?.({...c,bundle:u}),w?.(h=>h.filter(N=>N!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},l):r==="exchange"&&t?.exchange?.value?e(K,{exchangeOperation:u=>{p?.({...t,exchange:{value:void 0,canOperate:!0}}),k?.({...c,exchange:u}),w?.(h=>h.filter(N=>N!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},l):null)]}),(c?.bundle||c?.gift||c?.exchange)&&o("div",{className:"laptop-md:mt-8 mt-6",children:[e(s,{className:"laptop-md:text-[18px] text-sm font-bold",html:B?.recommendBuy}),o("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:[c?.exchange&&e(K,{exchangeOperation:r=>{p?.({...t,exchange:{value:r,canOperate:!0}}),k?.({...c,exchange:void 0}),w?.(l=>[...l,"exchange"])},canOperate:t?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&e(Q,{bundleOperation:r=>{j?.({...b,exchangePurchase:0}),p?.({...t,bundle:{value:r,canOperate:!0}}),k?.({...c,bundle:void 0}),w?.(l=>[...l,"bundle"])},canOperate:t?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&e(H,{giftOperation:r=>{p?.({...t,gift:{value:r,canOperate:!0}}),k?.({...c,gift:void 0}),w?.(l=>[...l,"gift"])},canOperate:t?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),o("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${oe(a?.totalPrice||"",{amount:y({amount:parseFloat(g.toFixed(2)),currencyCode:n.price.currencyCode,locale:m})})}`}),i>0&&e(s,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:y({amount:f,currencyCode:n.price.currencyCode,locale:m})}),e("div",{className:"mt-4 flex justify-end gap-3",children:e(re,{availableForSale:n.availableForSale,addToCartText:a?.addToCart,buyNowText:a?.shopNow,addToCartLoading:O,buyNowLoading:L,addToCartClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",buyNowClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onAddToCart:D,onBuyNow:E})})]})]})]})})}):null},se=()=>{const{bundle:m,variant:a,checkedBundle:x,freeGift:n,checkedGift:g,exchangePurchase:f,checkedExchangePurchase:P}=A();let d,v,i;const{bundleList:D}=m||{},{giftList:E=[]}=n||{},{giftList:b=[]}=f||{},C=D?.filter(O=>O.variants.slice(1,O.variants.length).every(L=>L.variant.availableForSale))||[],[t]=C;d=x||t;const[p]=E?.filter(O=>O.availableForSale)??[];v=g||p;const[j]=b?.filter(O=>O.availableForSale)??[];return i=P||j,{bundleVariant:d,giftVariant:v,exchangeVariant:i}},Q=({bundleOperation:m,bundleListItem:a,canOperate:x,status:n})=>{const{locale:g="us",copyWriting:f}=T(),{variant:P,setCheckedBundle:d}=A(),v=a?.variants.filter(i=>i.variant.sku!==P.sku);return e("div",{className:"",children:v?.map(i=>o("div",{className:"flex items-center justify-between gap-4",children:[o("div",{className:"flex items-center gap-4",children:[e(z,{source:i?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),e("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:i.variant.product.title})})]}),o("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!a&&o("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:y({amount:i?.price||0,locale:g,currencyCode:i.variant?.price?.currencyCode||""})}),i.price<i.variant.price.amount&&e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:i.variant.price.amount||0,locale:g,currencyCode:i.variant?.price?.currencyCode||""})})]}),x&&e(_,{size:"icon",variant:"link",onClick:()=>{d?.(n?void 0:a),m?.(a)},className:"size-auto shrink-0 underline",children:n?f?.remove:f?.add})]})]},i.variant.id))})},H=({giftOperation:m,gift:a,status:x,canOperate:n})=>{const{locale:g="us",copyWriting:f}=T(),{freeGift:P,setCheckedGift:d}=A(),{freeLabel:v}=P||{},{options:i}=a||{},D=S(()=>{const E=i?.find(p=>p.name==="color"||p.name==="colour"||p.name==="couleur")||{},b=i?.find(p=>p.name==="quantity")||{},C=E?E.values?.[0]?.label:"",t=b?b.values?.[0]?.label:"";return`${C&&t?t+" | "+C:t||C} | ${v}`},[v,i]);return o("div",{className:"flex items-center justify-between gap-6",children:[o("div",{className:"flex items-center gap-4",children:[e(z,{source:a?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),o("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),o("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&o("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:v}),e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:a.price.amount,locale:g,currencyCode:a.price.currencyCode})})]}),n&&e(_,{size:"icon",variant:"link",onClick:()=>{d?.(x?void 0:a),m(a)},className:"size-auto shrink-0 underline",children:x?f?.remove:f?.add})]})]})},K=({exchangeOperation:m,exchange:a,canOperate:x,status:n})=>{const{locale:g="us",copyWriting:f}=T(),{setCheckedExchangePurchase:P}=A();return o("div",{className:"flex items-center justify-between gap-6",children:[o("div",{className:"flex items-center gap-4",children:[e(z,{source:a?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),o("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),o("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&o("div",{className:"flex items-center gap-1",children:[e(s,{className:"laptop-md:text-2xl text-base font-bold",html:y({amount:a.finalPrice?.amount||0,locale:g,currencyCode:a.price.currencyCode})}),e(s,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:a.price?.amount||0,locale:g,currencyCode:a.price.currencyCode})})]}),x&&e(_,{size:"icon",variant:"link",onClick:()=>{P?.(n?void 0:a),m(a)},className:"size-auto shrink-0 underline",children:n?f?.remove:f?.add})]})]})};var Oe=ne(ce);export{Oe as default};
 //# sourceMappingURL=index.js.map