npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762257871632 → 1.0.26-alpha.1762307207505 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762257871632 → 1.0.26-alpha.1762307207505

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

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

@@ -1,2 +1,2 @@
-"use strict";var $=Object.create;var L=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var O=(t,l)=>{for(var a in l)L(t,a,{get:l[a],enumerable:!0})},A=(t,l,a,v)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of j(l))!W.call(t,r)&&r!==a&&L(t,r,{get:()=>l[r],enumerable:!(v=F(l,r))||v.enumerable});return t};var H=(t,l,a)=>(a=t!=null?$(Y(t)):{},A(l||!t||!t.__esModule?L(a,"default",{value:t,enumerable:!0}):a,t)),U=t=>A(L({},"__esModule",{value:!0}),t);var Q={};O(Q,{default:()=>J});module.exports=U(Q);var e=require("react/jsx-runtime"),C=require("../../../../AiuiProvider/index.js"),g=require("../../../../../components"),o=require("react"),y=require("swiper/react"),s=require("swiper/modules"),m=require("../../../../../helpers/index.js"),f=require("./types.js"),w=require("@radix-ui/react-tabs"),G=require("../../../BizProductProvider.js"),V=require("../../../hooks/use-variant-media.js"),R=require("./components/SpecsModal.js"),_=H(require("./components/CompareModal.js")),B=require("../../../utils/index.js");const I=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("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"})]}),z=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("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"})]}),Z=()=>{const{copyWriting:t}=(0,C.useAiuiContext)(),{product:l,variant:a,selectedOptions:v}=(0,G.useBizProductContext)(),r=(0,V.useVariantMedia)({product:l,variant:a}),[u,S]=(0,o.useState)(null),c=a?.metafields?.component?.custom_media_list;let d,b,T,h;c&&c?.available?(d=c?.product||[],b=c?.scenarios||[],T=c?.keyFeatures||[],h=c?.video||[]):(d=r?.productList,b=r?.sceneList,T=r?.keyFeaturesList,h=r?.videoList);const M=(0,o.useMemo)(()=>[...d,...b,...h],[d,b,h]),N={productList:d,sceneList:b,keyFeaturesList:T,videoList:h},x=(0,o.useMemo)(()=>(l?.payload?.components?.find(n=>n.componentKey==="ProductGallery")?.data||[])?.map(n=>({...n,galleries:N[n?.galleries]||[]})).filter(n=>n.galleries.length>0),[l?.payload,N]),P=(0,o.useRef)({}),[i,k]=(0,o.useState)(x?.[0]),D=(p,n)=>{switch(p?.galleryTabType){case f.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(q,{...p});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(w.Root,{className:"relative",defaultValue:x?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:x.map((p,n)=>(0,e.jsx)(w.Content,{className:"h-full",value:p.tabValue,children:D(p,n)},p.tabValue))}),(0,e.jsx)(K,{galleryTabs:x,activeGalleryTab:i,setActiveGalleryTab:k})]})})},K=({galleryTabs:t,activeGalleryTab:l,setActiveGalleryTab:a})=>{const{product:v}=(0,G.useBizProductContext)(),r=(0,o.useRef)(null);return(0,e.jsxs)("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:[(0,e.jsx)(w.List,{ref:r,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map(u=>(0,e.jsx)(w.Trigger,{className:(0,m.cn)("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",u.tabValue===l?.tabValue&&"bg-white"),onClick:S=>{if(a(u),r.current){const c=r.current,d=S.currentTarget,b=d.offsetLeft-c.offsetWidth/2+d.offsetWidth/2;c.scrollTo({left:b,behavior:"smooth"})}},value:u.tabValue,children:u.tabLabel},u.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:v.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(R.SpecsModal,{})," | ",(0,e.jsx)(_.default,{})]})})]})},E=(0,o.forwardRef)((t,l)=>{const{locale:a="us",copyWriting:v}=(0,C.useAiuiContext)(),{variant:r,totalSavings:u}=(0,G.useBizProductContext)(),S=(0,o.useRef)(null),[c,d]=(0,o.useState)(null),[b,T]=(0,o.useState)(!0),[h,M]=(0,o.useState)(!1),[N,x]=(0,o.useState)(null),P=(0,o.useMemo)(()=>{if(t?.galleryTabType===f.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===f.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,f.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]);return(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{ref:l,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:x,onProgress:i=>{T(i.isBeginning),M(i.isEnd)},pagination:{clickable:!0,el:S.current},onSlideChange:i=>{i&&(i.isEnd?t?.onCurrentTabLoopEnd?.():i.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:c},modules:[s.Mousewheel,s.Thumbs,s.Navigation,s.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,k)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsx)(g.Picture,{source:i?.image?.url,alt:i?.image?.altText,className:(0,m.cn)("h-full",P),imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideItem"+k))}),r.availableForSale&&!!u&&!t.index&&(0,e.jsx)(g.Badge,{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:`${(0,B.formatPrice)({amount:u,currencyCode:r?.price?.currencyCode,locale:a})} ${v?.off}`}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`,"swiper-button"),children:(0,e.jsx)(I,{className:(0,m.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`,"swiper-button"),children:(0,e.jsx)(z,{className:(0,m.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("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:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(y.Swiper,{className:"flex items-center justify-between",onSwiper:d,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[s.Navigation,s.Thumbs],children:t?.galleries?.map((i,k)=>(0,e.jsx)(y.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(g.Picture,{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"+k))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(g.Picture,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)(g.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2"})]})]}),(0,e.jsx)("div",{ref:S,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),q=t=>(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[s.Mousewheel,s.Thumbs,s.Navigation,s.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((l,a)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+a))}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:(0,e.jsx)(I,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:(0,e.jsx)(z,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ae=t=>(0,e.jsx)("div",{children:"3D View"});var J=Z;
+"use strict";var $=Object.create;var L=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var O=(t,l)=>{for(var a in l)L(t,a,{get:l[a],enumerable:!0})},A=(t,l,a,v)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of j(l))!W.call(t,r)&&r!==a&&L(t,r,{get:()=>l[r],enumerable:!(v=F(l,r))||v.enumerable});return t};var H=(t,l,a)=>(a=t!=null?$(Y(t)):{},A(l||!t||!t.__esModule?L(a,"default",{value:t,enumerable:!0}):a,t)),U=t=>A(L({},"__esModule",{value:!0}),t);var Q={};O(Q,{default:()=>J});module.exports=U(Q);var e=require("react/jsx-runtime"),C=require("../../../../AiuiProvider/index.js"),g=require("../../../../../components"),o=require("react"),y=require("swiper/react"),s=require("swiper/modules"),m=require("../../../../../helpers/index.js"),f=require("./types.js"),w=require("@radix-ui/react-tabs"),G=require("../../../BizProductProvider.js"),V=require("../../../hooks/use-variant-media.js"),R=require("./components/SpecsModal.js"),_=H(require("./components/CompareModal.js")),B=require("../../../utils/index.js");const I=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("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"})]}),z=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("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"})]}),Z=()=>{const{copyWriting:t}=(0,C.useAiuiContext)(),{product:l,variant:a,selectedOptions:v}=(0,G.useBizProductContext)(),r=(0,V.useVariantMedia)({product:l,variant:a}),[u,S]=(0,o.useState)(null),c=a?.metafields?.component?.custom_media_list;let d,b,T,h;c&&c?.available?(d=c?.product||[],b=c?.scenarios||[],T=c?.keyFeatures||[],h=c?.video||[]):(d=r?.productList,b=r?.sceneList,T=r?.keyFeaturesList,h=r?.videoList);const M=(0,o.useMemo)(()=>[...d,...b,...h],[d,b,h]),N={productList:d,sceneList:b,keyFeaturesList:T,videoList:h},x=(0,o.useMemo)(()=>(l?.payload?.components?.find(n=>n.componentKey==="ProductGallery")?.data||[])?.map(n=>({...n,galleries:N[n?.galleries]||[]})).filter(n=>n.galleries.length>0),[l?.payload,N]),P=(0,o.useRef)({}),[i,k]=(0,o.useState)(x?.[0]),D=(p,n)=>{switch(p?.galleryTabType){case f.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(E,{...p,index:n});case f.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(q,{...p});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(w.Root,{className:"relative",defaultValue:x?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:x.map((p,n)=>(0,e.jsx)(w.Content,{className:"h-full",value:p.tabValue,children:D(p,n)},p.tabValue))}),(0,e.jsx)(K,{galleryTabs:x,activeGalleryTab:i,setActiveGalleryTab:k})]})})},K=({galleryTabs:t,activeGalleryTab:l,setActiveGalleryTab:a})=>{const{product:v}=(0,G.useBizProductContext)(),r=(0,o.useRef)(null);return(0,e.jsxs)("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:[(0,e.jsx)(w.List,{ref:r,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map(u=>(0,e.jsx)(w.Trigger,{className:(0,m.cn)("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",u.tabValue===l?.tabValue&&"bg-white"),onClick:S=>{if(a(u),r.current){const c=r.current,d=S.currentTarget,b=d.offsetLeft-c.offsetWidth/2+d.offsetWidth/2;c.scrollTo({left:b,behavior:"smooth"})}},value:u.tabValue,children:u.tabLabel},u.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:v.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(R.SpecsModal,{})," | ",(0,e.jsx)(_.default,{})]})})]})},E=(0,o.forwardRef)((t,l)=>{const{locale:a="us",copyWriting:v}=(0,C.useAiuiContext)(),{variant:r,totalSavings:u}=(0,G.useBizProductContext)(),S=(0,o.useRef)(null),[c,d]=(0,o.useState)(null),[b,T]=(0,o.useState)(!0),[h,M]=(0,o.useState)(!1),[N,x]=(0,o.useState)(null),P=(0,o.useMemo)(()=>{if(t?.galleryTabType===f.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===f.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,f.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]);return(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{ref:l,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:x,onProgress:i=>{T(i.isBeginning),M(i.isEnd)},pagination:{clickable:!0,el:S.current},onSlideChange:i=>{i&&(i.isEnd?t?.onCurrentTabLoopEnd?.():i.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:c},modules:[s.Mousewheel,s.Thumbs,s.Navigation,s.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,k)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsx)(g.Picture,{source:i?.image?.url,alt:i?.image?.altText,className:(0,m.cn)("h-full",P),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+k))}),r.availableForSale&&!!u&&!t.index&&(0,e.jsx)(g.Badge,{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:`${(0,B.formatPrice)({amount:u,currencyCode:r?.price?.currencyCode,locale:a})} ${v?.off}`}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`,"swiper-button"),children:(0,e.jsx)(I,{className:(0,m.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`,"swiper-button"),children:(0,e.jsx)(z,{className:(0,m.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("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:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(y.Swiper,{className:"flex items-center justify-between",onSwiper:d,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[s.Navigation,s.Thumbs],children:t?.galleries?.map((i,k)=>(0,e.jsx)(y.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(g.Picture,{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"+k))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(g.Picture,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)(g.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2"})]})]}),(0,e.jsx)("div",{ref:S,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),q=t=>(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[s.Mousewheel,s.Thumbs,s.Navigation,s.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((l,a)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:l?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+a))}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:(0,e.jsx)(I,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,m.cn)("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:(0,e.jsx)(z,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ae=t=>(0,e.jsx)("div",{children:"3D View"});var J=Z;
 //# sourceMappingURL=index.js.map

package/dist/cjs/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  // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n  const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n\n  // useEffect(() => {\n  //   if (selectedOptions?.color) {\n  //     setActiveGalleryTab(galleryTabs?.find((item: any) => item.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN))\n  //   }\n  // }, [selectedOptions, galleryTabs])\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      //   GalleryTabType.GALLERY_IMAGE_FEATURES ||\n      //   GalleryTabType.GALLERY_IMAGE_SCENE:\n      //   return (\n      //     <ProductGalleryTabImage\n      //       {...tab}\n      //       // onCurrentTabLoopEnd={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       // onCurrentTabLoopStart={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       index={index}\n      //     />\n      //   )\n\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_VIDEO:\n        return <ProductGalleryTabVideo {...tab} />\n      // case GalleryTabType.GALLERY_3D_VIEW:\n      //   return <ProductGalleryTab3DView {...item} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n        {/* <Swiper\n          className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n          onSwiper={setSwiper}\n          loop={true}\n          // onProgress={swiper => {\n          //   setStart(swiper.isBeginning)\n          //   setEnd(swiper.isEnd)\n          // }}\n          modules={[Mousewheel]}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n        >\n          {galleryTabs.map((item, index) => {\n            return (\n              <Content forceMount key={item.tabValue} value={item.tabValue}>\n                <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n              </Content>\n            )\n          })}\n        </Swiper>\n        <div\n          className={cn(\n            'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-prev`\n          )}\n        >\n          <SwiperLeftButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slidePrev()\n              }\n            }}\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-next`\n          )}\n        >\n          <SwiperRightButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slideNext()\n              }\n            }}\n          />\n        </div> */}\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        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\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 => {\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                  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\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  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        onSlideChange={swiper => {\n          if (swiper) {\n            if (swiper.isEnd) {\n              props?.onCurrentTabLoopEnd?.()\n            } else if (swiper.isBeginning) {\n              props?.onCurrentTabLoopStart?.()\n            }\n          }\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-contain 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      >\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      >\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            <Text\n              html={props?.comment?.content}\n              className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2\"\n            />\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\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        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      >\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      >\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  // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n  const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n\n  // useEffect(() => {\n  //   if (selectedOptions?.color) {\n  //     setActiveGalleryTab(galleryTabs?.find((item: any) => item.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN))\n  //   }\n  // }, [selectedOptions, galleryTabs])\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      //   GalleryTabType.GALLERY_IMAGE_FEATURES ||\n      //   GalleryTabType.GALLERY_IMAGE_SCENE:\n      //   return (\n      //     <ProductGalleryTabImage\n      //       {...tab}\n      //       // onCurrentTabLoopEnd={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       // onCurrentTabLoopStart={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       index={index}\n      //     />\n      //   )\n\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_VIDEO:\n        return <ProductGalleryTabVideo {...tab} />\n      // case GalleryTabType.GALLERY_3D_VIEW:\n      //   return <ProductGalleryTab3DView {...item} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n        {/* <Swiper\n          className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n          onSwiper={setSwiper}\n          loop={true}\n          // onProgress={swiper => {\n          //   setStart(swiper.isBeginning)\n          //   setEnd(swiper.isEnd)\n          // }}\n          modules={[Mousewheel]}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n        >\n          {galleryTabs.map((item, index) => {\n            return (\n              <Content forceMount key={item.tabValue} value={item.tabValue}>\n                <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n              </Content>\n            )\n          })}\n        </Swiper>\n        <div\n          className={cn(\n            'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-prev`\n          )}\n        >\n          <SwiperLeftButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slidePrev()\n              }\n            }}\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-next`\n          )}\n        >\n          <SwiperRightButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slideNext()\n              }\n            }}\n          />\n        </div> */}\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        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\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 => {\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                  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\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  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        onSlideChange={swiper => {\n          if (swiper) {\n            if (swiper.isEnd) {\n              props?.onCurrentTabLoopEnd?.()\n            } else if (swiper.isBeginning) {\n              props?.onCurrentTabLoopStart?.()\n            }\n          }\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      >\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      >\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            <Text\n              html={props?.comment?.content}\n              className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2\"\n            />\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\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        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      >\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      >\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": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "gallerySwiperRefs", "activeGalleryTab", "setActiveGalleryTab", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "imageClassName", "jIndex", "ProductGalleryTab3DView"]
 }

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

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

package/dist/cjs/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 type { ProductSummaryProps } from './types'\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 { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\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  } = useBizProductContext()\n\n  const [currentJoinedRecommendBuyProducts, setCurrentJoinedRecommendBuyProducts] = useState<{\n    bundle?: boolean\n    gift?: boolean\n    exchange?: boolean\n  }>({\n    bundle: false,\n    gift: false,\n    exchange: false,\n  })\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const [currentBundleVariant] = checkedBundle?.variants || []\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    return new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(savingDetail?.coupon)\n      .minus(currentBundlePrice)\n      .toNumber()\n  }, [currentProductVariant, totalSavings, checkedBundle])\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 ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-8 desktop:mt-16\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 py-6 tablet:p-8\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5\">\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=\"aspect-[644/320]\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"h-full w-full\"\n                imgClassName=\"object-contain h-full\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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                    {totalSavings > 0 && (\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 && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.gift}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.bundle}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, exchange: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.exchange}\n                    exchange={joinedRecommendBuyProducts?.exchange}\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                          setJoinedRecommendBuyProducts?.({ exchange })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, exchange: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.exchange}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setJoinedRecommendBuyProducts?.({ bundle })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, bundle: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.bundle}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setJoinedRecommendBuyProducts?.({ gift })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, gift: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.gift}\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={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, 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: comparePriceRemovedFreeGift,\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                  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                  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  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleListItem: BundleListItem\n  currentJoinedRecommendBuyProducts?: 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=\"flex items-center justify-between\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n            <Picture\n              source={bundleVariant?.variant?.image?.url}\n              className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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        )\n      })}\n      <div className=\"flex flex-col items-end gap-1 justify-center\">\n        {!!bundleListItem && (\n          <Text\n            className=\"text-base desktop:text-2xl font-bold\"\n            html={formatPrice({\n              amount: bundleVariants[0]?.price,\n              locale,\n              currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n            })}\n          />\n        )}\n        {!currentJoinedRecommendBuyProducts && (\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\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  gift: ProductVariant\n  currentJoinedRecommendBuyProducts?: boolean\n  status?: 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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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        {currentJoinedRecommendBuyProducts && (\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  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  exchangeOperation: (exchange: ProductVariant) => void\n  exchange: ProductVariant & { finalPrice?: ProductPrice }\n  currentJoinedRecommendBuyProducts?: 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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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        {currentJoinedRecommendBuyProducts && (\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": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_helpers", "import_decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "currentJoinedRecommendBuyProducts", "setCurrentJoinedRecommendBuyProducts", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "currentBundlePrice", "Decimal", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "count", "exchangeOperation", "setCheckedExchangePurchase"]
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\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 { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\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  } = useBizProductContext()\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const [currentBundleVariant] = checkedBundle?.variants || []\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    return new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(savingDetail?.coupon)\n      .minus(currentBundlePrice)\n      .toNumber()\n  }, [currentProductVariant, totalSavings, checkedBundle])\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  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\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 py-6 tablet:p-8\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5\">\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=\"aspect-[644/320]\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"h-full w-full\"\n                imgClassName=\"object-contain h-full\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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                    {totalSavings > 0 && (\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={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, 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: comparePriceRemovedFreeGift,\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                  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                  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=\"flex items-center justify-between\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n            <Picture\n              source={bundleVariant?.variant?.image?.url}\n              className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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        )\n      })}\n      <div className=\"flex flex-col items-end gap-1 justify-center\">\n        {!!bundleListItem && (\n          <Text\n            className=\"text-base desktop:text-2xl font-bold\"\n            html={formatPrice({\n              amount: bundleVariants?.[0]?.price || 0,\n              locale,\n              currencyCode: bundleVariants?.[0]?.variant?.price?.currencyCode || '',\n            })}\n          />\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\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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] 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": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_helpers", "import_decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setCheckedGift", "setCheckedExchangePurchase", "setCheckedBundle", "setSavingDetail", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "currentBundlePrice", "Decimal", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "bundleVariants", "giftOperation", "freeLabel", "count", "exchangeOperation"]
 }

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var w=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of S(t))!P.call(e,l)&&l!==o&&n(e,l,{get:()=>t[l],enumerable:!(r=h(t,l))||r.enumerable});return e};var F=(e,t,o)=>(o=e!=null?w(k(e)):{},b(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),M=e=>b(n({},"__esModule",{value:!0}),e);var z={};B(z,{default:()=>A});module.exports=M(z);var a=require("react/jsx-runtime"),i=require("../../../../../components"),f=require("../../../../AiuiProvider/index.js"),v=require("../../../BizProductProvider.js"),g=require("react"),s=require("../../../utils"),d=F(require("decimal.js"));const T=()=>{const{copyWriting:e,locale:t="us"}=(0,f.useAiuiContext)(),{variant:o,finalPrice:r,totalSavings:l,memberFunctionResult:u,isLogin:x,comparePrice:p,onAddToCart:C,onBuyNow:N,savingDetail:m,coupon:G}=(0,v.useBizProductContext)(),y=(0,g.useMemo)(()=>new d.default(p).minus(m.freeGift).toNumber(),[p,m]),c=Math.max(u?.withCouponMemberTotalSave??0,u?.withoutCouponMaxMemberTotalSave??0);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4",children:[o.availableForSale?(0,a.jsxs)("div",{className:"flex items-center justify-between tablet:flex-col desktop:items-end",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(i.Text,{className:"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,s.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),l>0&&(0,a.jsx)(i.Text,{className:"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,s.formatPrice)({amount:y,currencyCode:o.price.currencyCode,locale:t})})]}),l>0&&(0,a.jsx)(i.Text,{className:"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${c>0&&x?e?.memberSaving:e?.totalSavings} ${(0,s.formatPrice)({amount:c>0&&x?c:new d.default(l).minus(m?.freeGift).toNumber(),currencyCode:o.price.currencyCode,locale:t})}`})]}):(0,a.jsx)(i.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[(0,a.jsx)(i.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>C?.(),children:e?.addToCart??"Add to Cart"}),(0,a.jsx)(i.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>N?.(),children:e?.buyNow??"Buy Now"})]})]})};var A=T;
+"use strict";var S=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of P(t))!T.call(e,l)&&l!==o&&n(e,l,{get:()=>t[l],enumerable:!(r=k(t,l))||r.enumerable});return e};var M=(e,t,o)=>(o=e!=null?S(B(e)):{},b(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>b(n({},"__esModule",{value:!0}),e);var L={};F(L,{default:()=>G});module.exports=A(L);var a=require("react/jsx-runtime"),i=require("../../../../../components"),f=require("../../../../AiuiProvider/index.js"),g=require("../../../BizProductProvider.js"),v=require("react"),s=require("../../../utils"),c=M(require("decimal.js"));const z=()=>{const{copyWriting:e,locale:t="us"}=(0,f.useAiuiContext)(),{variant:o,finalPrice:r,totalSavings:l,memberFunctionResult:u,isLogin:x,comparePrice:p,onAddToCart:C,onBuyNow:N,savingDetail:m,coupon:D,addToCartLoading:y,buyNowLoading:w}=(0,g.useBizProductContext)(),h=(0,v.useMemo)(()=>new c.default(p).minus(m.freeGift).toNumber(),[p,m]),d=Math.max(u?.withCouponMemberTotalSave??0,u?.withoutCouponMaxMemberTotalSave??0);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4",children:[o.availableForSale?(0,a.jsxs)("div",{className:"flex items-center justify-between tablet:flex-col desktop:items-end",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(i.Text,{className:"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,s.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),l>0&&(0,a.jsx)(i.Text,{className:"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,s.formatPrice)({amount:h,currencyCode:o.price.currencyCode,locale:t})})]}),l>0&&(0,a.jsx)(i.Text,{className:"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${d>0&&x?e?.memberSaving:e?.totalSavings} ${(0,s.formatPrice)({amount:d>0&&x?d:new c.default(l).minus(m?.freeGift).toNumber(),currencyCode:o.price.currencyCode,locale:t})}`})]}):(0,a.jsx)(i.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[(0,a.jsx)(i.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>C?.(),loading:y,children:e?.addToCart??"Add to Cart"}),(0,a.jsx)(i.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:w,className:"w-1/2 tablet:w-auto",onClick:()=>N?.(),children:e?.buyNow??"Buy Now"})]})]})};var G=z;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
-  "sourcesContent": ["import { Text, Button } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport Decimal from 'decimal.js'\n\nconst ProductActions = () => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    memberFunctionResult,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    coupon,\n  } = useBizProductContext()\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  const memberPriceSave = Math.max(\n    memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n    memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n  )\n\n  return (\n    <div className=\"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4\">\n      {variant.availableForSale ? (\n        <div className=\"flex items-center justify-between tablet:flex-col desktop:items-end\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n              html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n            />\n            {totalSavings > 0 && (\n              <Text\n                className=\"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n                html={formatPrice({\n                  amount: comparePriceRemovedFreeGift,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n          </div>\n          {totalSavings > 0 && (\n            <Text\n              className=\"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\n              html={`${memberPriceSave > 0 && isLogin ? copyWriting?.memberSaving : copyWriting?.totalSavings} ${formatPrice({ amount: memberPriceSave > 0 && isLogin ? memberPriceSave : new Decimal(totalSavings).minus(savingDetail?.freeGift).toNumber(), currencyCode: variant.price.currencyCode, locale })}`}\n            />\n          )}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"w-1/2 tablet:w-auto\"\n          onClick={() => onAddToCart?.()}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"w-1/2 tablet:w-auto\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductActions\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCU,IAAAI,EAAA,6BApCVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAoB,yBAEpB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAA8B,WAClC,IAAM,IAAI,EAAAC,QAAQN,CAAY,EAAE,MAAMG,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACH,EAAcG,CAAY,CAC7B,EAEMI,EAAkB,KAAK,IAC3BT,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAEA,SACE,QAAC,OAAI,UAAU,6EACZ,UAAAH,EAAQ,oBACP,QAAC,OAAI,UAAU,sEACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAAE,OAAQC,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,EAC5F,EACCG,EAAe,MACd,OAAC,QACC,UAAU,gGACV,QAAM,eAAY,CAChB,OAAQQ,EACR,aAAcV,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GAEJ,EACCG,EAAe,MACd,OAAC,QACC,UAAU,sFACV,KAAM,GAAGU,EAAkB,GAAKR,EAAUN,GAAa,aAAeA,GAAa,YAAY,OAAI,eAAY,CAAE,OAAQc,EAAkB,GAAKR,EAAUQ,EAAkB,IAAI,EAAAD,QAAQT,CAAY,EAAE,MAAMM,GAAc,QAAQ,EAAE,SAAS,EAAG,aAAcR,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAAC,GACrS,GAEJ,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMD,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAE5B,SAAAR,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMO,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOV,EAAQS",
-  "names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_decimal", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "comparePriceRemovedFreeGift", "Decimal", "memberPriceSave"]
+  "sourcesContent": ["import { Text, Button } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport Decimal from 'decimal.js'\n\nconst ProductActions = () => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    memberFunctionResult,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    coupon,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  const memberPriceSave = Math.max(\n    memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n    memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n  )\n\n  return (\n    <div className=\"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4\">\n      {variant.availableForSale ? (\n        <div className=\"flex items-center justify-between tablet:flex-col desktop:items-end\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n              html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n            />\n            {totalSavings > 0 && (\n              <Text\n                className=\"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n                html={formatPrice({\n                  amount: comparePriceRemovedFreeGift,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n          </div>\n          {totalSavings > 0 && (\n            <Text\n              className=\"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\n              html={`${memberPriceSave > 0 && isLogin ? copyWriting?.memberSaving : copyWriting?.totalSavings} ${formatPrice({ amount: memberPriceSave > 0 && isLogin ? memberPriceSave : new Decimal(totalSavings).minus(savingDetail?.freeGift).toNumber(), currencyCode: variant.price.currencyCode, locale })}`}\n            />\n          )}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"w-1/2 tablet:w-auto\"\n          onClick={() => onAddToCart?.()}\n          loading={addToCartLoading}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          loading={buyNowLoading}\n          className=\"w-1/2 tablet:w-auto\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductActions\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCU,IAAAI,EAAA,6BAtCVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAoB,yBAEpB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAA8B,WAClC,IAAM,IAAI,EAAAC,QAAQR,CAAY,EAAE,MAAMG,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACH,EAAcG,CAAY,CAC7B,EAEMM,EAAkB,KAAK,IAC3BX,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAEA,SACE,QAAC,OAAI,UAAU,6EACZ,UAAAH,EAAQ,oBACP,QAAC,OAAI,UAAU,sEACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAAE,OAAQC,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,EAC5F,EACCG,EAAe,MACd,OAAC,QACC,UAAU,gGACV,QAAM,eAAY,CAChB,OAAQU,EACR,aAAcZ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GAEJ,EACCG,EAAe,MACd,OAAC,QACC,UAAU,sFACV,KAAM,GAAGY,EAAkB,GAAKV,EAAUN,GAAa,aAAeA,GAAa,YAAY,OAAI,eAAY,CAAE,OAAQgB,EAAkB,GAAKV,EAAUU,EAAkB,IAAI,EAAAD,QAAQX,CAAY,EAAE,MAAMM,GAAc,QAAQ,EAAE,SAAS,EAAG,aAAcR,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAAC,GACrS,GAEJ,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMD,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAC7B,QAASI,EAER,SAAAZ,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASW,EACT,UAAU,sBACV,QAAS,IAAMJ,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOV,EAAQS",
+  "names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_decimal", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "addToCartLoading", "buyNowLoading", "comparePriceRemovedFreeGift", "Decimal", "memberPriceSave"]
 }

package/dist/esm/biz-components/HeroBanner/Countdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{cn as i}from"../../helpers/index.js";import{useEffect as N,useRef as R,useState as T}from"react";const n=(o,l=2)=>String(Math.abs(o)).padStart(l,"0"),r="h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box",d="lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold",F=({endDate:o,endDate_tz:l,locale:b,onExpire:u})=>{const s=R(Date.parse(o)),[w,f]=T(()=>{const e=s.current;return isNaN(e)?0:Math.max(0,e-Date.now())});N(()=>{s.current=Date.parse(o),f(isNaN(s.current)?0:Math.max(0,s.current-Date.now()))},[o]),N(()=>{if(isNaN(s.current))return;let e=!1;const m=()=>{const I=Date.now(),h=Math.max(0,s.current-I);f(h),h<=0&&!e&&(e=!0,u?.())};m();const C=window.setInterval(m,1e3);return()=>clearInterval(C)},[u]);const p=Math.floor(w/1e3),M=p%60,v=Math.floor(p/60),D=v%60,x=Math.floor(v/60),y=x%24,S=Math.floor(x/24),k=l||Intl.DateTimeFormat().resolvedOptions().timeZone;let g="\u2014";const c=s.current;if(!isNaN(c))try{const e=new Date(c);g=new Intl.DateTimeFormat(b||navigator.language,{timeZone:k,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(e)}catch{g=new Date(c).toISOString()}return a("div",{className:"w-full flex gap-1 items-center","aria-live":"polite",children:[a("div",{className:i(r,"time-days-box"),children:[t("p",{className:d,children:n(S,2)}),t("div",{children:"Day"})]}),t("div",{className:"text-2xl font-bold text-info-white",children:":"}),a("div",{className:i(r,"time-hours-box"),children:[t("p",{className:d,children:n(y,2)}),t("div",{children:"Hours"})]}),t("div",{className:"text-2xl font-bold text-info-white",children:":"}),a("div",{className:i(r,"time-minutes-box"),children:[t("p",{className:d,children:n(D,2)}),t("div",{children:"Mins"})]}),t("div",{className:"text-2xl font-bold text-info-white",children:":"}),a("div",{className:i(r,"time-seconds-box"),children:[t("p",{className:d,children:n(M,2)}),t("div",{children:"Secs"})]})]})};var O=F;export{F as CountdownByEndDate,O as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{cn as a}from"../../helpers/index.js";import{useEffect as b,useRef as H,useState as D}from"react";const i=(n,c=2)=>String(Math.abs(n)).padStart(c,"0"),r="h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box",d="lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold",z=({endDate:n,endDate_tz:c,locale:M,onExpire:f})=>{const s=H(Date.parse(n)),[y,p]=D(()=>{const t=s.current;return isNaN(t)?0:Math.max(0,t-Date.now())}),[l,v]=D(()=>{const t=s.current;return!isNaN(t)&&t<=Date.now()});b(()=>{s.current=Date.parse(n),p(isNaN(s.current)?0:Math.max(0,s.current-Date.now()));const t=s.current;v(!isNaN(t)&&t<=Date.now())},[n]),b(()=>{if(l||isNaN(s.current))return;let t=!1;const u=()=>{const F=Date.now(),w=Math.max(0,s.current-F);p(w),w<=0&&!t&&(t=!0,v(!0),f?.())};u();const T=window.setInterval(u,1e3);return()=>clearInterval(T)},[f,l]);const x=Math.floor(y/1e3),S=x%60,N=Math.floor(x/60),k=N%60,g=Math.floor(N/60),C=g%24,I=Math.floor(g/24),R=c||Intl.DateTimeFormat().resolvedOptions().timeZone;let h="\u2014";const m=s.current;if(!isNaN(m))try{const t=new Date(m);h=new Intl.DateTimeFormat(M||navigator.language,{timeZone:R,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}catch{h=new Date(m).toISOString()}return l?null:o("div",{className:"w-full flex gap-1 items-center","aria-live":"polite",children:[o("div",{className:a(r,"time-days-box"),children:[e("p",{className:d,children:i(I,2)}),e("div",{children:"Day"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:a(r,"time-hours-box"),children:[e("p",{className:d,children:i(C,2)}),e("div",{children:"Hours"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:a(r,"time-minutes-box"),children:[e("p",{className:d,children:i(k,2)}),e("div",{children:"Mins"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:a(r,"time-seconds-box"),children:[e("p",{className:d,children:i(S,2)}),e("div",{children:"Secs"})]})]})};var Z=z;export{z as CountdownByEndDate,Z as default};
 //# sourceMappingURL=Countdown.js.map

package/dist/esm/biz-components/HeroBanner/Countdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/Countdown.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, onExpire }) => {\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  return (\n    <div className=\"w-full flex gap-1 items-center\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div>Day</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div>Hours</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div>Mins</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div>Secs</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "pad", "n", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "onExpire", "targetMsRef", "remainingMs", "setRemainingMs", "t", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, onExpire }) => {\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n  // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n  const [hidden, setHidden] = useState<boolean>(() => {\n    const t = targetMsRef.current\n    return !isNaN(t) && t <= Date.now()\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n    // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n    const t = targetMsRef.current\n    setHidden(!isNaN(t) && t <= Date.now())\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire, hidden])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  if (hidden) return null\n\n  return (\n    <div className=\"w-full flex gap-1 items-center\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div>Day</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div>Hours</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div>Mins</div>\n      </div>\n      <div className=\"text-2xl font-bold text-info-white\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div>Secs</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "pad", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "onExpire", "targetMsRef", "remainingMs", "setRemainingMs", "hidden", "setHidden", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
 }