@anker-in/headless-ui 1.0.26-alpha.1762421089853 → 1.0.26-alpha.1762425612656

package/dist/esm/biz-components/HeroBanner/types.d.ts

@@ -0,0 +1,43 @@
+import type { ButtonProps } from '../../components/button.js';
+import type { Media, Theme } from '../../types/props.js';
+export interface HeroBannerProps {
+    data: {
+        /** 主标题 */
+        title: string;
+        /** 副标题/描述文本 */
+        subtitle: string;
+        pcImage: Media;
+        padImage?: Media;
+        mobileImage: Media;
+        pcVideo?: Media;
+        padVideo?: Media;
+        mobileVideo?: Media;
+        isShowVideo?: boolean;
+        blockLink?: string;
+        /** 主按钮文本和配置 */
+        primaryButton?: {
+            text: string;
+            link?: string;
+        } & Omit<ButtonProps, 'children'>;
+        /** 次要按钮文本和配置 */
+        secondaryButton?: {
+            text: string;
+            link?: string;
+            isShowPlayVideoButton?: boolean;
+            playVideoButtonText?: string;
+            playIcon?: boolean;
+            videoUrl?: Media;
+            youtubeId?: string;
+        } & Omit<ButtonProps, 'children'>;
+        /** 主题 */
+        theme?: Theme;
+        /** 大小, 默认default,单banner, 可选sm, 用于多banner场景 */
+        size?: 'default' | 'sm';
+        /** 底部产品列表 */
+        caption?: Array<{
+            title: string;
+        }>;
+    };
+    /** 自定义类名 */
+    className?: string;
+}

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as p}from"react/jsx-runtime";import{Text as f,Picture as y,Button as k,Dialog as N,DialogContent as w,DialogTrigger as C}from"../../../../../../components";import{Content as x,List as T,Root as D,Trigger as E}from"@radix-ui/react-tabs";import{useCallback as H,useEffect as I,useMemo as h,useRef as v,useState as m}from"react";import{cn as P}from"../../../../../../helpers";import{useBizProductContext as A}from"../../../../BizProductProvider.js";const L=()=>{const{product:o}=A(),[s,i]=m(!1),l=h(()=>o?.payload?.components?.find(t=>t.blockType==="ipc-graphicmore")?.productsTab||{},[o?.payload]);console.log("ksp",l);const[n,c]=m(l?.[0]),a=h(()=>o?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[o?.payload]);return p("div",{className:"ipc-product-detail-highlight",children:[p("div",{className:"flex items-center justify-between",children:[a?.title&&e(f,{size:3,className:"font-bold",html:a?.title}),p(N,{open:s,onOpenChange:i,children:[e(C,{asChild:!0,children:e(k,{variant:"link",className:"font-bold !p-0 text-base",children:a?.view})}),e(R,{ksp:l,clickActiveKspItem:n})]})]}),e("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:l.map(t=>e("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:e(f,{size:3,onClick:()=>{c(t),i(!0)},className:"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:t?.title},t?.title)}))})]})},R=({ksp:o,clickActiveKspItem:s})=>{const i=v([]),l=v(null),[n,c]=m(null),a=H(t=>{const d=o.findIndex(u=>u.title===t?.title),r=i.current[d];if(r&&l.current){const u=l.current,g=r,b=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:b,behavior:"smooth"})}},[s,o]);return I(()=>{s&&(c(s),setTimeout(()=>{a(n)},100))},[s,a]),e(w,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:p(D,{defaultValue:n?.title,className:"w-full overflow-hidden",children:[o.map(t=>e(x,{value:t.title,children:e(y,{source:`${t?.mobileImg?.url}, ${t?.img?.url} 767`,className:"w-full h-[304px] desktop:h-[480px]",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),e("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:p("div",{ref:l,className:"px-4 desktop:px-6 overflow-x-auto",children:[e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e(T,{className:"flex p-1 w-max",children:o.map((t,d)=>e(E,{ref:r=>{r&&(i.current[d]=r)},className:P("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]",t.title===n?.title&&"bg-white"),onClick:()=>{a(t),c(t)},value:t.title,children:e(f,{html:t.title,className:"font-bold text-[14px] leading-tight"})},d))})}),e("div",{className:"mt-4",children:o.map(t=>e(x,{value:t.title,className:"font-bold text-base desktop:text-[18px]",children:t.description}))})]})})]})})};var S=L;export{S as default};
+import{jsx as e,jsxs as p}from"react/jsx-runtime";import{Text as f,Picture as y,Button as N,Dialog as k,DialogContent as w,DialogTrigger as C}from"../../../../../../components";import{Content as x,List as T,Root as D,Trigger as E}from"@radix-ui/react-tabs";import{useCallback as H,useEffect as I,useMemo as h,useRef as v,useState as m}from"react";import{cn as P}from"../../../../../../helpers";import{useBizProductContext as A}from"../../../../BizProductProvider.js";const L=()=>{const{product:o}=A(),[s,i]=m(!1),l=h(()=>o?.payload?.components?.find(t=>t.blockType==="ipc-graphicmore")?.productsTab||{},[o?.payload]),[n,c]=m(l?.[0]),a=h(()=>o?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[o?.payload]);return p("div",{className:"ipc-product-detail-highlight",children:[p("div",{className:"flex items-center justify-between",children:[a?.title&&e(f,{size:3,className:"font-bold",html:a?.title}),p(k,{open:s,onOpenChange:i,children:[e(C,{asChild:!0,children:e(N,{variant:"link",className:"font-bold !p-0 text-base",children:a?.view})}),e(R,{ksp:l,clickActiveKspItem:n})]})]}),e("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:l.map(t=>e("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:e(f,{size:3,onClick:()=>{c(t),i(!0)},className:"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:t?.title},t?.title)}))})]})},R=({ksp:o,clickActiveKspItem:s})=>{const i=v([]),l=v(null),[n,c]=m(null),a=H(t=>{const d=o.findIndex(u=>u.title===t?.title),r=i.current[d];if(r&&l.current){const u=l.current,g=r,b=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:b,behavior:"smooth"})}},[s,o]);return I(()=>{s&&(c(s),setTimeout(()=>{a(n)},100))},[s,a]),e(w,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:p(D,{defaultValue:n?.title,className:"w-full overflow-hidden",children:[o.map(t=>e(x,{value:t.title,children:e(y,{source:`${t?.mobileImg?.url}, ${t?.img?.url} 767`,className:"w-full h-[304px] desktop:h-[480px]",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),e("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:p("div",{ref:l,className:"px-4 desktop:px-6 overflow-x-auto",children:[e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e(T,{className:"flex p-1 w-max",children:o.map((t,d)=>e(E,{ref:r=>{r&&(i.current[d]=r)},className:P("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]",t.title===n?.title&&"bg-white"),onClick:()=>{a(t),c(t)},value:t.title,children:e(f,{html:t.title,className:"font-bold text-[14px] leading-tight"})},d))})}),e("div",{className:"mt-4",children:o.map(t=>e(x,{value:t.title,className:"font-bold text-base desktop:text-[18px]",children:t.description}))})]})})]})})};var S=L;export{S as default};
 //# sourceMappingURL=index.js.map

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

@@ -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 { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.blockType === 'ipc-graphicmore')?.productsTab || {}\n  }, [product?.payload])\n\n  console.log('ksp', ksp)\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\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] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.title}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.title}\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  const autoScrollToActiveItem = useCallback((activeKspItem: any) => {\n    const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\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  }, [clickActiveKspItem, ksp])\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      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\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?.title} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg?.url}, ${item?.img?.url} 767`}\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.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} 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.title} 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.blockType === 'ipc-graphicmore')?.productsTab || {}\n  }, [product?.payload])\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\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] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.title}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.title}\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  const autoScrollToActiveItem = useCallback((activeKspItem: any) => {\n    const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\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  }, [clickActiveKspItem, ksp])\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      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\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?.title} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg?.url}, ${item?.img?.url} 767`}\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.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} 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.title} 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": "AAyBwC,cAAAA,EAChC,QAAAC,MADgC,oBAxBxC,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAiB,UAAAC,EAAQ,iBAAAC,EAAe,iBAAAC,MAAqB,+BACrF,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,UAAAC,EAAQ,YAAAC,MAAgB,QAClE,OAAS,MAAAC,MAAU,4BACnB,OAAS,wBAAAC,MAA4B,oCAErC,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EACnC,CAACG,EAAMC,CAAO,EAAIN,EAAS,EAAK,EAEhCO,EAAMT,EAAQ,IACXM,GAAS,SAAS,YAAY,KAAMI,GAAcA,EAAK,YAAc,iBAAiB,GAAG,aAAe,CAAC,EAC/G,CAACJ,GAAS,OAAO,CAAC,EAEf,CAACK,EAAeC,CAAgB,EAAIV,EAASO,IAAM,CAAC,CAAC,EAErDI,EAAuBb,EAAQ,IAC5BM,GAAS,SAAS,YAAY,KAAMI,GAAcA,EAAK,eAAiB,kBAAkB,GAAG,MAAQ,CAAC,EAC5G,CAACJ,GAAS,OAAO,CAAC,EAGrB,OACEnB,EAAC,OAAI,UAAU,+BACb,UAAAA,EAAC,OAAI,UAAU,oCACZ,UAAA0B,GAAsB,OAAS3B,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMyB,GAAsB,MAAO,EACxG1B,EAACI,EAAA,CAAO,KAAMgB,EAAM,aAAcC,EAChC,UAAAtB,EAACO,EAAA,CAAc,QAAO,GACpB,SAAAP,EAACI,EAAA,CAAO,QAAQ,OAAO,UAAU,2BAC9B,SAAAuB,GAAsB,KACzB,EACF,EACA3B,EAAC4B,EAAA,CAAsB,IAAKL,EAAK,mBAAoBE,EAAe,GACtE,GACF,EACAzB,EAAC,OAAI,UAAU,yCACZ,SAAAuB,EAAI,IAAKC,GACRxB,EAAC,OAAI,UAAU,wEACb,SAAAA,EAACE,EAAA,CACC,KAAM,EAEN,QAAS,IAAM,CACbwB,EAAiBF,CAAI,EACrBF,EAAQ,EAAI,CACd,EACA,UAAU,wHACV,KAAME,GAAM,OANPA,GAAM,KAOb,EACF,CACD,EACH,GACF,CAEJ,EAEMI,EAAwB,CAAC,CAAE,IAAAL,EAAK,mBAAAM,CAAmB,IAA+C,CACtG,MAAMC,EAAef,EAA4B,CAAC,CAAC,EAC7CgB,EAAqBhB,EAAuB,IAAI,EAChD,CAACU,EAAeC,CAAgB,EAAIV,EAAc,IAAI,EAEtDgB,EAAyBpB,EAAaa,GAAuB,CACjE,MAAMQ,EAAWV,EAAI,UAAUC,GAAQA,EAAK,QAAUC,GAAe,KAAK,EACpES,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAACR,EAAoBN,CAAG,CAAC,EAE5B,OAAAV,EAAU,IAAM,CACTgB,IACLH,EAAiBG,CAAkB,EAGnC,WAAW,IAAM,CACfG,EAAuBP,CAAa,CACtC,EAAG,GAAG,EACR,EAAG,CAACI,EAAoBG,CAAsB,CAAC,EAG7ChC,EAACM,EAAA,CACC,iBAAiB,SACjB,UAAU,2FAEV,SAAAL,EAACS,EAAA,CAAK,aAAce,GAAe,MAAO,UAAU,yBACjD,UAAAF,EAAI,IAAIC,GACPxB,EAACQ,EAAA,CAAQ,MAAOgB,EAAK,MACnB,SAAAxB,EAACG,EAAA,CACC,OAAQ,GAAGqB,GAAM,WAAW,GAAG,KAAKA,GAAM,KAAK,GAAG,OAClD,UAAU,qCACV,IAAKA,EAAK,IAAI,IACd,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,EACDxB,EAAC,OAAI,UAAU,4CACb,SAAAC,EAAC,OAAI,IAAK8B,EAAoB,UAAU,oCACtC,UAAA/B,EAAC,OACC,UAAU,kCACV,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EAEA,SAAAA,EAACS,EAAA,CAAK,UAAU,iBACb,SAAAc,EAAI,IAAI,CAACC,EAAMc,IACdtC,EAACW,EAAA,CACC,IAAK4B,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,UAAWtB,EACT,mIACAO,EAAK,QAAUC,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbO,EAAuBR,CAAI,EAC3BE,EAAiBF,CAAI,CACvB,EAEA,MAAOA,EAAK,MAEZ,SAAAxB,EAACE,EAAA,CAAK,KAAMsB,EAAK,MAAO,UAAU,sCAAsC,GAHnEc,CAIP,CACD,EACH,EACF,EACAtC,EAAC,OAAI,UAAU,OACZ,SAAAuB,EAAI,IAAIC,GACPxB,EAACQ,EAAA,CAAQ,MAAOgB,EAAK,MAAO,UAAU,0CACnC,SAAAA,EAAK,YACR,CACD,EACH,GACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOgB,EAAQrB",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "ProductHighlight", "product", "open", "setOpen", "ksp", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as g,useState as b}from"react";import{Dialog as v,DialogTrigger as N,DialogContent as C,DialogHeader as E,DialogTitle as y,Grid as p,GridItem as s,Text as h}from"../../../../../../components";import{useBizProductContext as D}from"../../../../BizProductProvider";import G from"./Select";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{formatPrice as I}from"../../../../utils";import{ShopifyColorOption as k}from"./ShopifyColorOption";const P=()=>{const{locale:f="us"}=w(),{compareData:o,product:u}=D(),[d,x]=b();g(()=>{x(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(t=>t.handle===d)?.product].filter(Boolean);return o?.specificationKeys?r(v,{children:[e(N,{children:e("button",{className:"text-base leading-[1.4] font-bold",children:"Compare"})}),r(C,{overlayClassName:"z-[100]",className:"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]",children:[e(E,{className:"border-b border-[#E8E8E8]",children:e(y,{children:"Compare"})}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1}),m.map((t,i)=>e(s,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"h-[200px] w-[200px]",role:"presentation"})},i))]}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(s,{span:1,children:e(h,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:o.currentProductCompareData?.shortName||u.title})}),d&&e(s,{span:1,children:e(G,{value:d,onChange:t=>{x(t)},list:o.options})})]}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),m.map((t,i)=>{const l=t.variants[0],c=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(s,{span:1,className:"flex h-full",children:r("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&r("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:I({locale:f,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),c?.length&&r("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:c.map(a=>e(k,{label:a,className:"h-[16px] w-[16px]"},a))})]})]})},i)})]}),e(p,{className:"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:o.specificationKeys?.map(t=>r(s,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),m.map((i,l)=>{let a=i.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var A=P;export{A as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as g,useState as b}from"react";import{Dialog as v,DialogTrigger as N,DialogContent as C,DialogHeader as y,DialogTitle as E,Grid as p,GridItem as s,Text as D}from"../../../../../../components";import{useBizProductContext as h}from"../../../../BizProductProvider";import G from"./Select";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{formatPrice as I}from"../../../../utils";import{ShopifyColorOption as k}from"./ShopifyColorOption";const P=()=>{const{locale:f="us"}=w(),{compareData:r,product:u}=h(),[d,x]=b();g(()=>{x(r?.availableCompareList[0]?.handle)},[r?.availableCompareList]);const c=[r?.currentProductCompareData?.product,r?.availableCompareList.find(t=>t.handle===d)?.product].filter(Boolean);return r?.specificationKeys?o(v,{children:[e(N,{children:e("button",{className:"text-base leading-[1.4] font-bold",children:"Compare"})}),o(C,{overlayClassName:"z-[100]",className:"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0",children:[e(y,{className:"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]",children:e(E,{className:"text-sm text-[#6D6D6F]",children:"Compare"})}),o(p,{className:"grid-cols-3 laptop:gap-8 laptop:py-8 py-6",children:[e(s,{span:1}),c.map((t,i)=>e(s,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"h-[200px] w-[200px]",role:"presentation"})},i))]}),o(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(s,{span:1,children:e(D,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:r.currentProductCompareData?.shortName||u.title})}),d&&e(s,{span:1,children:e(G,{value:d,onChange:t=>{x(t)},list:r.options})})]}),o(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),c.map((t,i)=>{const l=t.variants[0],m=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(s,{span:1,className:"flex h-full",children:o("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:I({locale:f,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),m?.length&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:m.map(a=>e(k,{label:a,className:"h-[16px] w-[16px]"},a))})]})]})},i)})]}),e(p,{className:"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:r.specificationKeys?.map(t=>o(s,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),c.map((i,l)=>{let a=i.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var F=P;export{F as default};
 //# sourceMappingURL=CompareModal.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img\n                  src={product.images[0].url}\n                  alt={product.title}\n                  className=\"h-[200px] w-[200px]\"\n                  role=\"presentation\"\n                />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0\"\n      >\n        <DialogHeader className=\"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"grid-cols-3 laptop:gap-8 laptop:py-8 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img\n                  src={product.images[0].url}\n                  alt={product.title}\n                  className=\"h-[200px] w-[200px]\"\n                  role=\"presentation\"\n                />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Dialog as s,DialogTrigger as i,DialogContent as m,DialogHeader as d,DialogTitle as n,Grid as g,GridItem as c,Text as a}from"../../../../../../components";import{useBizProductContext as x}from"../../../../BizProductProvider";const f=()=>{const{product:l}=x();return o(s,{children:[e(i,{children:e("button",{className:"text-base leading-[1.4] font-bold",children:"Specs"})}),o(m,{overlayClassName:"z-[100]",className:"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]",children:[e(d,{className:"border-b border-[#E8E8E8]",children:e(n,{children:"Specs"})}),e(g,{className:"gap-[40px]",children:l.metafields?.global?.specifications?.map(({key:r,value:t})=>o(c,{span:12,className:"flex w-full py-[24px] border-b border-[#E8E8E8]",children:[e(a,{className:"flex-1 text-[16px] font-bold text-[#595959]",children:r}),e("div",{className:"flex-1 flex items-center",children:e(a,{className:"text-[16px] font-semibold text-[#595959]",html:t?.trim().toLowerCase()==="true"?"\u2714\uFE0F":t?.trim().toLowerCase()==="false"?"\u274C":t})})]}))})]})]})};export{f as SpecsModal};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Dialog as i,DialogTrigger as p,DialogContent as r,DialogHeader as g,DialogTitle as c,Grid as d,GridItem as n,Text as a}from"../../../../../../components";import{useBizProductContext as m}from"../../../../BizProductProvider";const D=()=>{const{product:l}=m();return t(i,{children:[o(p,{children:o("button",{className:"text-base leading-[1.4] font-bold",children:"Specs"})}),t(r,{overlayClassName:"z-[100]",className:"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0",children:[o(g,{className:"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]",children:o(c,{className:"text-sm text-[#6D6D6F]",children:"Specs"})}),o(d,{className:"laptop:gap-8 laptop:py-8 py-6",children:l.metafields?.global?.specifications?.map(({key:s,value:e})=>t(n,{span:6,className:"flex flex-col gap-1",children:[o(a,{className:"text-[16px] font-bold",children:s}),o(a,{className:"text-[16px] font-bold text-[#86868C]",html:e?.trim().toLowerCase()==="true"?"\u2714\uFE0F":e?.trim().toLowerCase()==="false"?"\u274C":e})]}))})]})]})};export{D as SpecsModal};
 //# sourceMappingURL=SpecsModal.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
-  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px]\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={12} className=\"flex w-full py-[24px] border-b border-[#E8E8E8]\">\n              <Text className=\"flex-1 text-[16px] font-bold text-[#595959]\">{key}</Text>\n              <div className=\"flex-1 flex items-center\">\n                <Text\n                  className=\"text-[16px] font-semibold text-[#595959]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </div>\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,+BACP,OAAS,wBAAAC,MAA4B,iCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,2EAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,4BACtB,SAAAL,EAACM,EAAA,CAAY,iBAAK,EACpB,EACAN,EAACO,EAAA,CAAK,UAAU,aACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,GAAI,UAAU,kDAC5B,UAAAR,EAACS,EAAA,CAAK,UAAU,8CAA+C,SAAAI,EAAI,EACnEb,EAAC,OAAI,UAAU,2BACb,SAAAA,EAACS,EAAA,CACC,UAAU,2CACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,EACF,GACF,CACD,EACH,GACF,GACF,CAEJ",
+  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0\"\n      >\n        <DialogHeader className=\"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,+BACP,OAAS,wBAAAC,MAA4B,iCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,8QAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,8DACtB,SAAAL,EAACM,EAAA,CAAY,UAAU,yBAAyB,iBAAK,EACvD,EACAN,EAACO,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,EAAG,UAAU,sBAC3B,UAAAR,EAACS,EAAA,CAAK,UAAU,wBAAyB,SAAAI,EAAI,EAC7Cb,EAACS,EAAA,CACC,UAAU,uCACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,GACF,CACD,EACH,GACF,GACF,CAEJ",
   "names": ["jsx", "jsxs", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "key", "value"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n  setActiveTabIndex: Dispatch<SetStateAction<number>>\n  setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n}) => {\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.currentTarget\n                    const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n                    container.scrollTo({\n                      left: scrollLeft,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\n\n  console.log('shouldScroll', shouldScroll)\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div 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  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n  setActiveTabIndex: Dispatch<SetStateAction<number>>\n  setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n}) => {\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.currentTarget\n                    const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n                    container.scrollTo({\n                      left: scrollLeft,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div 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  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

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

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