npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762934846441 → 1.0.26-alpha.1762942609078 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762934846441 → 1.0.26-alpha.1762942609078

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

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

@@ -1,2 +1,2 @@
-import{Fragment as se,jsx as e,jsxs as p}from"react/jsx-runtime";import{useAiuiContext as H}from"../../../../AiuiProvider/index.js";import{Text as U,Picture as M,Badge as Z}from"../../../../../components";import{useCallback as G,useMemo as z,useState as u,forwardRef as q,useRef as V,useEffect as P}from"react";import{Swiper as R,SwiperSlide as _}from"swiper/react";import{Navigation as D,Mousewheel as Y,Thumbs as B,Pagination as $}from"swiper/modules";import{cn as y}from"../../../../../helpers/index.js";import{GalleryTabType as T}from"./types.js";import{Content as K,List as J,Root as Q,Trigger as X}from"@radix-ui/react-tabs";import{useBizProductContext as F}from"../../../BizProductProvider.js";import{useVariantMedia as ee}from"../../../hooks/use-variant-media.js";import{SpecsModal as te}from"./components/SpecsModal.js";import le from"./components/CompareModal.js";import{formatPrice as ae}from"../../../utils/index.js";const W=t=>p("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("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"})]}),O=t=>p("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("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"})]}),ie=()=>{const{copyWriting:t}=H(),{product:a,variant:b,selectedOptions:k}=F(),d=ee({product:a,variant:b}),[m,g]=u(null),o=b?.metafields?.component?.custom_media_list;let f,w,x,h;o&&o?.available?(f=o?.product||[],w=o?.scenarios||[],x=o?.keyFeatures||[],h=o?.video||[]):(f=d?.productList,w=d?.sceneList,x=d?.keyFeaturesList,h=d?.videoList);const E=z(()=>[...f,...w,...h],[f,w,h]),n={productList:f,sceneList:w,keyFeaturesList:x,videoList:h},r=z(()=>(a?.payload?.components?.find(s=>s.componentKey==="ProductGallery")?.data||[])?.map(s=>({...s,galleries:n[s?.galleries]||[]})).filter(s=>s.galleries.length>0),[a?.payload,n]),[N,I]=u(r?.[0]),[S,L]=u(0),[C,v]=u(null),i=G(()=>{const l=(S+1)%r.length;L(l),I(r[l]),v(0)},[S,r]),c=G(()=>{const l=S===0?r.length-1:S-1;L(l),I(r[l]);const s=r[l]?.galleries||[];v(s.length-1)},[S,r]);P(()=>{I(r[0])},[b?.id]);const A=(l,s)=>{switch(l?.galleryTabType){case T.GALLERY_IMAGE_MAIN:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:C,onSlideChange:()=>v(null)});case T.GALLERY_IMAGE_FEATURES:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:C,onSlideChange:()=>v(null)});case T.GALLERY_IMAGE_SCENE:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:C,onSlideChange:()=>v(null)});case T.GALLERY_VIDEO:return e(re,{...l,onNextTab:i,onPrevTab:c,targetSlideIndex:C,onSlideChange:()=>v(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:p(Q,{className:"relative",value:N?.tabValue,defaultValue:r?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:r.map((l,s)=>e(K,{className:"h-full",value:l.tabValue,children:A(l,s)},l.tabValue))}),e(oe,{galleryTabs:r,activeGalleryTab:N,setActiveGalleryTab:I,setActiveTabIndex:L,setTargetSlideIndex:v})]})})},oe=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:b,setActiveTabIndex:k,setTargetSlideIndex:d})=>{const{product:m}=F(),g=V(null);return p("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[e(J,{ref:g,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map((o,f)=>e(X,{className:y("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",o.tabValue===a?.tabValue&&"bg-white"),onClick:w=>{if(b(o),k(f),d(0),g.current){const x=g.current,h=w.currentTarget,E=h.offsetLeft-x.offsetWidth/2+h.offsetWidth/2;x.scrollTo({left:E,behavior:"smooth"})}},value:o.tabValue,children:o.tabLabel},o.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:m.metafields?.global?.specifications&&p(se,{children:[e(te,{})," | ",e(le,{})]})})]})},j=q((t,a)=>{const{locale:b="us",copyWriting:k}=H(),{variant:d,totalSavings:m}=F(),g=V(null),[o,f]=u(null),[w,x]=u(!0),[h,E]=u(!1),[n,r]=u(null),N=V(null),[I,S]=u(!1),L=z(()=>{if(t?.galleryTabType===T.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===T.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,T.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),C=G(()=>{n?.isBeginning?t.onPrevTab?.():n?.slidePrev()},[n,t]),v=G(()=>{n?.isEnd?t.onNextTab?.():n?.slideNext()},[n,t]);return P(()=>{n&&t.targetSlideIndex&&(n.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[n,t.targetSlideIndex,t]),P(()=>{if(N.current){const i=N.current,c=i.scrollHeight,A=i.clientHeight,l=c>A;S(l)}},[]),p("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(R,{ref:a,className:"h-full",onSwiper:r,onProgress:i=>{x(i.isBeginning),E(i.isEnd)},pagination:{clickable:!0,el:g.current},thumbs:{swiper:o},modules:[Y,B,D,$],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,c)=>e(_,{className:"h-full",children:e(M,{source:i?.image?.url,alt:i?.image?.altText,className:y("h-full",L),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+c))}),d.availableForSale&&!!m&&!t.index&&e(Z,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${ae({amount:m,currencyCode:d?.price?.currencyCode,locale:b})} ${k?.off}`}),e("div",{className:y("hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:C,children:e(W,{className:y("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:y("hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:e(O,{className:y("tablet:size-10 lg-desktop:size-12")})}),p("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[e("div",{className:"hidden tablet:block",children:e(R,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[D,B],children:t?.galleries?.map((i,c)=>e(_,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:e(M,{source:i.image?.url,alt:i.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&p("div",{className:"flex items-center gap-2",children:[e(M,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e("div",{className:"overflow-hidden  max-w-[528px] relative",children:e("div",{ref:N,className:y("h-10 lg-desktop:h-12",I?"animate-marquee-scroll":""),style:{animationDuration:"3s"},children:e(U,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),e("div",{ref:g,className:"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),re=t=>{const[a,b]=u(null),k=G(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),d=G(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return P(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),p("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(R,{className:"h-full",onSwiper:b,modules:[Y,B,D,$],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,g)=>e(_,{className:"h-full",children:p("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:m?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:m?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:m?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+g))}),e("div",{className:y("hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:k,children:e(W,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:y("hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:d,children:e(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Se=t=>e("div",{children:"3D View"});var Te=ie;export{Te as default};
+import{Fragment as se,jsx as e,jsxs as p}from"react/jsx-runtime";import{useAiuiContext as H}from"../../../../AiuiProvider/index.js";import{Text as U,Picture as M,Badge as Z}from"../../../../../components";import{useCallback as L,useMemo as z,useState as u,forwardRef as q,useRef as V,useEffect as P}from"react";import{Swiper as R,SwiperSlide as _}from"swiper/react";import{Navigation as D,Mousewheel as Y,Thumbs as B,Pagination as $}from"swiper/modules";import{cn as y}from"../../../../../helpers/index.js";import{GalleryTabType as T}from"./types.js";import{Content as K,List as J,Root as Q,Trigger as X}from"@radix-ui/react-tabs";import{useBizProductContext as F}from"../../../BizProductProvider.js";import{useVariantMedia as ee}from"../../../hooks/use-variant-media.js";import{SpecsModal as te}from"./components/SpecsModal.js";import le from"./components/CompareModal.js";import{formatPrice as ae}from"../../../utils/index.js";const W=t=>p("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("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"})]}),O=t=>p("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("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"})]}),ie=()=>{const{copyWriting:t}=H(),{product:a,variant:b,selectedOptions:k}=F(),d=ee({product:a,variant:b}),[m,g]=u(null),o=b?.metafields?.component?.custom_media_list;let f,w,x,h;o&&o?.available?(f=o?.product||[],w=o?.scenarios||[],x=o?.keyFeatures||[],h=o?.video||[]):(f=d?.productList,w=d?.sceneList,x=d?.keyFeaturesList,h=d?.videoList);const E=z(()=>[...f,...w,...h],[f,w,h]),n={productList:f,sceneList:w,keyFeaturesList:x,videoList:h},r=z(()=>(a?.payload?.components?.find(s=>s.componentKey==="ProductGallery")?.data||[])?.map(s=>({...s,galleries:n[s?.galleries]||[]})).filter(s=>s.galleries.length>0),[a?.payload,n]),[N,I]=u(r?.[0]),[S,C]=u(0),[G,v]=u(null),i=L(()=>{const l=(S+1)%r.length;C(l),I(r[l]),v(0)},[S,r]),c=L(()=>{const l=S===0?r.length-1:S-1;C(l),I(r[l]);const s=r[l]?.galleries||[];v(s.length-1)},[S,r]);P(()=>{I(r[0]),C(0)},[b?.id]);const A=(l,s)=>{switch(l?.galleryTabType){case T.GALLERY_IMAGE_MAIN:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:G,onSlideChange:()=>v(null)});case T.GALLERY_IMAGE_FEATURES:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:G,onSlideChange:()=>v(null)});case T.GALLERY_IMAGE_SCENE:return e(j,{...l,index:s,onNextTab:i,onPrevTab:c,targetSlideIndex:G,onSlideChange:()=>v(null)});case T.GALLERY_VIDEO:return e(re,{...l,onNextTab:i,onPrevTab:c,targetSlideIndex:G,onSlideChange:()=>v(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:p(Q,{className:"relative",value:N?.tabValue,defaultValue:r?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:r.map((l,s)=>e(K,{className:"h-full",value:l.tabValue,children:A(l,s)},l.tabValue))}),e(oe,{galleryTabs:r,activeGalleryTab:N,setActiveGalleryTab:I,setActiveTabIndex:C,setTargetSlideIndex:v})]})})},oe=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:b,setActiveTabIndex:k,setTargetSlideIndex:d})=>{const{product:m}=F(),g=V(null);return p("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[e(J,{ref:g,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map((o,f)=>e(X,{className:y("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",o.tabValue===a?.tabValue&&"bg-white"),onClick:w=>{if(b(o),k(f),d(0),g.current){const x=g.current,h=w.currentTarget,E=h.offsetLeft-x.offsetWidth/2+h.offsetWidth/2;x.scrollTo({left:E,behavior:"smooth"})}},value:o.tabValue,children:o.tabLabel},o.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:m.metafields?.global?.specifications&&p(se,{children:[e(te,{})," | ",e(le,{})]})})]})},j=q((t,a)=>{const{locale:b="us",copyWriting:k}=H(),{variant:d,totalSavings:m}=F(),g=V(null),[o,f]=u(null),[w,x]=u(!0),[h,E]=u(!1),[n,r]=u(null),N=V(null),[I,S]=u(!1),C=z(()=>{if(t?.galleryTabType===T.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===T.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,T.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),G=L(()=>{n?.isBeginning?t.onPrevTab?.():n?.slidePrev()},[n,t]),v=L(()=>{n?.isEnd?t.onNextTab?.():n?.slideNext()},[n,t]);return P(()=>{n&&t.targetSlideIndex&&(n.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[n,t.targetSlideIndex,t]),P(()=>{if(N.current){const i=N.current,c=i.scrollHeight,A=i.clientHeight,l=c>A;S(l)}},[]),p("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(R,{ref:a,className:"h-full",onSwiper:r,onProgress:i=>{x(i.isBeginning),E(i.isEnd)},pagination:{clickable:!0,el:g.current},thumbs:{swiper:o},modules:[Y,B,D,$],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,c)=>e(_,{className:"h-full",children:e(M,{source:i?.image?.url,alt:i?.image?.altText,className:y("h-full",C),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+c))}),d.availableForSale&&!!m&&!t.index&&e(Z,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${ae({amount:m,currencyCode:d?.price?.currencyCode,locale:b})} ${k?.off}`}),e("div",{className:y("hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:G,children:e(W,{className:y("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:y("hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:e(O,{className:y("tablet:size-10 lg-desktop:size-12")})}),p("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[e("div",{className:"hidden tablet:block",children:e(R,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[D,B],children:t?.galleries?.map((i,c)=>e(_,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:e(M,{source:i.image?.url,alt:i.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&p("div",{className:"flex items-center gap-2",children:[e(M,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e("div",{className:"overflow-hidden  max-w-[528px] relative",children:e("div",{ref:N,className:y("h-10 lg-desktop:h-12",I?"animate-marquee-scroll":""),style:{animationDuration:"3s"},children:e(U,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),e("div",{ref:g,className:"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),re=t=>{const[a,b]=u(null),k=L(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),d=L(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return P(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),p("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(R,{className:"h-full",onSwiper:b,modules:[Y,B,D,$],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,g)=>e(_,{className:"h-full",children:p("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:m?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:m?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:m?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+g))}),e("div",{className:y("hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:k,children:e(W,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:y("hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:d,children:e(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Se=t=>e("div",{children:"3D View"});var Te=ie;export{Te 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, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } 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'\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'\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\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 =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\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  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[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=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\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          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\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  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\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                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.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                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\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 [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\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  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\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        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\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          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\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          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -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          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -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=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\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=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain 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=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10\"\n      />\n    </div>\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        // 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        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\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -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          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -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 ProductGallery\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } 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'\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'\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\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 =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\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  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=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\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          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\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  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\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                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.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                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\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 [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\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  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\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        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\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          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\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          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -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          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -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=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\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=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain 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=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10\"\n      />\n    </div>\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        // 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        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\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -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          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -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 ProductGallery\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Text as c,Button as y,Grid as Q,GridItem as R,Picture as C,Heading as U}from"../../../../../components";import{useBizProductContext as P}from"../../../BizProductProvider";import{useEffect as X,useMemo as Y,useState as Z}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as B}from"../../../../AiuiProvider";import V from"decimal.js";import{replaceTemplate as _}from"../../../utils/textFormat";const ee=()=>{const{locale:d="us",copyWriting:t}=B(),{product:s,variant:l,finalPrice:u,comparePrice:m,coupon:h,selectedOptions:p,selectedVariants:o,totalSavings:O,onAddToCart:D,onBuyNow:z,savingDetail:g,checkedBundle:E,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:v,setCheckedGift:w,setCheckedExchangePurchase:x,setCheckedBundle:N,setSavingDetail:M,addToCartLoading:J,buyNowLoading:H,profile:F}=P(),[k]=o,j=Y(()=>{const r=E?.variants.find(K=>K.variant.sku===k?.sku),W=new V(k?.price?.amount||0).minus(r?.price||k?.price?.amount).toNumber();let A=new V(k?.price?.amount||0);F?.email&&(A=A.minus(g?.member||0));const q=A.minus(g?.coupon).minus(W).toNumber();return Math.floor(q*100)/100},[k,E,F,g?.member,g?.coupon]);if(!l.availableForSale)return null;const{bundleVariant:G,giftVariant:L,exchangeVariant:S}=te()||{},[i,b]=Z();return X(()=>{b({bundle:n.bundle?.value?void 0:G,gift:n.gift?.value?void 0:L,exchange:n.exchange?.value?void 0:S})},[G,L,S,n]),e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:e("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:a(Q,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[a(R,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[e(U,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${s.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"",children:e(C,{source:l.image?.url||s?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full"})})]}),a(R,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[a("div",{children:[a("div",{className:"flex flex-col gap-4",children:[a("div",{className:"flex items-center justify-between",children:[a("div",{className:"shrink-0 flex items-center gap-4",children:[e(C,{source:l.image?.url||s?.images?.[0]?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:s.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${p.color||p.colour||p.couleur}`})]})]}),a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:j,currencyCode:l.price.currencyCode,locale:d})}),j<l?.price?.amount&&e(c,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:f({amount:l?.price?.amount,currencyCode:l.price.currencyCode,locale:d})})]})]}),n?.gift?.value&&e(T,{giftOperation:r=>{w?.(void 0),v?.({...n,gift:{value:void 0,canOperate:!0}}),b?.({...i,gift:r})},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate}),n?.bundle?.value&&e(I,{bundleOperation:r=>{N?.(void 0),v?.({...n,bundle:{value:void 0,canOperate:!0}}),b?.({...i,bundle:r})},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate}),n?.exchange?.value&&e($,{exchangeOperation:r=>{x?.(void 0),v?.({...n,exchange:{value:void 0,canOperate:!0}}),b?.({...i,exchange:r})},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value})]}),(i?.bundle||i?.gift||i?.exchange)&&a("div",{className:"mt-6",children:[e(c,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),a("div",{className:"flex flex-col gap-6 mt-6",children:[i?.exchange&&e($,{exchangeOperation:r=>{N?.(void 0),v?.({bundle:{value:void 0,canOperate:!0},gift:{value:n?.gift?.value,canOperate:!0},exchange:{value:r,canOperate:!0}}),b?.({...i,exchange:void 0})},canOperate:n?.exchange?.canOperate,status:!i?.exchange,exchange:i?.exchange}),i?.bundle&&e(I,{bundleOperation:r=>{w?.(void 0),x?.(void 0),M?.({...g,exchangePurchase:0}),v?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:r,canOperate:!0}}),b?.({...i,bundle:void 0})},canOperate:n?.bundle?.canOperate,status:!i?.bundle,bundleListItem:i?.bundle}),i?.gift&&e(T,{giftOperation:r=>{N?.(void 0),v?.({bundle:{value:void 0,canOperate:!0},exchange:{value:n?.exchange?.value,canOperate:!0},gift:{value:r,canOperate:!0}}),b?.({...i,gift:void 0})},canOperate:n?.gift?.canOperate,status:!i?.gift,gift:i?.gift})]})]})]}),a("div",{className:"text-right",children:[e(c,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${_(t?.totalPrice||"",{amount:f({amount:Math.floor(u*100)/100,currencyCode:l.price.currencyCode,locale:d})})}`}),O>0&&e(c,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:m,currencyCode:l.price.currencyCode,locale:d})}),a("div",{className:"flex gap-3 mt-2 justify-end",children:[e(y,{size:"lg",variant:"secondary",loading:J,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.addToCart}),e(y,{size:"lg",loading:H,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.shopNow})]})]})]})]})})})},te=()=>{const{bundle:d,variant:t,checkedBundle:s,freeGift:l,checkedGift:u,exchangePurchase:m,checkedExchangePurchase:h}=P();let p,o,O;const{bundleList:D}=d||{},{giftList:z=[]}=l||{},{giftList:g=[]}=m||{},E=D?.filter(x=>x.variants.slice(1,x.variants.length).every(N=>N.variant.availableForSale))||[],[n]=E;p=s||n;const[v]=z?.filter(x=>x.availableForSale);o=u||v;const[w]=g?.filter(x=>x.availableForSale);return O=h||w,{bundleVariant:p,giftVariant:o,exchangeVariant:O}},I=({bundleOperation:d,bundleListItem:t,canOperate:s,status:l})=>{const{locale:u="us"}=B(),{variant:m,setCheckedBundle:h}=P(),p=t?.variants.filter(o=>o.variant.sku!==m.sku);return e("div",{className:"",children:p?.map(o=>a("div",{className:"flex items-center gap-4 justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:o?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(c,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:o.variant.product.title})})]}),a("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:o?.price||0,locale:u,currencyCode:o.variant?.price?.currencyCode||""})}),o.price<o.variant.price.amount&&e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:o.variant.price.amount||0,locale:u,currencyCode:o.variant?.price?.currencyCode||""})})]}),s&&e(y,{size:"icon",variant:"link",onClick:()=>{h?.(l?void 0:t),d?.(t)},className:"shrink-0 size-auto underline",children:l?"Remove":"Add"})]})]},o.variant.id))})},T=({giftOperation:d,gift:t,status:s,canOperate:l})=>{const{locale:u="us"}=B(),{freeGift:m,setCheckedGift:h}=P(),{freeLabel:p,count:o}=m||{};return a("div",{className:"flex items-center justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${o} | ${p}`})]})]}),a("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:p}),e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),l&&e(y,{size:"icon",variant:"link",onClick:()=>{h?.(s?void 0:t),d(t)},className:"shrink-0 size-auto underline",children:s?"Remove":"Add"})]})]})},$=({exchangeOperation:d,exchange:t,canOperate:s,status:l})=>{const{locale:u="us"}=B(),{setCheckedExchangePurchase:m}=P();return a("div",{className:"flex items-center justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),a("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),s&&e(y,{size:"icon",variant:"link",onClick:()=>{m?.(l?void 0:t),d(t)},className:"shrink-0 size-auto underline",children:l?"Remove":"Add"})]})]})};var ue=ee;export{ue as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Text as c,Button as y,Grid as Q,GridItem as R,Picture as C,Heading as U}from"../../../../../components";import{useBizProductContext as P}from"../../../BizProductProvider";import{useEffect as X,useMemo as Y,useState as Z}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as B}from"../../../../AiuiProvider";import V from"decimal.js";import{replaceTemplate as _}from"../../../utils/textFormat";const ee=()=>{const{locale:d="us",copyWriting:t}=B(),{product:s,variant:l,finalPrice:u,comparePrice:m,coupon:h,selectedOptions:p,selectedVariants:o,totalSavings:O,onAddToCart:D,onBuyNow:z,savingDetail:g,checkedBundle:E,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:v,setCheckedGift:w,setCheckedExchangePurchase:x,setCheckedBundle:N,setSavingDetail:M,addToCartLoading:J,buyNowLoading:H,profile:j}=P(),[k]=o,F=Y(()=>{const r=E?.variants.find(K=>K.variant.sku===k?.sku),W=new V(k?.price?.amount||0).minus(r?.price||k?.price?.amount).toNumber();let A=new V(k?.price?.amount||0);j?.email&&(A=A.minus(g?.member||0));const q=A.minus(g?.coupon).minus(W).toNumber();return Math.floor(q*100)/100},[k,E,j,g?.member,g?.coupon]);if(!l.availableForSale)return null;const{bundleVariant:G,giftVariant:L,exchangeVariant:S}=te()||{},[i,b]=Z();return X(()=>{b({bundle:n.bundle?.value?void 0:G,gift:n.gift?.value?void 0:L,exchange:n.exchange?.value?void 0:S})},[G,L,S,n]),e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:e("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:a(Q,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[a(R,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[e(U,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${s.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"",children:e(C,{source:l.image?.url||s?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368]  desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-top"})})]}),a(R,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[a("div",{children:[a("div",{className:"flex flex-col gap-4",children:[a("div",{className:"flex items-center justify-between",children:[a("div",{className:"shrink-0 flex items-center gap-4",children:[e(C,{source:l.image?.url||s?.images?.[0]?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:s.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${p.color||p.colour||p.couleur}`})]})]}),a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:F,currencyCode:l.price.currencyCode,locale:d})}),F<l?.price?.amount&&e(c,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:f({amount:l?.price?.amount,currencyCode:l.price.currencyCode,locale:d})})]})]}),n?.gift?.value&&e(T,{giftOperation:r=>{w?.(void 0),v?.({...n,gift:{value:void 0,canOperate:!0}}),b?.({...i,gift:r})},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate}),n?.bundle?.value&&e(I,{bundleOperation:r=>{N?.(void 0),v?.({...n,bundle:{value:void 0,canOperate:!0}}),b?.({...i,bundle:r})},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate}),n?.exchange?.value&&e($,{exchangeOperation:r=>{x?.(void 0),v?.({...n,exchange:{value:void 0,canOperate:!0}}),b?.({...i,exchange:r})},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value})]}),(i?.bundle||i?.gift||i?.exchange)&&a("div",{className:"mt-6",children:[e(c,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),a("div",{className:"flex flex-col gap-6 mt-6",children:[i?.exchange&&e($,{exchangeOperation:r=>{N?.(void 0),v?.({bundle:{value:void 0,canOperate:!0},gift:{value:n?.gift?.value,canOperate:!0},exchange:{value:r,canOperate:!0}}),b?.({...i,exchange:void 0})},canOperate:n?.exchange?.canOperate,status:!i?.exchange,exchange:i?.exchange}),i?.bundle&&e(I,{bundleOperation:r=>{w?.(void 0),x?.(void 0),M?.({...g,exchangePurchase:0}),v?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:r,canOperate:!0}}),b?.({...i,bundle:void 0})},canOperate:n?.bundle?.canOperate,status:!i?.bundle,bundleListItem:i?.bundle}),i?.gift&&e(T,{giftOperation:r=>{N?.(void 0),v?.({bundle:{value:void 0,canOperate:!0},exchange:{value:n?.exchange?.value,canOperate:!0},gift:{value:r,canOperate:!0}}),b?.({...i,gift:void 0})},canOperate:n?.gift?.canOperate,status:!i?.gift,gift:i?.gift})]})]})]}),a("div",{className:"text-right",children:[e(c,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${_(t?.totalPrice||"",{amount:f({amount:Math.floor(u*100)/100,currencyCode:l.price.currencyCode,locale:d})})}`}),O>0&&e(c,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:m,currencyCode:l.price.currencyCode,locale:d})}),a("div",{className:"flex gap-3 mt-2 justify-end",children:[e(y,{size:"lg",variant:"secondary",loading:J,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.addToCart}),e(y,{size:"lg",loading:H,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.shopNow})]})]})]})]})})})},te=()=>{const{bundle:d,variant:t,checkedBundle:s,freeGift:l,checkedGift:u,exchangePurchase:m,checkedExchangePurchase:h}=P();let p,o,O;const{bundleList:D}=d||{},{giftList:z=[]}=l||{},{giftList:g=[]}=m||{},E=D?.filter(x=>x.variants.slice(1,x.variants.length).every(N=>N.variant.availableForSale))||[],[n]=E;p=s||n;const[v]=z?.filter(x=>x.availableForSale);o=u||v;const[w]=g?.filter(x=>x.availableForSale);return O=h||w,{bundleVariant:p,giftVariant:o,exchangeVariant:O}},I=({bundleOperation:d,bundleListItem:t,canOperate:s,status:l})=>{const{locale:u="us"}=B(),{variant:m,setCheckedBundle:h}=P(),p=t?.variants.filter(o=>o.variant.sku!==m.sku);return e("div",{className:"",children:p?.map(o=>a("div",{className:"flex items-center gap-4 justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:o?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(c,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:o.variant.product.title})})]}),a("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:o?.price||0,locale:u,currencyCode:o.variant?.price?.currencyCode||""})}),o.price<o.variant.price.amount&&e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:o.variant.price.amount||0,locale:u,currencyCode:o.variant?.price?.currencyCode||""})})]}),s&&e(y,{size:"icon",variant:"link",onClick:()=>{h?.(l?void 0:t),d?.(t)},className:"shrink-0 size-auto underline",children:l?"Remove":"Add"})]})]},o.variant.id))})},T=({giftOperation:d,gift:t,status:s,canOperate:l})=>{const{locale:u="us"}=B(),{freeGift:m,setCheckedGift:h}=P(),{freeLabel:p,count:o}=m||{};return a("div",{className:"flex items-center justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${o} | ${p}`})]})]}),a("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:p}),e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),l&&e(y,{size:"icon",variant:"link",onClick:()=>{h?.(s?void 0:t),d(t)},className:"shrink-0 size-auto underline",children:s?"Remove":"Add"})]})]})},$=({exchangeOperation:d,exchange:t,canOperate:s,status:l})=>{const{locale:u="us"}=B(),{setCheckedExchangePurchase:m}=P();return a("div",{className:"flex items-center justify-between",children:[a("div",{className:"flex items-center gap-4",children:[e(C,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),a("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(c,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),e(c,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),a("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&a("div",{className:"flex items-center gap-1",children:[e(c,{className:"text-base desktop:text-2xl font-bold",html:f({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),e(c,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),s&&e(y,{size:"icon",variant:"link",onClick:()=>{m?.(l?void 0:t),d(t)},className:"shrink-0 size-auto underline",children:l?"Remove":"Add"})]})]})};var ue=ee;export{ue as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductSummary = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    selectedVariants,\n    totalSavings,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    checkedBundle,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n    setCheckedGift,\n    setCheckedExchangePurchase,\n    setCheckedBundle,\n    setSavingDetail,\n    addToCartLoading,\n    buyNowLoading,\n    profile,\n  } = useBizProductContext()\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n    if (!!profile?.email) {\n      currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n    }\n    const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n    return Math.floor(finalPrice * 100) / 100\n  }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n    exchange?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n                imgClassName=\"object-cover h-full\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold\"\n                      html={formatPrice({\n                        amount: summaryFinalPrice,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                    {summaryFinalPrice < variant?.price?.amount && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: variant?.price?.amount,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift?.value && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setCheckedGift?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        gift: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift?.value}\n                    canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle?.value && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setCheckedBundle?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        bundle: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n                    canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange?.value && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setCheckedExchangePurchase?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        exchange: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                    exchange={joinedRecommendBuyProducts?.exchange?.value}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle ||\n                initialRecommendBuyProducts?.gift ||\n                initialRecommendBuyProducts?.exchange) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.exchange && (\n                      <ProductExchangeSummary\n                        exchangeOperation={exchange => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: joinedRecommendBuyProducts?.gift?.value,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: exchange,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setCheckedGift?.(undefined)\n                          setCheckedExchangePurchase?.(undefined)\n                          setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n                          setJoinedRecommendBuyProducts?.({\n                            gift: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            bundle: {\n                              value: bundle,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: joinedRecommendBuyProducts?.exchange?.value,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: gift,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                        status={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n              />\n\n              {totalSavings > 0 && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePrice,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2 justify-end\">\n                <Button\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  loading={addToCartLoading}\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onAddToCart?.()}\n                >\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  loading={buyNowLoading}\n                  variant=\"primary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onBuyNow?.()}\n                >\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n    useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  let exchangeVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n  const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale)\n  exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n  return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleListItem,\n  canOperate,\n  status,\n}: {\n  bundleOperation: (bundle?: BundleListItem) => void\n  bundleListItem?: BundleListItem\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4 justify-between\" key={bundleVariant.variant.id}>\n            <div className=\"flex items-center gap-4\">\n              <Picture\n                source={bundleVariant?.variant?.image?.url}\n                className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n              />\n              <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n                <Text\n                  className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  html={bundleVariant.variant.product.title}\n                />\n              </div>\n            </div>\n            <div className=\"flex flex-col items-end gap-1 justify-center\">\n              {!!bundleListItem && (\n                <div className=\"flex items-center gap-1\">\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold\"\n                    html={formatPrice({\n                      amount: bundleVariant?.price || 0,\n                      locale,\n                      currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                    })}\n                  />\n                  {bundleVariant.price < bundleVariant.variant.price.amount && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: bundleVariant.variant.price.amount || 0,\n                        locale,\n                        currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                      })}\n                    />\n                  )}\n                </div>\n              )}\n              {canOperate && (\n                <Button\n                  size=\"icon\"\n                  variant=\"link\"\n                  onClick={() => {\n                    setCheckedBundle?.(status ? undefined : bundleListItem)\n                    bundleOperation?.(bundleListItem)\n                  }}\n                  className=\"shrink-0 size-auto underline\"\n                >\n                  {!!status ? 'Remove' : 'Add'}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  status,\n  canOperate,\n}: {\n  giftOperation: (gift?: ProductVariant) => void\n  gift?: ProductVariant\n  status?: boolean\n  canOperate?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel, count } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={gift?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x${count} | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!gift && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedGift?.(status ? undefined : gift)\n              giftOperation(gift)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductExchangeSummary = ({\n  exchangeOperation,\n  exchange,\n  canOperate,\n  status,\n}: {\n  exchangeOperation: (exchange?: ProductVariant) => void\n  exchange?: ProductVariant & { finalPrice?: ProductPrice }\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { setCheckedExchangePurchase } = useBizProductContext()\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={exchange?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={exchange?.product?.title}\n          />\n          <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!exchange && (\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-base desktop:text-2xl font-bold\"\n              html={formatPrice({\n                amount: exchange.finalPrice?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: exchange.price?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedExchangePurchase?.(status ? undefined : exchange)\n              exchangeOperation(exchange)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductSummary = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    selectedVariants,\n    totalSavings,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    checkedBundle,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n    setCheckedGift,\n    setCheckedExchangePurchase,\n    setCheckedBundle,\n    setSavingDetail,\n    addToCartLoading,\n    buyNowLoading,\n    profile,\n  } = useBizProductContext()\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n    if (!!profile?.email) {\n      currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n    }\n    const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n    return Math.floor(finalPrice * 100) / 100\n  }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n    exchange?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"lg-desktop:aspect-[644/368]  desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n                imgClassName=\"object-cover h-full object-top\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold\"\n                      html={formatPrice({\n                        amount: summaryFinalPrice,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                    {summaryFinalPrice < variant?.price?.amount && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: variant?.price?.amount,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift?.value && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setCheckedGift?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        gift: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift?.value}\n                    canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle?.value && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setCheckedBundle?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        bundle: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n                    canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange?.value && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setCheckedExchangePurchase?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        exchange: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                    exchange={joinedRecommendBuyProducts?.exchange?.value}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle ||\n                initialRecommendBuyProducts?.gift ||\n                initialRecommendBuyProducts?.exchange) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.exchange && (\n                      <ProductExchangeSummary\n                        exchangeOperation={exchange => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: joinedRecommendBuyProducts?.gift?.value,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: exchange,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setCheckedGift?.(undefined)\n                          setCheckedExchangePurchase?.(undefined)\n                          setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n                          setJoinedRecommendBuyProducts?.({\n                            gift: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            bundle: {\n                              value: bundle,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: joinedRecommendBuyProducts?.exchange?.value,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: gift,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                        status={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n              />\n\n              {totalSavings > 0 && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePrice,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2 justify-end\">\n                <Button\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  loading={addToCartLoading}\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onAddToCart?.()}\n                >\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  loading={buyNowLoading}\n                  variant=\"primary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onBuyNow?.()}\n                >\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n    useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  let exchangeVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n  const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale)\n  exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n  return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleListItem,\n  canOperate,\n  status,\n}: {\n  bundleOperation: (bundle?: BundleListItem) => void\n  bundleListItem?: BundleListItem\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4 justify-between\" key={bundleVariant.variant.id}>\n            <div className=\"flex items-center gap-4\">\n              <Picture\n                source={bundleVariant?.variant?.image?.url}\n                className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n              />\n              <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n                <Text\n                  className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  html={bundleVariant.variant.product.title}\n                />\n              </div>\n            </div>\n            <div className=\"flex flex-col items-end gap-1 justify-center\">\n              {!!bundleListItem && (\n                <div className=\"flex items-center gap-1\">\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold\"\n                    html={formatPrice({\n                      amount: bundleVariant?.price || 0,\n                      locale,\n                      currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                    })}\n                  />\n                  {bundleVariant.price < bundleVariant.variant.price.amount && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: bundleVariant.variant.price.amount || 0,\n                        locale,\n                        currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                      })}\n                    />\n                  )}\n                </div>\n              )}\n              {canOperate && (\n                <Button\n                  size=\"icon\"\n                  variant=\"link\"\n                  onClick={() => {\n                    setCheckedBundle?.(status ? undefined : bundleListItem)\n                    bundleOperation?.(bundleListItem)\n                  }}\n                  className=\"shrink-0 size-auto underline\"\n                >\n                  {!!status ? 'Remove' : 'Add'}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  status,\n  canOperate,\n}: {\n  giftOperation: (gift?: ProductVariant) => void\n  gift?: ProductVariant\n  status?: boolean\n  canOperate?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel, count } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={gift?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x${count} | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!gift && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedGift?.(status ? undefined : gift)\n              giftOperation(gift)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductExchangeSummary = ({\n  exchangeOperation,\n  exchange,\n  canOperate,\n  status,\n}: {\n  exchangeOperation: (exchange?: ProductVariant) => void\n  exchange?: ProductVariant & { finalPrice?: ProductPrice }\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { setCheckedExchangePurchase } = useBizProductContext()\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={exchange?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={exchange?.product?.title}\n          />\n          <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!exchange && (\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-base desktop:text-2xl font-bold\"\n              html={formatPrice({\n                amount: exchange.finalPrice?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: exchange.price?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedExchangePurchase?.(status ? undefined : exchange)\n              exchangeOperation(exchange)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "replaceTemplate", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setCheckedGift", "setCheckedExchangePurchase", "setCheckedBundle", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "bundleVariants", "giftOperation", "freeLabel", "count", "exchangeOperation", "ProductSummary_default"]
 }

package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as C,jsxs as I}from"react/jsx-runtime";import"../../../../AiuiProvider/index.js";import{cn as w}from"../../../../../helpers/index.js";import{useState as N,useCallback as R,useRef as T,useEffect as E}from"react";import"gsap";import{useBizProductContext as B}from"../../../BizProductProvider.js";const M=(t,p)=>{const[a,l]=N(null),c=T(null),s=T(new Map),f=T(!1),g=T(null);E(()=>{g.current=a},[a]),E(()=>{if(!t||t.length===0)return;c.current&&c.current.disconnect();const i=document.getElementById("purchase-bar"),m=i?i.clientHeight:100;s.current.clear();const e=[];if(t.forEach(r=>{const u=r.id||r.href?.replace("#",""),v=document.getElementById(u);v&&(s.current.set(u,r),e.push(v))}),e.length===0){l(t[0]);return}const o={root:null,rootMargin:`-${m}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},b=r=>{if(f.current)return;if((window.scrollY||document.documentElement.scrollTop)<m+50){const n=t[0];n&&g.current?.id!==n.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",n.label),l(n),p?.(n));return}const v=r.filter(n=>n.isIntersecting).sort((n,S)=>n.boundingClientRect.top-S.boundingClientRect.top);if(v.length>0){const n=v[0],S=n.target.id,d=s.current.get(S);d&&(console.log("\u5F53\u524D\u6FC0\u6D3B\u533A\u57DF:",d.label,"\u4EA4\u53C9\u6BD4\u4F8B:",n.intersectionRatio.toFixed(2)),l(d),p?.(d))}else{const n=[...r].sort((S,d)=>Math.abs(S.boundingClientRect.top)-Math.abs(d.boundingClientRect.top));if(n.length>0){const d=n[0].target.id,x=s.current.get(d);x&&(l(x),p?.(x))}}};c.current=new IntersectionObserver(b,o),e.forEach(r=>{c.current?.observe(r)});const h=()=>{if(f.current)return;if((window.scrollY||document.documentElement.scrollTop)<m+50){const u=t[0];u&&(l(u),p?.(u))}};return window.addEventListener("scroll",h,{passive:!0}),()=>{c.current&&c.current.disconnect(),window.removeEventListener("scroll",h)}},[t]),E(()=>{!a&&t&&t.length>0&&l(t[0])},[t,a]);const y=R(i=>{l(i);const m=i.id||i.href?.replace("#",""),e=document.getElementById(m);if(e){const o=document.getElementById("purchase-bar"),b=o?o.clientHeight:100;f.current=!0;const r=e.getBoundingClientRect().top+window.scrollY-b-10;window.scrollTo({top:r,behavior:"smooth"}),setTimeout(()=>{f.current=!1},1e3)}},[]);return{activeTab:a||t?.[0],setActiveTab:y}},k=({tabs:t,onSpyNavItemClick:p,className:a,renderRating:l})=>{const{isMobile:c}=B(),{activeTab:s,setActiveTab:f}=M(t),g=T(null),y=T(new Map),i=R(e=>{f(e),p?.(e)},[p,f]);E(()=>{if(!c||!s||!g.current)return;const e=y.current.get(s.id);if(!e)return;const o=g.current,b=e.getBoundingClientRect(),h=o.getBoundingClientRect(),r=b.left+b.width/2-h.left,u=h.width/2,v=r-u;o.scrollTo({left:o.scrollLeft+v,behavior:"smooth"})},[s?.id,c]);const m=R((e,o)=>{o?y.current.set(e,o):y.current.delete(e)},[]);return c?I("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:w("flex gap-6 overflow-x-auto -mx-4 px-4",a),children:[t?.map(e=>C("button",{ref:o=>m(e.id,o),className:w("text-sm relative py-[10px] text-[#949494] font-bold whitespace-nowrap flex-shrink-0",{"text-[#1d1d1f]":s?.id===e.id}),onClick:()=>i(e),children:e.label},e.id)),l]}):I("div",{className:w("flex gap-8",a),children:[t?.map(e=>I("button",{className:"text-sm  relative py-[10px] font-bold",onClick:()=>i(e),children:[e.label,C("div",{className:w("absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":s?.id===e.id})})]},e.id)),l]})};var D=k;export{D as default};
+import{jsx as C,jsxs as R}from"react/jsx-runtime";import"../../../../AiuiProvider/index.js";import{cn as w}from"../../../../../helpers/index.js";import{useState as N,useCallback as I,useRef as T,useEffect as E}from"react";import"gsap";import{useBizProductContext as B}from"../../../BizProductProvider.js";const M=(t,d)=>{const[a,l]=N(null),c=T(null),s=T(new Map),p=T(!1),g=T(null);E(()=>{g.current=a},[a]),E(()=>{if(!t||t.length===0)return;c.current&&c.current.disconnect();const i=document.getElementById("purchase-bar"),f=i?i.clientHeight:100;s.current.clear();const e=[];if(t.forEach(o=>{const u=o.id||o.href?.replace("#",""),m=document.getElementById(u);m&&(s.current.set(u,o),e.push(m))}),e.length===0){l(t[0]);return}const n={root:null,rootMargin:`-${f}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},h=o=>{if(p.current)return;if((window.scrollY||document.documentElement.scrollTop)<f+50){const r=t[0];r&&g.current?.id!==r.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",r.label),l(r),d?.(r));return}const m=o.filter(r=>r.isIntersecting).sort((r,S)=>r.boundingClientRect.top-S.boundingClientRect.top);if(m.length>0){const S=m[0].target.id,v=s.current.get(S);v&&(l(v),d?.(v))}else{const r=[...o].sort((S,v)=>Math.abs(S.boundingClientRect.top)-Math.abs(v.boundingClientRect.top));if(r.length>0){const v=r[0].target.id,x=s.current.get(v);x&&(l(x),d?.(x))}}};c.current=new IntersectionObserver(h,n),e.forEach(o=>{c.current?.observe(o)});const b=()=>{if(p.current)return;if((window.scrollY||document.documentElement.scrollTop)<f+50){const u=t[0];u&&(l(u),d?.(u))}};return window.addEventListener("scroll",b,{passive:!0}),()=>{c.current&&c.current.disconnect(),window.removeEventListener("scroll",b)}},[t]),E(()=>{!a&&t&&t.length>0&&l(t[0])},[t,a]);const y=I(i=>{l(i);const f=i.id||i.href?.replace("#",""),e=document.getElementById(f);if(e){const n=document.getElementById("purchase-bar"),h=n?n.clientHeight:100;p.current=!0;const o=e.getBoundingClientRect().top+window.scrollY-h-10;window.scrollTo({top:o,behavior:"smooth"}),setTimeout(()=>{p.current=!1},1e3)}},[]);return{activeTab:a||t?.[0],setActiveTab:y}},k=({tabs:t,onSpyNavItemClick:d,className:a,renderRating:l})=>{const{isMobile:c}=B(),{activeTab:s,setActiveTab:p}=M(t),g=T(null),y=T(new Map),i=I(e=>{p(e),d?.(e)},[d,p]);E(()=>{if(!c||!s||!g.current)return;const e=y.current.get(s.id);if(!e)return;const n=g.current,h=e.getBoundingClientRect(),b=n.getBoundingClientRect(),o=h.left+h.width/2-b.left,u=b.width/2,m=o-u;n.scrollTo({left:n.scrollLeft+m,behavior:"smooth"})},[s?.id,c]);const f=I((e,n)=>{n?y.current.set(e,n):y.current.delete(e)},[]);return c?R("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:w("flex gap-6 overflow-x-auto -mx-4 px-4",a),children:[t?.map(e=>C("button",{ref:n=>f(e.id,n),className:w("text-sm relative py-[10px] text-[#949494] font-bold whitespace-nowrap flex-shrink-0",{"text-[#1d1d1f]":s?.id===e.id}),onClick:()=>i(e),children:e.label},e.id)),l]}):R("div",{className:w("flex gap-8",a),children:[t?.map(e=>R("button",{className:"text-sm  relative py-[10px] font-bold",onClick:()=>i(e),children:[e.label,C("div",{className:w("absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":s?.id===e.id})})]},e.id)),l]})};var D=k;export{D as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n  const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n  const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n  const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n  // \u540C\u6B65 activeTab \u5230 ref\n  useEffect(() => {\n    activeTabRef.current = activeTab\n  }, [activeTab])\n\n  useEffect(() => {\n    if (!tabs || tabs.length === 0) return\n\n    // \u6E05\u7406\u4E4B\u524D\u7684 observer\n    if (observerRef.current) {\n      observerRef.current.disconnect()\n    }\n\n    // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n    const purchaseBar = document.getElementById('purchase-bar')\n    const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n    // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n    sectionsRef.current.clear()\n    const elements: Element[] = []\n\n    tabs.forEach(tab => {\n      const id = tab.id || tab.href?.replace('#', '')\n      const element = document.getElementById(id)\n      if (element) {\n        sectionsRef.current.set(id, tab)\n        elements.push(element)\n      }\n    })\n\n    if (elements.length === 0) {\n      // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n      setActiveTab(tabs[0])\n      return\n    }\n\n    // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n    const observerOptions: IntersectionObserverInit = {\n      root: null,\n      rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n      threshold: [0, 0.25, 0.5, 0.75, 1],\n    }\n\n    const observerCallback: IntersectionObserverCallback = entries => {\n      // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n      if (isManualScrollRef.current) {\n        return\n      }\n\n      // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n      const scrollTop = window.scrollY || document.documentElement.scrollTop\n      if (scrollTop < navHeight + 50) {\n        // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n        const firstTab = tabs[0]\n        if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n          console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n          setActiveTab(firstTab)\n          onActiveChange?.(firstTab)\n        }\n        return\n      }\n\n      // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n      const intersectingEntries = entries\n        .filter(entry => entry.isIntersecting)\n        .sort((a, b) => {\n          // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n          return a.boundingClientRect.top - b.boundingClientRect.top\n        })\n\n      if (intersectingEntries.length > 0) {\n        // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n        const topEntry = intersectingEntries[0]\n        const id = topEntry.target.id\n        const tab = sectionsRef.current.get(id)\n\n        if (tab) {\n          console.log('\u5F53\u524D\u6FC0\u6D3B\u533A\u57DF:', tab.label, '\u4EA4\u53C9\u6BD4\u4F8B:', topEntry.intersectionRatio.toFixed(2))\n          setActiveTab(tab)\n          onActiveChange?.(tab)\n        }\n      } else {\n        // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n        const sortedEntries = [...entries].sort((a, b) => {\n          return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n        })\n\n        if (sortedEntries.length > 0) {\n          const closestEntry = sortedEntries[0]\n          const id = closestEntry.target.id\n          const tab = sectionsRef.current.get(id)\n\n          if (tab) {\n            setActiveTab(tab)\n            onActiveChange?.(tab)\n          }\n        }\n      }\n    }\n\n    observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n    // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n    elements.forEach(element => {\n      observerRef.current?.observe(element)\n    })\n\n    // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n    const handleScroll = () => {\n      if (isManualScrollRef.current) {\n        return\n      }\n\n      const scrollTop = window.scrollY || document.documentElement.scrollTop\n      // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n      if (scrollTop < navHeight + 50) {\n        const firstTab = tabs[0]\n        if (firstTab) {\n          setActiveTab(firstTab)\n          onActiveChange?.(firstTab)\n        }\n      }\n    }\n\n    window.addEventListener('scroll', handleScroll, { passive: true })\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [tabs])\n\n  // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n  useEffect(() => {\n    if (!activeTab && tabs && tabs.length > 0) {\n      setActiveTab(tabs[0])\n    }\n  }, [tabs, activeTab])\n\n  // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n  const handleSetActiveTab = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      setActiveTab(tab)\n\n      // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n      const id = tab.id || tab.href?.replace('#', '')\n      const element = document.getElementById(id)\n\n      if (element) {\n        const purchaseBar = document.getElementById('purchase-bar')\n        const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n        // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n        isManualScrollRef.current = true\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n        const elementTop = element.getBoundingClientRect().top + window.scrollY\n        const scrollToPosition = elementTop - navHeight - 10\n\n        window.scrollTo({\n          top: scrollToPosition,\n          behavior: 'smooth',\n        })\n\n        // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n        setTimeout(() => {\n          isManualScrollRef.current = false\n        }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n      }\n    },\n    []\n  )\n\n  return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  const { isMobile } = useBizProductContext()\n  \n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const { activeTab, setActiveTab } = useScrollSpy(tabs)\n  \n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      setActiveTab(tab)\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick, setActiveTab]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!isMobile || !activeTab || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeTab.id)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeTab?.id, isMobile])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  // \u79FB\u52A8\u7AEF\u6E32\u67D3\uFF1A\u6A2A\u5411\u6EDA\u52A8\n  if (isMobile) {\n    return (\n      <div\n        ref={scrollContainerRef}\n        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n        className={cn('flex gap-6 overflow-x-auto -mx-4 px-4', className)}\n      >\n        {tabs?.map(tab => (\n          <button\n            ref={el => setTabRef(tab.id, el)}\n            className={cn('text-sm relative py-[10px] text-[#949494] font-bold whitespace-nowrap flex-shrink-0', {\n              'text-[#1d1d1f]': activeTab?.id === tab.id,\n            })}\n            key={tab.id}\n            onClick={() => onTabClick(tab)}\n          >\n            {tab.label}\n          </button>\n        ))}\n        {renderRating}\n      </div>\n    )\n  }\n\n  // \u684C\u9762\u7AEF\u6E32\u67D3\n  return (\n    <div className={cn('flex gap-8', className)}>\n      {tabs?.map(tab => (\n        <button className=\"text-sm  relative py-[10px] font-bold\" key={tab.id} onClick={() => onTabClick(tab)}>\n          {tab.label}\n          <div\n            className={cn('absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0', {\n              'w-full': activeTab?.id === tab.id,\n            })}\n          />\n        </button>\n      ))}\n      {renderRating}\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "cn", "useState", "useCallback", "useRef", "useEffect", "useBizProductContext", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "b", "topEntry", "sortedEntries", "handleScroll", "handleSetActiveTab", "scrollToPosition", "ScrollSpyNav", "onSpyNavItemClick", "className", "renderRating", "isMobile", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "el", "ScrollSpyNav_default"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n  const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n  const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n  const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n  // \u540C\u6B65 activeTab \u5230 ref\n  useEffect(() => {\n    activeTabRef.current = activeTab\n  }, [activeTab])\n\n  useEffect(() => {\n    if (!tabs || tabs.length === 0) return\n\n    // \u6E05\u7406\u4E4B\u524D\u7684 observer\n    if (observerRef.current) {\n      observerRef.current.disconnect()\n    }\n\n    // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n    const purchaseBar = document.getElementById('purchase-bar')\n    const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n    // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n    sectionsRef.current.clear()\n    const elements: Element[] = []\n\n    tabs.forEach(tab => {\n      const id = tab.id || tab.href?.replace('#', '')\n      const element = document.getElementById(id)\n      if (element) {\n        sectionsRef.current.set(id, tab)\n        elements.push(element)\n      }\n    })\n\n    if (elements.length === 0) {\n      // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n      setActiveTab(tabs[0])\n      return\n    }\n\n    // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n    const observerOptions: IntersectionObserverInit = {\n      root: null,\n      rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n      threshold: [0, 0.25, 0.5, 0.75, 1],\n    }\n\n    const observerCallback: IntersectionObserverCallback = entries => {\n      // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n      if (isManualScrollRef.current) {\n        return\n      }\n\n      // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n      const scrollTop = window.scrollY || document.documentElement.scrollTop\n      if (scrollTop < navHeight + 50) {\n        // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n        const firstTab = tabs[0]\n        if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n          console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n          setActiveTab(firstTab)\n          onActiveChange?.(firstTab)\n        }\n        return\n      }\n\n      // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n      const intersectingEntries = entries\n        .filter(entry => entry.isIntersecting)\n        .sort((a, b) => {\n          // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n          return a.boundingClientRect.top - b.boundingClientRect.top\n        })\n\n      if (intersectingEntries.length > 0) {\n        // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n        const topEntry = intersectingEntries[0]\n        const id = topEntry.target.id\n        const tab = sectionsRef.current.get(id)\n\n        if (tab) {\n          setActiveTab(tab)\n          onActiveChange?.(tab)\n        }\n      } else {\n        // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n        const sortedEntries = [...entries].sort((a, b) => {\n          return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n        })\n\n        if (sortedEntries.length > 0) {\n          const closestEntry = sortedEntries[0]\n          const id = closestEntry.target.id\n          const tab = sectionsRef.current.get(id)\n\n          if (tab) {\n            setActiveTab(tab)\n            onActiveChange?.(tab)\n          }\n        }\n      }\n    }\n\n    observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n    // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n    elements.forEach(element => {\n      observerRef.current?.observe(element)\n    })\n\n    // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n    const handleScroll = () => {\n      if (isManualScrollRef.current) {\n        return\n      }\n\n      const scrollTop = window.scrollY || document.documentElement.scrollTop\n      // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n      if (scrollTop < navHeight + 50) {\n        const firstTab = tabs[0]\n        if (firstTab) {\n          setActiveTab(firstTab)\n          onActiveChange?.(firstTab)\n        }\n      }\n    }\n\n    window.addEventListener('scroll', handleScroll, { passive: true })\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [tabs])\n\n  // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n  useEffect(() => {\n    if (!activeTab && tabs && tabs.length > 0) {\n      setActiveTab(tabs[0])\n    }\n  }, [tabs, activeTab])\n\n  // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n  const handleSetActiveTab = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      setActiveTab(tab)\n\n      // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n      const id = tab.id || tab.href?.replace('#', '')\n      const element = document.getElementById(id)\n\n      if (element) {\n        const purchaseBar = document.getElementById('purchase-bar')\n        const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n        // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n        isManualScrollRef.current = true\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n        const elementTop = element.getBoundingClientRect().top + window.scrollY\n        const scrollToPosition = elementTop - navHeight - 10\n\n        window.scrollTo({\n          top: scrollToPosition,\n          behavior: 'smooth',\n        })\n\n        // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n        setTimeout(() => {\n          isManualScrollRef.current = false\n        }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n      }\n    },\n    []\n  )\n\n  return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  const { isMobile } = useBizProductContext()\n  \n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const { activeTab, setActiveTab } = useScrollSpy(tabs)\n  \n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      setActiveTab(tab)\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick, setActiveTab]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!isMobile || !activeTab || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeTab.id)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeTab?.id, isMobile])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  // \u79FB\u52A8\u7AEF\u6E32\u67D3\uFF1A\u6A2A\u5411\u6EDA\u52A8\n  if (isMobile) {\n    return (\n      <div\n        ref={scrollContainerRef}\n        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n        className={cn('flex gap-6 overflow-x-auto -mx-4 px-4', className)}\n      >\n        {tabs?.map(tab => (\n          <button\n            ref={el => setTabRef(tab.id, el)}\n            className={cn('text-sm relative py-[10px] text-[#949494] font-bold whitespace-nowrap flex-shrink-0', {\n              'text-[#1d1d1f]': activeTab?.id === tab.id,\n            })}\n            key={tab.id}\n            onClick={() => onTabClick(tab)}\n          >\n            {tab.label}\n          </button>\n        ))}\n        {renderRating}\n      </div>\n    )\n  }\n\n  // \u684C\u9762\u7AEF\u6E32\u67D3\n  return (\n    <div className={cn('flex gap-8', className)}>\n      {tabs?.map(tab => (\n        <button className=\"text-sm  relative py-[10px] font-bold\" key={tab.id} onClick={() => onTabClick(tab)}>\n          {tab.label}\n          <div\n            className={cn('absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0', {\n              'w-full': activeTab?.id === tab.id,\n            })}\n          />\n        </button>\n      ))}\n      {renderRating}\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "cn", "useState", "useCallback", "useRef", "useEffect", "useBizProductContext", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "b", "sortedEntries", "handleScroll", "handleSetActiveTab", "scrollToPosition", "ScrollSpyNav", "onSpyNavItemClick", "className", "renderRating", "isMobile", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "el", "ScrollSpyNav_default"]
 }