npm - @anker-in/headless-ui - Versions diffs - 1.0.20-alpha.1761740444315 → 1.0.20-alpha.1761817874871 - Mend

@anker-in/headless-ui 1.0.20-alpha.1761740444315 → 1.0.20-alpha.1761817874871

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    const ksp_value = variant.metafields?.component?.ksp || product.metafields?.component?.ksp\n    const result = isMobile ? ksp_value?.mobileList : ksp_value?.list\n    return result?.filter((item: any) => !!item?.text)\n  }, [variant.metafields?.component?.ksp, isMobile])\n\n  const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n  const ProductHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  if (!ksp?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"font-bold !p-0 text-base\">\n              {ProductHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal ksp={ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {ksp.map((item: any) => (\n          <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] max-w-[227px] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.text}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.text}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      const curIndex = ksp.findIndex(item => item.text === clickActiveKspItem?.text)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    }, 100)\n  }, [clickActiveKspItem, ksp])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.text} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.text} key={item.text}>\n            <Picture\n              source={item.img}\n              className=\"w-full h-[304px] desktop:h-[480px]\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"py-4 desktop:py-6 w-full overflow-visible\">\n          <div ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n            <div\n              className=\"w-fit rounded-full bg-[#EAEAEC]\"\n              style={{\n                scrollbarWidth: 'none',\n                msOverflowStyle: 'none',\n              }}\n            >\n              <List className=\"flex p-1 w-max\">\n                {ksp.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n                      item.text === activeKspItem?.text && 'bg-white'\n                    )}\n                    onClick={() => {\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.text}\n                  >\n                    <Text html={item.text} className=\"font-bold text-[14px] leading-tight\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n            <div className=\"mt-4\">\n              {ksp.map(item => (\n                <Content value={item.label} className=\"font-bold text-base desktop:text-[18px]\">\n                  {item.description}\n                </Content>\n              ))}\n            </div>\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default ProductHighlight\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    const ksp_value = variant.metafields?.component?.ksp || product.metafields?.component?.ksp\n    const result = isMobile ? ksp_value?.mobileList : ksp_value?.list\n    return result?.filter((item: any) => !!item?.text)\n  }, [variant.metafields?.component?.ksp, isMobile])\n\n  const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n  const ProductHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  if (!ksp?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"font-bold !p-0 text-base\">\n              {ProductHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal ksp={ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {ksp.map((item: any) => (\n          <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.text}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.text}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      const curIndex = ksp.findIndex(item => item.text === clickActiveKspItem?.text)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    }, 100)\n  }, [clickActiveKspItem, ksp])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.text} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.text} key={item.text}>\n            <Picture\n              source={item.img}\n              className=\"w-full h-[304px] desktop:h-[480px]\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"py-4 desktop:py-6 w-full overflow-visible\">\n          <div ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n            <div\n              className=\"w-fit rounded-full bg-[#EAEAEC]\"\n              style={{\n                scrollbarWidth: 'none',\n                msOverflowStyle: 'none',\n              }}\n            >\n              <List className=\"flex p-1 w-max\">\n                {ksp.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n                      item.text === activeKspItem?.text && 'bg-white'\n                    )}\n                    onClick={() => {\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.text}\n                  >\n                    <Text html={item.text} className=\"font-bold text-[14px] leading-tight\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n            <div className=\"mt-4\">\n              {ksp.map(item => (\n                <Content value={item.label} className=\"font-bold text-base desktop:text-[18px]\">\n                  {item.description}\n                </Content>\n              ))}\n            </div>\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default ProductHighlight\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "ProductHighlight", "product", "variant", "isMobile", "open", "setOpen", "ksp", "ksp_value", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as ee,jsx as e,jsxs as i}from"react/jsx-runtime";import{useAiuiContext as M}from"../../../../AiuiProvider/index.js";import{Text as D,Picture as T,Badge as j}from"../../../../../components";import{useMemo as V,useState as b,forwardRef as F,useRef as E}from"react";import{Swiper as k,SwiperSlide as N}from"swiper/react";import{Navigation as L,Mousewheel as z,Thumbs as G,Pagination as I}from"swiper/modules";import{cn as y}from"../../../../../helpers/index.js";import{GalleryTabType as R}from"./types.js";import{Content as _,List as O,Root as W,Trigger as Y}from"@radix-ui/react-tabs";import{useBizProductContext as P}from"../../../BizProductProvider.js";import{useVariantMedia as Z}from"../../../hooks/use-variant-media.js";import{SpecsModal as H}from"./components/SpecsModal.js";import K from"./components/CompareModal.js";import{formatPrice as q}from"../../../utils/index.js";const A=t=>i("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),B=t=>i("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),J=()=>{const{copyWriting:t}=M(),{product:o,variant:s,isMobile:v}=P(),a=Z({product:o,variant:s}),[w,h]=b(null),n=s?.metafields?.component?.custom_media_list;let p,u,g,m;n&&n?.available?(p=n?.product||[],u=n?.scenarios||[],g=n?.keyFeatures||[],m=n?.video||[]):(p=a?.productList,u=a?.sceneList,g=a?.keyFeaturesList,m=a?.videoList);const C=V(()=>[...p,...u,...m],[p,u,m]),S={productList:p,sceneList:u,keyFeaturesList:g,videoList:m},c=V(()=>(o?.payload?.components?.find(r=>r.componentKey==="ProductGallery")?.data||[])?.map(r=>({...r,galleries:S[r?.galleries]||[]})).filter(r=>r.galleries.length>0),[o?.payload,S]),l=E({}),[f,x]=b(c?.[0]),$=(d,r)=>{switch(d?.galleryTabType){case R.GALLERY_IMAGE:return e(U,{...d,onCurrentTabLoopEnd:()=>{x(c?.[r])},onCurrentTabLoopStart:()=>{x(c?.[r])},index:r});case R.GALLERY_VIDEO:return e(X,{...d});default:return null}};return e("div",{id:"ipc-product-gallery",children:i(W,{className:"relative",defaultValue:c?.[0]?.tabValue,children:[e("div",{className:"h-[420px] tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:c.map((d,r)=>e(_,{className:"h-full",value:d.tabValue,children:$(d,r)},d.tabValue))}),e(Q,{galleryTabs:c,activeGalleryTab:f,setActiveGalleryTab:x})]})})},Q=({galleryTabs:t,activeGalleryTab:o,setActiveGalleryTab:s})=>{const{product:v}=P();return i("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[e(O,{className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map(a=>e(Y,{className:y("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",a.tabValue===o?.tabValue&&"bg-white"),onClick:()=>s(a),value:a.tabValue,children:a.tabLabel},a.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:v.metafields?.global?.specifications&&i(ee,{children:[e(H,{})," | ",e(K,{})]})})]})},U=F((t,o)=>{const{locale:s="us",copyWriting:v}=M(),{variant:a,totalSavings:w}=P(),h=E(null),[n,p]=b(null),[u,g]=b(!0),[m,C]=b(!1),[S,c]=b(null);return i("div",{className:"h-full",children:[e(k,{ref:o,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:c,onProgress:l=>{g(l.isBeginning),C(l.isEnd)},pagination:{clickable:!0,el:h.current},onSlideChange:l=>{l&&(l.isEnd?t?.onCurrentTabLoopEnd?.():l.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:n},modules:[z,G,L,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((l,f)=>e(N,{className:"h-full",children:e(T,{source:l?.image?.url,alt:l?.image?.altText,className:"h-full",imgClassName:"object-contain h-full "})},t?.id+"SwiperSlideItem"+f))}),a.availableForSale&&!!w&&!t.index&&e(j,{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:`${q({amount:w,currencyCode:a?.price?.currencyCode,locale:s})} ${v?.off}`}),e("div",{className:y("hidden 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`),children:e(A,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:y("hidden tablet:block 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`),children:e(B,{className:"tablet:size-10 lg-desktop:size-12"})}),i("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[e("div",{className:"hidden tablet:block",children:e(k,{className:"flex items-center justify-between",onSwiper:p,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[L,G],children:t?.galleries?.map((l,f)=>e(N,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand",children:e(T,{source:l.image?.url,alt:l.image?.altText,className:"size-10 lg-desktop:size-12 rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+f))})}),!t?.index&&i("div",{className:"flex items-center gap-2",children:[e(T,{source:t?.comment?.avatar?.url,className:"size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e(D,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2"})]})]}),e("div",{ref:h,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),X=t=>i("div",{className:"h-full",children:[e(k,{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:[z,G,L,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,s)=>e(N,{className:"h-full",children:i("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:o?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:o?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:o?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+s))}),e("div",{className:y("hidden tablet:block 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:e(A,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:y("hidden tablet:block 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:e(B,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ye=t=>e("div",{children:"3D View"});var ve=J;export{ve as default};
+import{Fragment as ee,jsx as e,jsxs as n}from"react/jsx-runtime";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{Text as $,Picture as T,Badge as j}from"../../../../../components";import{useMemo as V,useState as g,forwardRef as F,useRef as k}from"react";import{Swiper as N,SwiperSlide as L}from"swiper/react";import{Navigation as G,Mousewheel as z,Thumbs as C,Pagination as I}from"swiper/modules";import{cn as b}from"../../../../../helpers/index.js";import{GalleryTabType as R}from"./types.js";import{Content as _,List as W,Root as O,Trigger as H}from"@radix-ui/react-tabs";import{useBizProductContext as P}from"../../../BizProductProvider.js";import{useVariantMedia as Y}from"../../../hooks/use-variant-media.js";import{SpecsModal as Z}from"./components/SpecsModal.js";import K from"./components/CompareModal.js";import{formatPrice as q}from"../../../utils/index.js";const A=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),B=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),J=()=>{const{copyWriting:t}=E(),{product:o,variant:p,isMobile:h}=P(),r=Y({product:o,variant:p}),[c,y]=g(null),i=p?.metafields?.component?.custom_media_list;let s,d,w,f;i&&i?.available?(s=i?.product||[],d=i?.scenarios||[],w=i?.keyFeatures||[],f=i?.video||[]):(s=r?.productList,d=r?.sceneList,w=r?.keyFeaturesList,f=r?.videoList);const M=V(()=>[...s,...d,...f],[s,d,f]),S={productList:s,sceneList:d,keyFeaturesList:w,videoList:f},u=V(()=>(o?.payload?.components?.find(l=>l.componentKey==="ProductGallery")?.data||[])?.map(l=>({...l,galleries:S[l?.galleries]||[]})).filter(l=>l.galleries.length>0),[o?.payload,S]),a=k({}),[v,x]=g(u?.[0]),D=(m,l)=>{switch(m?.galleryTabType){case R.GALLERY_IMAGE:return e(U,{...m,onCurrentTabLoopEnd:()=>{x(u?.[l])},onCurrentTabLoopStart:()=>{x(u?.[l])},index:l});case R.GALLERY_VIDEO:return e(X,{...m});default:return null}};return e("div",{id:"ipc-product-gallery",children:n(O,{className:"relative",defaultValue:u?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:u.map((m,l)=>e(_,{className:"h-full",value:m.tabValue,children:D(m,l)},m.tabValue))}),e(Q,{galleryTabs:u,activeGalleryTab:v,setActiveGalleryTab:x})]})})},Q=({galleryTabs:t,activeGalleryTab:o,setActiveGalleryTab:p})=>{const{product:h}=P(),r=k(null);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",children:[e(W,{ref:r,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map(c=>e(H,{className:b("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",c.tabValue===o?.tabValue&&"bg-white"),onClick:y=>{if(p(c),r.current){const i=r.current,s=y.currentTarget,d=s.offsetLeft-i.offsetWidth/2+s.offsetWidth/2;i.scrollTo({left:d,behavior:"smooth"})}},value:c.tabValue,children:c.tabLabel},c.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:h.metafields?.global?.specifications&&n(ee,{children:[e(Z,{})," | ",e(K,{})]})})]})},U=F((t,o)=>{const{locale:p="us",copyWriting:h}=E(),{variant:r,totalSavings:c}=P(),y=k(null),[i,s]=g(null),[d,w]=g(!0),[f,M]=g(!1),[S,u]=g(null);return n("div",{className:b("h-full","[&_.swiper-button]:hover:opacity-100"),children:[e(N,{ref:o,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:u,onProgress:a=>{w(a.isBeginning),M(a.isEnd)},pagination:{clickable:!0,el:y.current},onSlideChange:a=>{a&&(a.isEnd?t?.onCurrentTabLoopEnd?.():a.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:i},modules:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((a,v)=>e(L,{className:"h-full",children:e(T,{source:a?.image?.url,alt:a?.image?.altText,className:"h-full",imgClassName:"object-contain h-full "})},t?.id+"SwiperSlideItem"+v))}),r.availableForSale&&!!c&&!t.index&&e(j,{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:`${q({amount:c,currencyCode:r?.price?.currencyCode,locale:p})} ${h?.off}`}),e("div",{className:b("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:e(A,{className:b("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:b("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:e(B,{className:b("tablet:size-10 lg-desktop:size-12")})}),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",children:[e("div",{className:"hidden tablet:block",children:e(N,{className:"flex items-center justify-between",onSwiper:s,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[G,C],children:t?.galleries?.map((a,v)=>e(L,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand",children:e(T,{source:a.image?.url,alt:a.image?.altText,className:"size-10 lg-desktop:size-12 rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&n("div",{className:"flex items-center gap-2",children:[e(T,{source:t?.comment?.avatar?.url,className:"size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e($,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2"})]})]}),e("div",{ref:y,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),X=t=>n("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(N,{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:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,p)=>e(L,{className:"h-full",children:n("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:o?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:o?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:o?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+p))}),e("div",{className:b("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:e(A,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:b("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:e(B,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ye=t=>e("div",{children:"3D View"});var we=J;export{we as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, isMobile } = 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  // \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:\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      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] 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  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        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={() => setActiveGalleryTab(item)}\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  return (\n    <div className=\"h-full\">\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=\"h-full\"\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: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        )}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block 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        )}\n      >\n        <SwiperRightButtonIcon className=\"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]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 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-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-[#6D6D6F] 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\">\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 tablet:block 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 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": "AA8BI,OAgNM,YAAAA,GA/MJ,OAAAC,EADF,QAAAC,MAAA,oBA9BJ,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,QAAAC,EAAM,WAAAC,EAAiB,SAAAC,MAAa,4BAC7C,OAEE,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,UAAAC,MAKK,QACP,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,cAAAC,EAAY,cAAAC,EAAY,UAAAC,EAAQ,cAAAC,MAAkB,iBAC3D,OAAS,MAAAC,MAAU,kCACnB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,mBAAAC,MAAuB,sCAChC,OAAS,cAAAC,MAAkB,6BAC3B,OAAOC,MAAkB,+BACzB,OAAS,eAAAC,MAAmB,0BAM5B,MAAMC,EAAwBC,GAE1B3B,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAG2B,EACjG,UAAA5B,EAAC,QAAK,EAAE,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,qBAAqB,KAAK,QAAQ,EAC/FA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIE6B,EAAyBD,GAE3B3B,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAG2B,EACjG,UAAA5B,EAAC,QAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,8CAA8C,KAAK,QAAQ,EAC1GA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIE8B,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,CAAY,EAAI7B,EAAe,EACjC,CAAE,QAAA8B,EAAS,QAAAC,EAAS,SAAAC,CAAS,EAAIZ,EAAqB,EACtDa,EAAmBZ,EAAgB,CAAE,QAAAS,EAAS,QAAAC,CAAQ,CAAC,EACvD,CAACG,EAAQC,CAAS,EAAI9B,EAA4B,IAAI,EAEtD+B,EAAkBL,GAAS,YAAY,WAAW,kBACxD,IAAIM,EAA2BC,EAAyBC,EAA+BC,EAEnFJ,GAAmBA,GAAiB,WACtCC,EAAcD,GAAiB,SAAW,CAAC,EAC3CE,EAAYF,GAAiB,WAAa,CAAC,EAC3CG,EAAkBH,GAAiB,aAAe,CAAC,EACnDI,EAAYJ,GAAiB,OAAS,CAAC,IAEvCC,EAAcJ,GAAkB,YAChCK,EAAYL,GAAkB,UAC9BM,EAAkBN,GAAkB,gBACpCO,EAAYP,GAAkB,WAGhC,MAAMQ,EAAWrC,EAAQ,IAAM,CAAC,GAAGiC,EAAa,GAAGC,EAAW,GAAGE,CAAS,EAAG,CAACH,EAAaC,EAAWE,CAAS,CAAC,EAE1GE,EAA0D,CAC9D,YAAaL,EACb,UAAWC,EACX,gBAAiBC,EACjB,UAAWC,CACb,EAEMG,EAAcvC,EAAQ,KAExB0B,GAAS,SAAS,YAAY,KAAMc,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,IAGlG,IAAKA,IAAe,CACpB,GAAGA,EACH,UAAWF,EAAWE,GAAM,SAAS,GAAK,CAAC,CAC7C,EAAE,EACD,OAAQA,GAAcA,EAAK,UAAU,OAAS,CAAC,EACjD,CAACd,GAAS,QAASY,CAAU,CAAC,EAG3BG,EAAoBtC,EAA4C,CAAC,CAAC,EAElE,CAACuC,EAAkBC,CAAmB,EAAI1C,EAA8BsC,IAAc,CAAC,CAAC,EAGxFK,EAAsB,CAACC,EAAUC,IAAkB,CACvD,OAAQD,GAAK,eAAgB,CAC3B,KAAKlC,EAAe,cAClB,OACEjB,EAACqD,EAAA,CACE,GAAGF,EACJ,oBAAqB,IAAM,CACzBF,EAAoBJ,IAAcO,CAAK,CAAC,CAC1C,EACA,sBAAuB,IAAM,CAC3BH,EAAoBJ,IAAcO,CAAK,CAAC,CAC1C,EACA,MAAOA,EACT,EAEJ,KAAKnC,EAAe,cAClB,OAAOjB,EAACsD,EAAA,CAAwB,GAAGH,EAAK,EAG1C,QACE,OAAO,IACX,CACF,EAEA,OACEnD,EAAC,OAAI,GAAG,sBACN,SAAAC,EAACmB,EAAA,CAAK,UAAU,WAAW,aAAcyB,IAAc,CAAC,GAAG,SAsDzD,UAAA7C,EAAC,OAAI,UAAU,uHACZ,SAAA6C,EAAY,IAAI,CAACC,EAAWM,IAEzBpD,EAACkB,EAAA,CAA4B,UAAU,SAAS,MAAO4B,EAAK,SACzD,SAAAI,EAAoBJ,EAAMM,CAAK,GADpBN,EAAK,QAEnB,CAEH,EACH,EACA9C,EAACuD,EAAA,CACC,YAAaV,EACb,iBAAkBG,EAClB,oBAAqBC,EACvB,GACF,EACF,CAEJ,EAEMM,EAAoB,CAAC,CACzB,YAAAV,EACA,iBAAAG,EACA,oBAAAC,CACF,IAIM,CACJ,KAAM,CAAE,QAAAjB,CAAQ,EAAIV,EAAqB,EACzC,OACErB,EAAC,OAAI,UAAU,qIACb,UAAAD,EAACmB,EAAA,CACC,UAAU,uEACV,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EAEA,SAAAnB,EAAC,OAAI,UAAU,oBACZ,SAAA6C,GAAa,IAAIC,GAEd9C,EAACqB,EAAA,CACC,UAAWL,EACT,6JACA8B,EAAK,WAAaE,GAAkB,UAAY,UAClD,EACA,QAAS,IAAMC,EAAoBH,CAAI,EAEvC,MAAOA,EAAK,SAEX,SAAAA,EAAK,UAHDA,EAAK,QAIZ,CAEH,EACH,EACF,EACA9C,EAAC,OAAI,UAAU,kCACZ,SAAAgC,EAAQ,YAAY,QAAQ,gBAC3B/B,EAAAF,GAAA,CACE,UAAAC,EAACwB,EAAA,EAAW,EAAE,MAAGxB,EAACyB,EAAA,EAAa,GACjC,EAEJ,GACF,CAEJ,EAEM4B,EAAyB7C,EAAkD,CAACoB,EAAO4B,IAAQ,CAC/F,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAA1B,CAAY,EAAI7B,EAAe,EAChD,CAAE,QAAA+B,EAAS,aAAAyB,CAAa,EAAIpC,EAAqB,EACjDqC,EAAgBlD,EAAuB,IAAI,EAC3C,CAACmD,EAAcC,CAAe,EAAItD,EAA4B,IAAI,EAClE,CAACuD,EAASC,CAAQ,EAAIxD,EAAS,EAAI,EACnC,CAACyD,EAAOC,CAAM,EAAI1D,EAAS,EAAK,EAChC,CAAC6B,EAAQC,CAAS,EAAI9B,EAA4B,IAAI,EAE5D,OACEN,EAAC,OAAI,UAAU,SACb,UAAAD,EAACU,EAAA,CACC,IAAK8C,EACL,UAAU,SACV,WAAY,CACV,OAAQ,wBAAwB5B,GAAO,EAAE,6BACzC,OAAQ,wBAAwBA,GAAO,EAAE,4BAC3C,EACA,SAAUS,EACV,WAAYD,GAAU,CACpB2B,EAAS3B,EAAO,WAAW,EAC3B6B,EAAO7B,EAAO,KAAK,CACrB,EACA,WAAY,CACV,UAAW,GACX,GAAIuB,EAAc,OACpB,EACA,cAAevB,GAAU,CACnBA,IACEA,EAAO,MACTR,GAAO,sBAAsB,EACpBQ,EAAO,aAChBR,GAAO,wBAAwB,EAGrC,EACA,OAAQ,CAAE,OAAQgC,CAAa,EAC/B,QAAS,CAAC/C,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAa,GAAO,WAAW,IAAI,CAACkB,EAAMoB,IAE1BlE,EAACW,EAAA,CAAY,UAAU,SACrB,SAAAX,EAACI,EAAA,CACC,OAAQ0C,GAAM,OAAO,IACrB,IAAKA,GAAM,OAAO,QAClB,UAAU,SACV,aAAa,yBACf,GANmClB,GAAO,GAAK,kBAAoBsC,CAOrE,CAEH,EACH,EACCjC,EAAQ,kBAAoB,CAAC,CAACyB,GAAgB,CAAC9B,EAAM,OACpD5B,EAACK,EAAA,CACC,KAAK,KACL,UAAU,2GAET,YAAGqB,EAAY,CACd,OAAQgC,EACR,aAAczB,GAAS,OAAO,aAC9B,OAAQwB,CACV,CAAC,CAAC,IAAI1B,GAAa,GAAG,GACxB,EAEF/B,EAAC,OACC,UAAWgB,EACT,sIACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC2B,EAAA,CAAqB,UAAU,oCAAoC,EACtE,EACA3B,EAAC,OACC,UAAWgB,EACT,yIACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC6B,EAAA,CAAsB,UAAU,oCAAoC,EACvE,EAYA5B,EAAC,OAAI,UAAU,+LACb,UAAAD,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACU,EAAA,CACC,UAAU,oCACV,SAAUmD,EACV,aAAc,GACd,cAAe,EACf,SAAU,GACV,oBAAqB,GACrB,QAAS,CAACjD,EAAYE,CAAM,EAE3B,SAAAc,GAAO,WAAW,IAAI,CAACkB,EAAMoB,IAC5BlE,EAACW,EAAA,CAEC,UAAU,0FAEV,SAAAX,EAACI,EAAA,CACC,OAAQ0C,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,QACjB,UAAU,qCACV,aAAa,wBACf,GARKlB,GAAO,GAAK,uBAAyBsC,CAS5C,CACD,EACH,EACF,EACC,CAACtC,GAAO,OACP3B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CACC,OAAQwB,GAAO,SAAS,QAAQ,IAChC,UAAU,gCACV,aAAa,gBACf,EACA5B,EAACG,EAAA,CACC,KAAMyB,GAAO,SAAS,QACtB,UAAU,mFACZ,GACF,GAEJ,EACA5B,EAAC,OAAI,IAAK2D,EAAe,UAAU,wEAAwE,GAC7G,CAEJ,CAAC,EAEKL,EAA0B1B,GAE5B3B,EAAC,OAAI,UAAU,SACb,UAAAD,EAACU,EAAA,CACC,UAAU,SACV,WAAY,CACV,OAAQ,wBAAwBkB,GAAO,EAAE,6BACzC,OAAQ,wBAAwBA,GAAO,EAAE,4BAC3C,EACA,QAAS,CAACf,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAa,GAAO,WAAW,IAAI,CAACkB,EAAMoB,IAE1BlE,EAACW,EAAA,CAAY,UAAU,SACrB,SAAAV,EAAC,SAAM,SAAQ,GAAC,UAAU,YACxB,UAAAD,EAAC,SAAM,KAAK,WAAW,EACvBA,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,EACvD9C,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,aAAa,EACxD9C,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,GACzD,GANmClB,GAAO,GAAK,kBAAoBsC,CAOrE,CAEH,EACH,EACAlE,EAAC,OACC,UAAWgB,EACT,wGACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC2B,EAAA,CAAqB,UAAU,oCAAoC,EACtE,EACA3B,EAAC,OACC,UAAWgB,EACT,yGACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC6B,EAAA,CAAsB,UAAU,oCAAoC,EACvE,GACF,EAIEsC,GAA2BvC,GACxB5B,EAAC,OAAI,mBAAO,EAGrB,IAAOoE,GAAQtC",
-  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useMemo", "useState", "forwardRef", "useRef", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "isMobile", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "gallerySwiperRefs", "activeGalleryTab", "setActiveGalleryTab", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
+  "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, isMobile } = 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  // \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:\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      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  return (\n    <div className={cn('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=\"h-full\"\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]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 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-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-[#6D6D6F] 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": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useMemo", "useState", "forwardRef", "useRef", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "isMobile", "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", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{Grid as s,GridItem as t}from"../../../../components";const c=({BoxLeftGallery:a,BoxRightDetail:p,BoxBottomSummary:d})=>e("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[e(s,{className:"laptop:gap-6",children:[o(t,{className:"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:a}),o(t,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:p})]}),d]});var r=c;export{r as default};
+import{jsx as o,jsxs as a}from"react/jsx-runtime";import{Grid as s,GridItem as t}from"../../../../components";const c=({BoxLeftGallery:e,BoxRightDetail:p,BoxBottomSummary:d})=>a("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(s,{className:"laptop:gap-6 gap-8",children:[o(t,{className:"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:e}),o(t,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:p})]}),d]});var r=c;export{r as default};
 //# sourceMappingURL=ProductGridBox.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/ProductCard/ProductGridBox.tsx"],
-  "sourcesContent": ["import { Grid, GridItem } from '../../../../components'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop:gap-6\">\n        <GridItem className=\"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"col-span-12 desktop:col-start-9 desktop:col-span-4\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
-  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,yBAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,eACd,UAAAF,EAACG,EAAA,CAAS,UAAU,sHACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,qDAAsD,SAAAG,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
+  "sourcesContent": ["import { Grid, GridItem } from '../../../../components'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop:gap-6 gap-8\">\n        <GridItem className=\"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"col-span-12 desktop:col-start-9 desktop:col-span-4\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
+  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,yBAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,qBACd,UAAAF,EAACG,EAAA,CAAS,UAAU,sHACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,qDAAsD,SAAAG,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
   "names": ["jsx", "jsxs", "Grid", "GridItem", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary", "ProductGridBox_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as s,Button as g,Grid as I,GridItem as G,Picture as N,Heading as L}from"../../../../../components";import{useBizProductContext as y}from"../../../BizProductProvider";import{useEffect as R,useMemo as A,useState as O}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as C}from"../../../../AiuiProvider";import{cn as F}from"../../../../../helpers";import V from"decimal.js";const S=({})=>{const{locale:d="us",copyWriting:a}=C(),{product:l,variant:i,finalPrice:p,comparePrice:m,coupon:n,selectedOptions:c,onAddToCart:k,onBuyNow:h,savingDetail:b,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:u}=y();if(!i.availableForSale)return null;const{bundleVariant:B,giftVariant:w}=$()||{},[r,v]=O();R(()=>{v({bundle:o.bundle?void 0:B,gift:o.gift?void 0:w})},[B,w,o]);const D=A(()=>new V(m).minus(b.freeGift).toNumber(),[m,b]);return e("div",{className:"ipc-product-summary bg-[#F5F5F7] mt-16",children:t(I,{className:"px-4 py-6 tablet:p-8",children:[t(G,{className:"col-span-12 desktop:col-start-1 desktop:col-span-5",children:[e(L,{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>`}),e("div",{className:"aspect-[644/320]",children:e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-contain h-full"})})]}),t(G,{className:"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between",children:[t("div",{children:[t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"shrink-0 flex items-center gap-4",children:[e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${c.color||c.colour||c.couleur}`})]})]}),t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:p,currencyCode:i.price.currencyCode,locale:d})}),n&&e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})})]})]}),o?.gift&&e(z,{giftOperation:x=>{u?.({...o,gift:void 0}),v?.({...r,gift:x})},giftStatus:!!o?.gift,gift:o?.gift}),o?.bundle&&e(j,{bundleOperation:x=>{u?.({...o,bundle:void 0}),v?.({...r,bundle:x})},bundleStatus:!!o?.bundle,bundleListItem:o?.bundle})]}),(r?.bundle||r?.gift)&&t("div",{className:"mt-6",children:[e(s,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),t("div",{className:"flex flex-col gap-6 mt-6",children:[r?.gift&&e(z,{giftOperation:x=>{u?.({gift:x}),v?.({...r,gift:void 0})},giftStatus:!r?.gift,gift:r?.gift}),r?.bundle&&e(j,{bundleOperation:x=>{u?.({bundle:x}),v?.({...r,bundle:void 0})},bundleStatus:!r?.bundle,bundleListItem:r?.bundle})]})]})]}),t("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${a?.totalPrice} ${f({amount:p,currencyCode:i.price.currencyCode,locale:d})}`}),n&&e(s,{className:"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})}),t("div",{className:"flex gap-3 mt-2",children:[e(g,{size:"lg",variant:"secondary",className:"w-1/2",onClick:()=>k?.(),children:a?.addToCart}),e(g,{size:"lg",variant:"primary",className:"w-1/2",onClick:()=>h?.(),children:a?.shopNow})]})]})]})]})})},$=()=>{const{bundle:d,variant:a,checkedBundle:l,freeGift:i,checkedGift:p}=y();let m,n;const{bundleList:c}=d||{},{giftList:k=[]}=i||{},h=c?.filter(u=>u.variants.slice(1,u.variants.length).every(P=>P.variant.availableForSale))||[],[b]=h;m=l||b;const[o]=k?.filter(u=>u.availableForSale);return n=p||o,{bundleVariant:m,giftVariant:n}},j=({bundleOperation:d,bundleStatus:a,bundleListItem:l})=>{const{locale:i="us"}=C(),{variant:p,setCheckedBundle:m}=y(),n=l?.variants.filter(c=>c.variant.sku!==p.sku);return t("div",{className:"flex items-center justify-between",children:[n?.map(c=>t("div",{className:"flex items-center gap-4",children:[e(N,{source:c?.variant?.image?.url,className:"size-16 object-cover"}),e("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:e(s,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:c.variant.product.title})})]},c.variant.id)),t("div",{className:"flex flex-col items-end gap-1 justify-center",children:[a&&e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:n[0]?.price,locale:i,currencyCode:n[0]?.variant?.price?.currencyCode})}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})},z=({giftOperation:d,giftStatus:a,gift:l})=>{const{locale:i="us"}=C(),{freeGift:p,setCheckedGift:m}=y(),{freeLabel:n}=p||{};return t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-4",children:[e(N,{source:l?.image?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:l?.product?.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${n}`})]})]}),t("div",{className:"flex flex-col items-end gap-2 justify-center",children:[a&&t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:n}),e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:l.price.amount,locale:i,currencyCode:l.price.currencyCode})})]}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})};var Q=S;export{Q as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as s,Button as g,Grid as I,GridItem as G,Picture as N,Heading as L}from"../../../../../components";import{useBizProductContext as y}from"../../../BizProductProvider";import{useEffect as R,useMemo as A,useState as O}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as C}from"../../../../AiuiProvider";import{cn as F}from"../../../../../helpers";import V from"decimal.js";const S=({})=>{const{locale:d="us",copyWriting:a}=C(),{product:l,variant:i,finalPrice:p,comparePrice:m,coupon:n,selectedOptions:r,onAddToCart:k,onBuyNow:h,savingDetail:b,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:u}=y();if(!i.availableForSale)return null;const{bundleVariant:B,giftVariant:w}=$()||{},[c,v]=O();R(()=>{v({bundle:o.bundle?void 0:B,gift:o.gift?void 0:w})},[B,w,o]);const D=A(()=>new V(m).minus(b.freeGift).toNumber(),[m,b]);return e("div",{className:"ipc-product-summary bg-[#F5F5F7] mt-16 laptop:rounded-2xl",children:t(I,{className:"px-4 py-6 tablet:p-8",children:[t(G,{className:"col-span-12 desktop:col-start-1 desktop:col-span-5",children:[e(L,{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>`}),e("div",{className:"aspect-[644/320]",children:e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-contain h-full"})})]}),t(G,{className:"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between",children:[t("div",{children:[t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"shrink-0 flex items-center gap-4",children:[e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r.color||r.colour||r.couleur}`})]})]}),t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:p,currencyCode:i.price.currencyCode,locale:d})}),n&&e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})})]})]}),o?.gift&&e(z,{giftOperation:x=>{u?.({...o,gift:void 0}),v?.({...c,gift:x})},giftStatus:!!o?.gift,gift:o?.gift}),o?.bundle&&e(j,{bundleOperation:x=>{u?.({...o,bundle:void 0}),v?.({...c,bundle:x})},bundleStatus:!!o?.bundle,bundleListItem:o?.bundle})]}),(c?.bundle||c?.gift)&&t("div",{className:"mt-6",children:[e(s,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),t("div",{className:"flex flex-col gap-6 mt-6",children:[c?.gift&&e(z,{giftOperation:x=>{u?.({gift:x}),v?.({...c,gift:void 0})},giftStatus:!c?.gift,gift:c?.gift}),c?.bundle&&e(j,{bundleOperation:x=>{u?.({bundle:x}),v?.({...c,bundle:void 0})},bundleStatus:!c?.bundle,bundleListItem:c?.bundle})]})]})]}),t("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${a?.totalPrice} ${f({amount:p,currencyCode:i.price.currencyCode,locale:d})}`}),n&&e(s,{className:"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})}),t("div",{className:"flex gap-3 mt-2",children:[e(g,{size:"lg",variant:"secondary",className:"w-1/2",onClick:()=>k?.(),children:a?.addToCart}),e(g,{size:"lg",variant:"primary",className:"w-1/2",onClick:()=>h?.(),children:a?.shopNow})]})]})]})]})})},$=()=>{const{bundle:d,variant:a,checkedBundle:l,freeGift:i,checkedGift:p}=y();let m,n;const{bundleList:r}=d||{},{giftList:k=[]}=i||{},h=r?.filter(u=>u.variants.slice(1,u.variants.length).every(P=>P.variant.availableForSale))||[],[b]=h;m=l||b;const[o]=k?.filter(u=>u.availableForSale);return n=p||o,{bundleVariant:m,giftVariant:n}},j=({bundleOperation:d,bundleStatus:a,bundleListItem:l})=>{const{locale:i="us"}=C(),{variant:p,setCheckedBundle:m}=y(),n=l?.variants.filter(r=>r.variant.sku!==p.sku);return t("div",{className:"flex items-center justify-between",children:[n?.map(r=>t("div",{className:"flex items-center gap-4",children:[e(N,{source:r?.variant?.image?.url,className:"size-16 object-cover"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(s,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:r.variant.product.title})})]},r.variant.id)),t("div",{className:"flex flex-col items-end gap-1 justify-center",children:[a&&e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:n[0]?.price,locale:i,currencyCode:n[0]?.variant?.price?.currencyCode})}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})},z=({giftOperation:d,giftStatus:a,gift:l})=>{const{locale:i="us"}=C(),{freeGift:p,setCheckedGift:m}=y(),{freeLabel:n}=p||{};return t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-4",children:[e(N,{source:l?.image?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l?.product?.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${n}`})]})]}),t("div",{className:"flex flex-col items-end gap-2 justify-center",children:[a&&t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:n}),e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:l.price.amount,locale:i,currencyCode:l.price.currencyCode})})]}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})};var Q=S;export{Q as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport 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 } 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    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\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 bg-[#F5F5F7] mt-16\">\n      <Grid className=\"px-4 py-6 tablet:p-8\">\n        <GridItem className=\"col-span-12 desktop:col-start-1 desktop: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 desktop:col-start-7 laptop:mt-0 desktop: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 source={variant.image?.url || product?.images?.[0]?.url} className=\"size-16 object-cover\" />\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({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n                  />\n                  {coupon && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: comparePriceRemovedFreeGift,\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                  giftStatus={!!joinedRecommendBuyProducts?.gift}\n                  gift={joinedRecommendBuyProducts?.gift}\n                />\n              )}\n              {joinedRecommendBuyProducts?.bundle && (\n                <ProductBundleSummary\n                  bundleOperation={bundle => {\n                    setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                    setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                  }}\n                  bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n                  bundleListItem={joinedRecommendBuyProducts?.bundle}\n                />\n              )}\n            </div>\n            {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\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?.gift && (\n                    <ProductGiftSummary\n                      giftOperation={gift => {\n                        setJoinedRecommendBuyProducts?.({ gift })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                      }}\n                      giftStatus={!initialRecommendBuyProducts?.gift}\n                      gift={initialRecommendBuyProducts?.gift}\n                    />\n                  )}\n                  {initialRecommendBuyProducts?.bundle && (\n                    <ProductBundleSummary\n                      bundleOperation={bundle => {\n                        setJoinedRecommendBuyProducts?.({ bundle })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                      }}\n                      bundleStatus={!initialRecommendBuyProducts?.bundle}\n                      bundleListItem={initialRecommendBuyProducts?.bundle}\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            {coupon && (\n              <Text\n                className=\"text-base 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\">\n              <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n                {copyWriting?.addToCart}\n              </Button>\n              <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n                {copyWriting?.shopNow}\n              </Button>\n            </div>\n          </div>\n        </GridItem>\n      </Grid>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift } = useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\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  return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleStatus,\n  bundleListItem,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleStatus: boolean\n  bundleListItem: BundleListItem\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 source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\n            <div className=\"flex flex-col gap-[6px] 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        {bundleStatus && (\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        <Button\n          size={bundleStatus ? 'icon' : 'lg'}\n          variant={bundleStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n            bundleOperation(bundleListItem)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: bundleStatus,\n          })}\n        >\n          {bundleStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  giftStatus,\n  gift,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  giftStatus: boolean\n  gift: ProductVariant\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] 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={`x1 | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {giftStatus && (\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        <Button\n          size={giftStatus ? 'icon' : 'lg'}\n          variant={giftStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedGift?.(giftStatus ? undefined : gift)\n            giftOperation(gift)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: giftStatus,\n          })}\n        >\n          {giftStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport 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 } 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    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\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 bg-[#F5F5F7] mt-16 laptop:rounded-2xl\">\n      <Grid className=\"px-4 py-6 tablet:p-8\">\n        <GridItem className=\"col-span-12 desktop:col-start-1 desktop: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 desktop:col-start-7 laptop:mt-0 desktop: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 source={variant.image?.url || product?.images?.[0]?.url} className=\"size-16 object-cover\" />\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({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n                  />\n                  {coupon && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: comparePriceRemovedFreeGift,\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                  giftStatus={!!joinedRecommendBuyProducts?.gift}\n                  gift={joinedRecommendBuyProducts?.gift}\n                />\n              )}\n              {joinedRecommendBuyProducts?.bundle && (\n                <ProductBundleSummary\n                  bundleOperation={bundle => {\n                    setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                    setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                  }}\n                  bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n                  bundleListItem={joinedRecommendBuyProducts?.bundle}\n                />\n              )}\n            </div>\n            {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\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?.gift && (\n                    <ProductGiftSummary\n                      giftOperation={gift => {\n                        setJoinedRecommendBuyProducts?.({ gift })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                      }}\n                      giftStatus={!initialRecommendBuyProducts?.gift}\n                      gift={initialRecommendBuyProducts?.gift}\n                    />\n                  )}\n                  {initialRecommendBuyProducts?.bundle && (\n                    <ProductBundleSummary\n                      bundleOperation={bundle => {\n                        setJoinedRecommendBuyProducts?.({ bundle })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                      }}\n                      bundleStatus={!initialRecommendBuyProducts?.bundle}\n                      bundleListItem={initialRecommendBuyProducts?.bundle}\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            {coupon && (\n              <Text\n                className=\"text-base 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\">\n              <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n                {copyWriting?.addToCart}\n              </Button>\n              <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n                {copyWriting?.shopNow}\n              </Button>\n            </div>\n          </div>\n        </GridItem>\n      </Grid>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift } = useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\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  return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleStatus,\n  bundleListItem,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleStatus: boolean\n  bundleListItem: BundleListItem\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 source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\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        {bundleStatus && (\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        <Button\n          size={bundleStatus ? 'icon' : 'lg'}\n          variant={bundleStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n            bundleOperation(bundleListItem)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: bundleStatus,\n          })}\n        >\n          {bundleStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  giftStatus,\n  gift,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  giftStatus: boolean\n  gift: ProductVariant\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\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={`x1 | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {giftStatus && (\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        <Button\n          size={giftStatus ? 'icon' : 'lg'}\n          variant={giftStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedGift?.(giftStatus ? undefined : gift)\n            giftOperation(gift)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: giftStatus,\n          })}\n        >\n          {giftStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "cn", "Decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "onAddToCart", "onBuyNow", "savingDetail", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "bundleVariant", "giftVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "checkedBundle", "freeGift", "checkedGift", "bundleList", "giftList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "bundleOperation", "bundleStatus", "bundleListItem", "setCheckedBundle", "bundleVariants", "giftOperation", "giftStatus", "setCheckedGift", "freeLabel", "ProductSummary_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Text as o,Button as b}from"../../../../../components";import{useAiuiContext as f}from"../../../../AiuiProvider/index.js";import{useBizProductContext as v}from"../../../BizProductProvider.js";import{useMemo as g}from"react";import{formatPrice as n}from"../../../utils";import c from"decimal.js";const N=()=>{const{copyWriting:a,locale:i="us"}=f(),{variant:t,finalPrice:s,totalSavings:y,comparePrice:m,onAddToCart:x,onBuyNow:p,savingDetail:r,coupon:d}=v();console.log(r,"savingDetail");const u=g(()=>new c(m).minus(r.freeGift).toNumber(),[m,r]);return l("div",{className:"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4",children:[t.availableForSale?l("div",{className:"flex items-center justify-between tablet:flex-col desktop:items-end",children:[l("div",{className:"flex items-center gap-1",children:[e(o,{className:"text-xl font-bold leading-[1.2] tablet:text-2xl",html:n({amount:s,currencyCode:t.price.currencyCode,locale:i})}),d&&e(o,{className:"text-xl font-bold line-through text-[#999] leading-[1.2] tablet:text-2xl",html:n({amount:u,currencyCode:t.price.currencyCode,locale:i})})]}),d&&e(o,{className:"text-brand-0 text-base leading-[1.4] font-bold tablet:text-2xl",html:`${a?.totalSavings} ${n({amount:new c(u).minus(new c(s)).toNumber(),currencyCode:t.price.currencyCode,locale:i})}`})]}):e(o,{className:"text-[20px] font-bold text-[#999999]",html:a?.soldOut??"Sold Out"}),l("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[e(b,{variant:"secondary",disabled:!t.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>x?.(),children:a?.addToCart??"Add to Cart"}),e(b,{variant:"primary",disabled:!t.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>p?.(),children:a?.buyNow??"Buy Now"})]})]})};var A=N;export{A as default};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Text as o,Button as m}from"../../../../../components";import{useAiuiContext as p}from"../../../../AiuiProvider/index.js";import{useBizProductContext as f}from"../../../BizProductProvider.js";import{useMemo as v}from"react";import{formatPrice as n}from"../../../utils";import g from"decimal.js";const y=()=>{const{copyWriting:a,locale:i="us"}=p(),{variant:t,finalPrice:d,totalSavings:r,comparePrice:c,onAddToCart:u,onBuyNow:b,savingDetail:s,coupon:N}=f(),x=v(()=>new g(c).minus(s.freeGift).toNumber(),[c,s]);return l("div",{className:"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4",children:[t.availableForSale?l("div",{className:"flex items-center justify-between tablet:flex-col desktop:items-end",children:[l("div",{className:"flex items-center gap-1",children:[e(o,{className:"text-xl font-bold leading-[1.2] tablet:text-2xl",html:n({amount:d,currencyCode:t.price.currencyCode,locale:i})}),r>0&&e(o,{className:"text-xl font-bold line-through text-[#999] leading-[1.2] tablet:text-2xl",html:n({amount:x,currencyCode:t.price.currencyCode,locale:i})})]}),r>0&&e(o,{className:"text-brand-0 text-base leading-[1.4] font-bold tablet:text-2xl",html:`${a?.totalSavings} ${n({amount:r,currencyCode:t.price.currencyCode,locale:i})}`})]}):e(o,{className:"text-[20px] font-bold text-[#999999]",html:a?.soldOut??"Sold Out"}),l("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[e(m,{variant:"secondary",disabled:!t.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>u?.(),children:a?.addToCart??"Add to Cart"}),e(m,{variant:"primary",disabled:!t.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>b?.(),children:a?.buyNow??"Buy Now"})]})]})};var A=y;export{A as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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 { variant, finalPrice, totalSavings, comparePrice, onAddToCart, onBuyNow, savingDetail, coupon } =\n    useBizProductContext()\n\n    console.log(savingDetail, 'savingDetail')\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\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] tablet:text-2xl\"\n              html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n            />\n            {coupon &&<Text\n              className=\"text-xl font-bold line-through text-[#999] leading-[1.2] tablet:text-2xl\"\n              html={formatPrice({\n                amount: comparePriceRemovedFreeGift,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              })}\n            />}\n          </div>\n          {coupon && (\n            <Text\n              className=\"text-brand-0 text-base leading-[1.4] font-bold tablet:text-2xl\"\n              html={`${copyWriting?.totalSavings} ${formatPrice({ amount: new Decimal(comparePriceRemovedFreeGift).minus(new Decimal(finalPrice)).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": "AAuBU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvBV,OAAS,QAAAC,EAAM,UAAAC,MAAc,4BAC7B,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAAe,QACxB,OAAS,eAAAC,MAAmB,iBAC5B,OAAOC,MAAa,aAEpB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIP,EAAe,EAChD,CAAE,QAAAQ,EAAS,WAAAC,EAAY,aAAAC,EAAc,aAAAC,EAAc,YAAAC,EAAa,SAAAC,EAAU,aAAAC,EAAc,OAAAC,CAAO,EACnGd,EAAqB,EAErB,QAAQ,IAAIa,EAAc,cAAc,EAE1C,MAAME,EAA8Bd,EAClC,IAAM,IAAIE,EAAQO,CAAY,EAAE,MAAMG,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACH,EAAcG,CAAY,CAC7B,EAEA,OACEjB,EAAC,OAAI,UAAU,6EACZ,UAAAW,EAAQ,iBACPX,EAAC,OAAI,UAAU,sEACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,kDACV,KAAMK,EAAY,CAAE,OAAQM,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,EAC5F,EACCQ,GAASnB,EAACE,EAAA,CACT,UAAU,2EACV,KAAMK,EAAY,CAChB,OAAQa,EACR,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACF,EACCQ,GACCnB,EAACE,EAAA,CACC,UAAU,iEACV,KAAM,GAAGQ,GAAa,YAAY,IAAIH,EAAY,CAAE,OAAQ,IAAIC,EAAQY,CAA2B,EAAE,MAAM,IAAIZ,EAAQK,CAAU,CAAC,EAAE,SAAS,EAAG,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAAC,GACrM,GAEJ,EAEAX,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMQ,GAAa,SAAW,WAAY,EAEnGT,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACG,EAAA,CACC,QAAQ,YACR,SAAU,CAACS,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMI,IAAc,EAE5B,SAAAN,GAAa,WAAa,cAC7B,EACAV,EAACG,EAAA,CACC,QAAQ,UACR,SAAU,CAACS,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAW,EAEzB,SAAAP,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOW,EAAQZ",
+  "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 { variant, finalPrice, totalSavings, comparePrice, onAddToCart, onBuyNow, savingDetail, coupon } =\n    useBizProductContext()\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\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] tablet: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] tablet: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.4] font-bold tablet:text-2xl\"\n              html={`${copyWriting?.totalSavings} ${formatPrice({ amount: totalSavings, 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": "AAqBU,OACE,OAAAA,EADF,QAAAC,MAAA,oBArBV,OAAS,QAAAC,EAAM,UAAAC,MAAc,4BAC7B,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAAe,QACxB,OAAS,eAAAC,MAAmB,iBAC5B,OAAOC,MAAa,aAEpB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIP,EAAe,EAChD,CAAE,QAAAQ,EAAS,WAAAC,EAAY,aAAAC,EAAc,aAAAC,EAAc,YAAAC,EAAa,SAAAC,EAAU,aAAAC,EAAc,OAAAC,CAAO,EACnGd,EAAqB,EAEjBe,EAA8Bd,EAClC,IAAM,IAAIE,EAAQO,CAAY,EAAE,MAAMG,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACH,EAAcG,CAAY,CAC7B,EAEA,OACEjB,EAAC,OAAI,UAAU,6EACZ,UAAAW,EAAQ,iBACPX,EAAC,OAAI,UAAU,sEACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,kDACV,KAAMK,EAAY,CAAE,OAAQM,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,EAC5F,EACCG,EAAe,GACdd,EAACE,EAAA,CACC,UAAU,2EACV,KAAMK,EAAY,CAChB,OAAQa,EACR,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GAEJ,EACCG,EAAe,GACdd,EAACE,EAAA,CACC,UAAU,iEACV,KAAM,GAAGQ,GAAa,YAAY,IAAIH,EAAY,CAAE,OAAQO,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAAC,GAC/H,GAEJ,EAEAX,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMQ,GAAa,SAAW,WAAY,EAEnGT,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACG,EAAA,CACC,QAAQ,YACR,SAAU,CAACS,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMI,IAAc,EAE5B,SAAAN,GAAa,WAAa,cAC7B,EACAV,EAACG,EAAA,CACC,QAAQ,UACR,SAAU,CAACS,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAW,EAEzB,SAAAP,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOW,EAAQZ",
   "names": ["jsx", "jsxs", "Text", "Button", "useAiuiContext", "useBizProductContext", "useMemo", "formatPrice", "Decimal", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "comparePriceRemovedFreeGift", "ProductActions_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import"../../../../AiuiProvider/index.js";import{cn as f}from"../../../../../helpers/index.js";import{useState as c,useCallback as p,useRef as x}from"react";import{gsap as N}from"gsap";import{useBizProductContext as S}from"../../../BizProductProvider.js";const h=({tabs:l,purchaseBarHeight:s,onSpyNavItemClick:i})=>{const[n,r]=c(!1),[o,m]=c(l?.[0]),d=x(null),{renderRating:u}=S(),b=p(e=>{m(e),i?.(e),r(!1)},[]),v=p(()=>{r(!n),N.fromTo(d?.current,{height:0},{height:"auto",duration:.5,ease:"power2.inOut"})},[n]);return a("div",{children:[t("button",{className:"text-sm h-[28px] font-bold leading-[28px] px-[10px] border rounded-full border-black",onClick:v,children:o?.label}),a("div",{className:f("absolute top-full w-full flex flex-col z-[60] bg-black/60 left-0",{hidden:!n}),style:{height:`calc(100dvh - ${s}px)`},children:[a("div",{ref:d,className:"border-t overflow-hidden border-[#E4E5E6] flex flex-col bg-white",children:[l?.map(e=>t("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",onClick:()=>b(e),children:e.label},e.id)),t("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",children:u})]}),t("div",{className:"flex-1",onClick:()=>r(!1)})]})]})},y=({tabs:l,onSpyNavItemClick:s})=>{const[i,n]=c(l?.[0]),r=p(o=>{n(o),s?.(o)},[]);return t("div",{className:"flex gap-8",children:l?.map(o=>a("button",{className:"text-sm relative py-[10px] font-bold",onClick:()=>r(o),children:[o.label,t("div",{className:f("absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":i?.id===o.id})})]},o.id))})};export{y as DesktopScrollSpyNav,h as MobileScrollSpyNav};
+import{jsx as o,jsxs as s}from"react/jsx-runtime";import"../../../../AiuiProvider/index.js";import{cn as m}from"../../../../../helpers/index.js";import{useState as c,useCallback as p,useRef as x}from"react";import{gsap as S}from"gsap";import{useBizProductContext as h}from"../../../BizProductProvider.js";const g=t=>o("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:o("path",{d:"M3 4.5L6 7.5L9 4.5",stroke:"#1D1D1F",strokeLinecap:"round",strokeLinejoin:"round"})}),w=({tabs:t,purchaseBarHeight:a,onSpyNavItemClick:i})=>{const[n,r]=c(!1),[e,f]=c(t?.[0]),d=x(null),{renderRating:u}=h(),v=p(l=>{f(l),i?.(l),r(!1)},[]),b=p(()=>{r(!n),S.fromTo(d?.current,{height:0},{height:"auto",duration:.5,ease:"power2.inOut"})},[n]);return s("div",{children:[s("button",{className:"text-sm h-[28px] font-bold flex gap-1 items-center leading-[28px] px-[10px] border rounded-full border-black",onClick:b,children:[e?.label,o(g,{className:"size-3"})]}),s("div",{className:m("absolute top-full w-full flex flex-col z-[60] bg-black/60 left-0",{hidden:!n}),style:{height:`calc(100dvh - ${a}px)`},children:[s("div",{ref:d,className:"border-t overflow-hidden border-[#E4E5E6] flex flex-col bg-white",children:[t?.map(l=>o("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",onClick:()=>v(l),children:l.label},l.id)),o("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",children:u})]}),o("div",{className:"flex-1",onClick:()=>r(!1)})]})]})},N=({tabs:t,onSpyNavItemClick:a})=>{const[i,n]=c(t?.[0]),r=p(e=>{n(e),a?.(e)},[]);return o("div",{className:"flex gap-8",children:t?.map(e=>s("button",{className:"text-sm relative py-[10px] font-bold",onClick:()=>r(e),children:[e.label,o("div",{className:m("absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":i?.id===e.id})})]},e.id))})};export{N as DesktopScrollSpyNav,w as MobileScrollSpyNav};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\n\nconst MobileScrollSpyNav = ({ tabs, purchaseBarHeight, onSpyNavItemClick }: ScrollSpyNavProps) => {\n  const [dropdownOpen, setDropdownOpen] = useState(false)\n  const [activeTab, setActiveTab] = useState(tabs?.[0])\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const { renderRating } = useBizProductContext()\n  \n  const onTabClick = useCallback((tab: ScrollSpyNavItem) => {\n    setActiveTab(tab)\n    onSpyNavItemClick?.(tab)\n    setDropdownOpen(false)\n  }, [])\n\n  const onDropdownOpen = useCallback(() => {\n    setDropdownOpen(!dropdownOpen)\n    gsap.fromTo(dropdownRef?.current, { height: 0 }, { height: 'auto', duration: 0.5, ease: 'power2.inOut' })\n  }, [dropdownOpen])\n\n  return (\n    <div>\n      <button\n        className=\"text-sm h-[28px] font-bold leading-[28px] px-[10px] border rounded-full border-black\"\n        onClick={onDropdownOpen}\n      >\n        {activeTab?.label}\n      </button>\n      <div\n        className={cn('absolute top-full w-full flex flex-col z-[60] bg-black/60 left-0', {\n          ['hidden']: !dropdownOpen,\n        })}\n        style={{\n          height: `calc(100dvh - ${purchaseBarHeight}px)`,\n        }}\n      >\n        <div ref={dropdownRef} className=\"border-t overflow-hidden border-[#E4E5E6] flex flex-col bg-white\">\n          {tabs?.map(tab => (\n            <button\n              className=\"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold\"\n              key={tab.id}\n              onClick={() => onTabClick(tab)}\n            >\n              {tab.label}\n            </button>\n          ))}\n          <button className=\"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold\">{renderRating}</button>\n        </div>\n        <div className=\"flex-1\" onClick={() => setDropdownOpen(false)} />\n      </div>\n    </div>\n  )\n}\n\nconst DesktopScrollSpyNav = ({ tabs, onSpyNavItemClick }: ScrollSpyNavProps) => {\n  const [activeTab, setActiveTab] = useState(tabs?.[0])\n\n  const onTabClick = useCallback((tab: ScrollSpyNavItem) => {\n    setActiveTab(tab)\n    onSpyNavItemClick?.(tab)\n  }, [])\n\n  return (\n    <div className=\"flex gap-8\">\n      {tabs?.map(tab => (\n        <button className=\"text-sm relative py-[10px] font-bold\" key={tab.id} onClick={() => onTabClick(tab)}>\n          {tab.label}\n          <div\n            className={cn('absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0', {\n              'w-full': activeTab?.id === tab.id,\n            })}\n          />\n        </button>\n      ))}\n    </div>\n  )\n}\n\nexport { MobileScrollSpyNav, DesktopScrollSpyNav }\n"],
-  "mappings": "AA0BM,cAAAA,EAcE,QAAAC,MAdF,oBA1BN,MAA+B,oCAC/B,OAAS,MAAAC,MAAU,kCACnB,OAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QAC9C,OAAS,QAAAC,MAAY,OAErB,OAAS,wBAAAC,MAA4B,iCAErC,MAAMC,EAAqB,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,kBAAAC,CAAkB,IAAyB,CAChG,KAAM,CAACC,EAAcC,CAAe,EAAIV,EAAS,EAAK,EAChD,CAACW,EAAWC,CAAY,EAAIZ,EAASM,IAAO,CAAC,CAAC,EAC9CO,EAAcX,EAAuB,IAAI,EACzC,CAAE,aAAAY,CAAa,EAAIV,EAAqB,EAExCW,EAAad,EAAae,GAA0B,CACxDJ,EAAaI,CAAG,EAChBR,IAAoBQ,CAAG,EACvBN,EAAgB,EAAK,CACvB,EAAG,CAAC,CAAC,EAECO,EAAiBhB,EAAY,IAAM,CACvCS,EAAgB,CAACD,CAAY,EAC7BN,EAAK,OAAOU,GAAa,QAAS,CAAE,OAAQ,CAAE,EAAG,CAAE,OAAQ,OAAQ,SAAU,GAAK,KAAM,cAAe,CAAC,CAC1G,EAAG,CAACJ,CAAY,CAAC,EAEjB,OACEX,EAAC,OACC,UAAAD,EAAC,UACC,UAAU,uFACV,QAASoB,EAER,SAAAN,GAAW,MACd,EACAb,EAAC,OACC,UAAWC,EAAG,mEAAoE,CAC/E,OAAW,CAACU,CACf,CAAC,EACD,MAAO,CACL,OAAQ,iBAAiBF,CAAiB,KAC5C,EAEA,UAAAT,EAAC,OAAI,IAAKe,EAAa,UAAU,mEAC9B,UAAAP,GAAM,IAAIU,GACTnB,EAAC,UACC,UAAU,qDAEV,QAAS,IAAMkB,EAAWC,CAAG,EAE5B,SAAAA,EAAI,OAHAA,EAAI,EAIX,CACD,EACDnB,EAAC,UAAO,UAAU,qDAAsD,SAAAiB,EAAa,GACvF,EACAjB,EAAC,OAAI,UAAU,SAAS,QAAS,IAAMa,EAAgB,EAAK,EAAG,GACjE,GACF,CAEJ,EAEMQ,EAAsB,CAAC,CAAE,KAAAZ,EAAM,kBAAAE,CAAkB,IAAyB,CAC9E,KAAM,CAACG,EAAWC,CAAY,EAAIZ,EAASM,IAAO,CAAC,CAAC,EAE9CS,EAAad,EAAae,GAA0B,CACxDJ,EAAaI,CAAG,EAChBR,IAAoBQ,CAAG,CACzB,EAAG,CAAC,CAAC,EAEL,OACEnB,EAAC,OAAI,UAAU,aACZ,SAAAS,GAAM,IAAIU,GACTlB,EAAC,UAAO,UAAU,uCAAoD,QAAS,IAAMiB,EAAWC,CAAG,EAChG,UAAAA,EAAI,MACLnB,EAAC,OACC,UAAWE,EAAG,0FAA2F,CACvG,SAAUY,GAAW,KAAOK,EAAI,EAClC,CAAC,EACH,IAN4DA,EAAI,EAOlE,CACD,EACH,CAEJ",
-  "names": ["jsx", "jsxs", "cn", "useState", "useCallback", "useRef", "gsap", "useBizProductContext", "MobileScrollSpyNav", "tabs", "purchaseBarHeight", "onSpyNavItemClick", "dropdownOpen", "setDropdownOpen", "activeTab", "setActiveTab", "dropdownRef", "renderRating", "onTabClick", "tab", "onDropdownOpen", "DesktopScrollSpyNav"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\n\nconst ArrowDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#1D1D1F\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nconst MobileScrollSpyNav = ({ tabs, purchaseBarHeight, onSpyNavItemClick }: ScrollSpyNavProps) => {\n  const [dropdownOpen, setDropdownOpen] = useState(false)\n  const [activeTab, setActiveTab] = useState(tabs?.[0])\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const { renderRating } = useBizProductContext()\n  \n  const onTabClick = useCallback((tab: ScrollSpyNavItem) => {\n    setActiveTab(tab)\n    onSpyNavItemClick?.(tab)\n    setDropdownOpen(false)\n  }, [])\n\n  const onDropdownOpen = useCallback(() => {\n    setDropdownOpen(!dropdownOpen)\n    gsap.fromTo(dropdownRef?.current, { height: 0 }, { height: 'auto', duration: 0.5, ease: 'power2.inOut' })\n  }, [dropdownOpen])\n\n  return (\n    <div>\n      <button\n        className=\"text-sm h-[28px] font-bold flex gap-1 items-center leading-[28px] px-[10px] border rounded-full border-black\"\n        onClick={onDropdownOpen}\n      >\n        {activeTab?.label}<ArrowDownIcon className='size-3'/>\n      </button>\n      <div\n        className={cn('absolute top-full w-full flex flex-col z-[60] bg-black/60 left-0', {\n          ['hidden']: !dropdownOpen,\n        })}\n        style={{\n          height: `calc(100dvh - ${purchaseBarHeight}px)`,\n        }}\n      >\n        <div ref={dropdownRef} className=\"border-t overflow-hidden border-[#E4E5E6] flex flex-col bg-white\">\n          {tabs?.map(tab => (\n            <button\n              className=\"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold\"\n              key={tab.id}\n              onClick={() => onTabClick(tab)}\n            >\n              {tab.label}\n            </button>\n          ))}\n          <button className=\"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold\">{renderRating}</button>\n        </div>\n        <div className=\"flex-1\" onClick={() => setDropdownOpen(false)} />\n      </div>\n    </div>\n  )\n}\n\nconst DesktopScrollSpyNav = ({ tabs, onSpyNavItemClick }: ScrollSpyNavProps) => {\n  const [activeTab, setActiveTab] = useState(tabs?.[0])\n\n  const onTabClick = useCallback((tab: ScrollSpyNavItem) => {\n    setActiveTab(tab)\n    onSpyNavItemClick?.(tab)\n  }, [])\n\n  return (\n    <div className=\"flex gap-8\">\n      {tabs?.map(tab => (\n        <button className=\"text-sm relative py-[10px] font-bold\" key={tab.id} onClick={() => onTabClick(tab)}>\n          {tab.label}\n          <div\n            className={cn('absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0', {\n              'w-full': activeTab?.id === tab.id,\n            })}\n          />\n        </button>\n      ))}\n    </div>\n  )\n}\n\nexport { MobileScrollSpyNav, DesktopScrollSpyNav }\n"],
+  "mappings": "AAUM,cAAAA,EAwBA,QAAAC,MAxBA,oBAVN,MAA+B,oCAC/B,OAAS,MAAAC,MAAU,kCACnB,OAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QAC9C,OAAS,QAAAC,MAAY,OAErB,OAAS,wBAAAC,MAA4B,iCAErC,MAAMC,EAAiBC,GAEnBT,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGS,EACjG,SAAAT,EAAC,QAAK,EAAE,qBAAqB,OAAO,UAAU,cAAc,QAAQ,eAAe,QAAQ,EAC7F,EAIEU,EAAqB,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,kBAAAC,CAAkB,IAAyB,CAChG,KAAM,CAACC,EAAcC,CAAe,EAAIZ,EAAS,EAAK,EAChD,CAACa,EAAWC,CAAY,EAAId,EAASQ,IAAO,CAAC,CAAC,EAC9CO,EAAcb,EAAuB,IAAI,EACzC,CAAE,aAAAc,CAAa,EAAIZ,EAAqB,EAExCa,EAAahB,EAAaiB,GAA0B,CACxDJ,EAAaI,CAAG,EAChBR,IAAoBQ,CAAG,EACvBN,EAAgB,EAAK,CACvB,EAAG,CAAC,CAAC,EAECO,EAAiBlB,EAAY,IAAM,CACvCW,EAAgB,CAACD,CAAY,EAC7BR,EAAK,OAAOY,GAAa,QAAS,CAAE,OAAQ,CAAE,EAAG,CAAE,OAAQ,OAAQ,SAAU,GAAK,KAAM,cAAe,CAAC,CAC1G,EAAG,CAACJ,CAAY,CAAC,EAEjB,OACEb,EAAC,OACC,UAAAA,EAAC,UACC,UAAU,+GACV,QAASqB,EAER,UAAAN,GAAW,MAAMhB,EAACQ,EAAA,CAAc,UAAU,SAAQ,GACrD,EACAP,EAAC,OACC,UAAWC,EAAG,mEAAoE,CAC/E,OAAW,CAACY,CACf,CAAC,EACD,MAAO,CACL,OAAQ,iBAAiBF,CAAiB,KAC5C,EAEA,UAAAX,EAAC,OAAI,IAAKiB,EAAa,UAAU,mEAC9B,UAAAP,GAAM,IAAIU,GACTrB,EAAC,UACC,UAAU,qDAEV,QAAS,IAAMoB,EAAWC,CAAG,EAE5B,SAAAA,EAAI,OAHAA,EAAI,EAIX,CACD,EACDrB,EAAC,UAAO,UAAU,qDAAsD,SAAAmB,EAAa,GACvF,EACAnB,EAAC,OAAI,UAAU,SAAS,QAAS,IAAMe,EAAgB,EAAK,EAAG,GACjE,GACF,CAEJ,EAEMQ,EAAsB,CAAC,CAAE,KAAAZ,EAAM,kBAAAE,CAAkB,IAAyB,CAC9E,KAAM,CAACG,EAAWC,CAAY,EAAId,EAASQ,IAAO,CAAC,CAAC,EAE9CS,EAAahB,EAAaiB,GAA0B,CACxDJ,EAAaI,CAAG,EAChBR,IAAoBQ,CAAG,CACzB,EAAG,CAAC,CAAC,EAEL,OACErB,EAAC,OAAI,UAAU,aACZ,SAAAW,GAAM,IAAIU,GACTpB,EAAC,UAAO,UAAU,uCAAoD,QAAS,IAAMmB,EAAWC,CAAG,EAChG,UAAAA,EAAI,MACLrB,EAAC,OACC,UAAWE,EAAG,0FAA2F,CACvG,SAAUc,GAAW,KAAOK,EAAI,EAClC,CAAC,EACH,IAN4DA,EAAI,EAOlE,CACD,EACH,CAEJ",
+  "names": ["jsx", "jsxs", "cn", "useState", "useCallback", "useRef", "gsap", "useBizProductContext", "ArrowDownIcon", "props", "MobileScrollSpyNav", "tabs", "purchaseBarHeight", "onSpyNavItemClick", "dropdownOpen", "setDropdownOpen", "activeTab", "setActiveTab", "dropdownRef", "renderRating", "onTabClick", "tab", "onDropdownOpen", "DesktopScrollSpyNav"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useEffect as m,useState as n,useMemo as u}from"react";import{Heading as d,Container as f}from"../../../../components";import"gsap";import"../../../AiuiProvider/index.js";import"../../../../helpers/index.js";import{ProductActions as b}from"../index.js";import{useBizProductContext as h}from"../../BizProductProvider.js";import{MobileScrollSpyNav as y,DesktopScrollSpyNav as x}from"./ScrollSpyNav/index.js";const v=({onSpyNavItemClick:r})=>{const[p,i]=n(0),{isMobile:g,product:t,renderRating:l,isDesktop:o}=h(),s=u(()=>t?.payload?.components?.find(c=>c.componentKey==="PurchaseBar")?.data||[],[t?.payload]);return m(()=>{i(document.querySelector("#purchase-bar")?.clientHeight||0)},[]),e("div",{id:"purchase-bar",className:"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]",children:e(f,{className:"py-3 desktop:pt-6 desktop:pb-0",children:a("div",{className:"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full",children:[a("div",{className:"flex-1 tablet:flex-none",children:[e(d,{size:2,className:"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]",html:t?.title}),o&&a("div",{className:"flex justify-between gap-8 items-center mt-3",children:[e(x,{tabs:s,onSpyNavItemClick:r}),l]})]}),o?e(b,{}):e(y,{tabs:s,purchaseBarHeight:p,onSpyNavItemClick:r})]})})})};var R=v;export{R as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useEffect as m,useState as n,useMemo as u}from"react";import{Heading as d,Container as f}from"../../../../components";import"gsap";import"../../../AiuiProvider/index.js";import"../../../../helpers/index.js";import{ProductActions as b}from"../index.js";import{useBizProductContext as h}from"../../BizProductProvider.js";import{MobileScrollSpyNav as y,DesktopScrollSpyNav as x}from"./ScrollSpyNav/index.js";const v=({onSpyNavItemClick:r})=>{const[p,i]=n(0),{isMobile:g,product:t,renderRating:l,isDesktop:o}=h(),s=u(()=>t?.payload?.components?.find(c=>c.componentKey==="PurchaseBar")?.data||[],[t?.payload]);return m(()=>{i(document.querySelector("#purchase-bar")?.clientHeight||0)},[]),e("div",{id:"purchase-bar",className:"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]",children:e(f,{children:a("div",{className:"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full",children:[a("div",{className:"flex-1 py-3 desktop:pt-6 desktop:pb-0 tablet:flex-none",children:[e(d,{size:2,className:"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]",html:t?.title}),o&&a("div",{className:"flex justify-between gap-8 items-center mt-3",children:[e(x,{tabs:s,onSpyNavItemClick:r}),l]})]}),o?e(b,{}):e(y,{tabs:s,purchaseBarHeight:p,onSpyNavItemClick:r})]})})})};var R=v;export{R as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PurchaseBar/index.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef, useState, useMemo } from 'react'\nimport { Text, Heading, Button, Container } from '../../../../components'\nimport type { PurchaseBarProps, ScrollSpyNavProps, ScrollSpyNavItem } from './types.js'\nimport { gsap } from 'gsap'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ProductActions } from '../index.js'\nimport { useBizProductContext } from '../../BizProductProvider.js'\nimport { MobileScrollSpyNav, DesktopScrollSpyNav } from './ScrollSpyNav/index.js'\n\nconst PurchaseBar = ({ onSpyNavItemClick }: PurchaseBarProps) => {\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const { isMobile, product, renderRating, isDesktop } = useBizProductContext()\n\n  const PurchaseBarData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'PurchaseBar')?.data || []\n  }, [product?.payload])\n\n  useEffect(() => {\n    setPurchaseBarHeight(document.querySelector('#purchase-bar')?.clientHeight || 0)\n  }, [])\n\n  return (\n    <div id=\"purchase-bar\" className=\"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]\">\n      <Container className=\"py-3 desktop:pt-6 desktop:pb-0\">\n        <div className=\"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full\">\n          <div className=\"flex-1 tablet:flex-none\">\n            <Heading\n              size={2}\n              className=\"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]\"\n              html={product?.title}\n            />\n            {isDesktop && (\n              <div className=\"flex justify-between gap-8 items-center mt-3\">\n                <DesktopScrollSpyNav tabs={PurchaseBarData} onSpyNavItemClick={onSpyNavItemClick} />\n                {renderRating}\n              </div>\n            )}\n          </div>\n          {!isDesktop ? (\n            <MobileScrollSpyNav\n              tabs={PurchaseBarData}\n              purchaseBarHeight={purchaseBarHeight}\n              onSpyNavItemClick={onSpyNavItemClick}\n            />\n          ) : (\n            <ProductActions />\n          )}\n        </div>\n      </Container>\n    </div>\n  )\n}\n\nexport default PurchaseBar\n"],
-  "mappings": "AA2BY,cAAAA,EAME,QAAAC,MANF,oBA3BZ,OAAsB,aAAAC,EAAmB,YAAAC,EAAU,WAAAC,MAAe,QAClE,OAAe,WAAAC,EAAiB,aAAAC,MAAiB,yBAEjD,MAAqB,OACrB,MAA+B,iCAC/B,MAAmB,+BACnB,OAAS,kBAAAC,MAAsB,cAC/B,OAAS,wBAAAC,MAA4B,8BACrC,OAAS,sBAAAC,EAAoB,uBAAAC,MAA2B,0BAExD,MAAMC,EAAc,CAAC,CAAE,kBAAAC,CAAkB,IAAwB,CAC/D,KAAM,CAACC,EAAmBC,CAAoB,EAAIX,EAAS,CAAC,EACtD,CAAE,SAAAY,EAAU,QAAAC,EAAS,aAAAC,EAAc,UAAAC,CAAU,EAAIV,EAAqB,EAEtEW,EAAkBf,EAAQ,IACvBY,GAAS,SAAS,YAAY,KAAMI,GAAcA,EAAK,eAAiB,aAAa,GAAG,MAAQ,CAAC,EACvG,CAACJ,GAAS,OAAO,CAAC,EAErB,OAAAd,EAAU,IAAM,CACdY,EAAqB,SAAS,cAAc,eAAe,GAAG,cAAgB,CAAC,CACjF,EAAG,CAAC,CAAC,EAGHd,EAAC,OAAI,GAAG,eAAe,UAAU,uEAC/B,SAAAA,EAACM,EAAA,CAAU,UAAU,iCACnB,SAAAL,EAAC,OAAI,UAAU,iFACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACK,EAAA,CACC,KAAM,EACN,UAAU,mFACV,KAAMW,GAAS,MACjB,EACCE,GACCjB,EAAC,OAAI,UAAU,+CACb,UAAAD,EAACU,EAAA,CAAoB,KAAMS,EAAiB,kBAAmBP,EAAmB,EACjFK,GACH,GAEJ,EACEC,EAOAlB,EAACO,EAAA,EAAe,EANhBP,EAACS,EAAA,CACC,KAAMU,EACN,kBAAmBN,EACnB,kBAAmBD,EACrB,GAIJ,EACF,EACF,CAEJ,EAEA,IAAOS,EAAQV",
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState, useMemo } from 'react'\nimport { Text, Heading, Button, Container } from '../../../../components'\nimport type { PurchaseBarProps, ScrollSpyNavProps, ScrollSpyNavItem } from './types.js'\nimport { gsap } from 'gsap'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ProductActions } from '../index.js'\nimport { useBizProductContext } from '../../BizProductProvider.js'\nimport { MobileScrollSpyNav, DesktopScrollSpyNav } from './ScrollSpyNav/index.js'\n\nconst PurchaseBar = ({ onSpyNavItemClick }: PurchaseBarProps) => {\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const { isMobile, product, renderRating, isDesktop } = useBizProductContext()\n\n  const PurchaseBarData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'PurchaseBar')?.data || []\n  }, [product?.payload])\n\n  useEffect(() => {\n    setPurchaseBarHeight(document.querySelector('#purchase-bar')?.clientHeight || 0)\n  }, [])\n\n  return (\n    <div id=\"purchase-bar\" className=\"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]\">\n      <Container>\n        {/* // py-3 desktop:pt-6 desktop:pb-0 */}\n        <div className=\"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full\">\n          <div className=\"flex-1 py-3 desktop:pt-6 desktop:pb-0 tablet:flex-none\">\n            <Heading\n              size={2}\n              className=\"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]\"\n              html={product?.title}\n            />\n            {isDesktop && (\n              <div className=\"flex justify-between gap-8 items-center mt-3\">\n                <DesktopScrollSpyNav tabs={PurchaseBarData} onSpyNavItemClick={onSpyNavItemClick} />\n                {renderRating}\n              </div>\n            )}\n          </div>\n          {!isDesktop ? (\n            <MobileScrollSpyNav\n              tabs={PurchaseBarData}\n              purchaseBarHeight={purchaseBarHeight}\n              onSpyNavItemClick={onSpyNavItemClick}\n            />\n          ) : (\n            <ProductActions />\n          )}\n        </div>\n      </Container>\n    </div>\n  )\n}\n\nexport default PurchaseBar\n"],
+  "mappings": "AA4BY,cAAAA,EAME,QAAAC,MANF,oBA5BZ,OAAsB,aAAAC,EAAmB,YAAAC,EAAU,WAAAC,MAAe,QAClE,OAAe,WAAAC,EAAiB,aAAAC,MAAiB,yBAEjD,MAAqB,OACrB,MAA+B,iCAC/B,MAAmB,+BACnB,OAAS,kBAAAC,MAAsB,cAC/B,OAAS,wBAAAC,MAA4B,8BACrC,OAAS,sBAAAC,EAAoB,uBAAAC,MAA2B,0BAExD,MAAMC,EAAc,CAAC,CAAE,kBAAAC,CAAkB,IAAwB,CAC/D,KAAM,CAACC,EAAmBC,CAAoB,EAAIX,EAAS,CAAC,EACtD,CAAE,SAAAY,EAAU,QAAAC,EAAS,aAAAC,EAAc,UAAAC,CAAU,EAAIV,EAAqB,EAEtEW,EAAkBf,EAAQ,IACvBY,GAAS,SAAS,YAAY,KAAMI,GAAcA,EAAK,eAAiB,aAAa,GAAG,MAAQ,CAAC,EACvG,CAACJ,GAAS,OAAO,CAAC,EAErB,OAAAd,EAAU,IAAM,CACdY,EAAqB,SAAS,cAAc,eAAe,GAAG,cAAgB,CAAC,CACjF,EAAG,CAAC,CAAC,EAGHd,EAAC,OAAI,GAAG,eAAe,UAAU,uEAC/B,SAAAA,EAACM,EAAA,CAEC,SAAAL,EAAC,OAAI,UAAU,iFACb,UAAAA,EAAC,OAAI,UAAU,yDACb,UAAAD,EAACK,EAAA,CACC,KAAM,EACN,UAAU,mFACV,KAAMW,GAAS,MACjB,EACCE,GACCjB,EAAC,OAAI,UAAU,+CACb,UAAAD,EAACU,EAAA,CAAoB,KAAMS,EAAiB,kBAAmBP,EAAmB,EACjFK,GACH,GAEJ,EACEC,EAOAlB,EAACO,EAAA,EAAe,EANhBP,EAACS,EAAA,CACC,KAAMU,EACN,kBAAmBN,EACnB,kBAAmBD,EACrB,GAIJ,EACF,EACF,CAEJ,EAEA,IAAOS,EAAQV",
   "names": ["jsx", "jsxs", "useEffect", "useState", "useMemo", "Heading", "Container", "ProductActions", "useBizProductContext", "MobileScrollSpyNav", "DesktopScrollSpyNav", "PurchaseBar", "onSpyNavItemClick", "purchaseBarHeight", "setPurchaseBarHeight", "isMobile", "product", "renderRating", "isDesktop", "PurchaseBarData", "item", "PurchaseBar_default"]
 }