npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1763367560339 → 1.0.26-alpha.1763381435286 - Mend

@anker-in/headless-ui 1.0.26-alpha.1763367560339 → 1.0.26-alpha.1763381435286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductHighlight = () => {\n  const { product } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\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={productHighlightData?.ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div className=\"product-highlight-item 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] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 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}, ${item?.img} 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\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"px-4 desktop:px-6 overflow-x-auto\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex p-1 w-max\">\n                {ksp?.map?.((item: any, index: number) => (\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 h-[38px] leading-[38px] rounded-full px-5',\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-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"mt-4 px-4 desktop:px-6\">\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      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(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'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductHighlight = () => {\n  const { product } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\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={productHighlightData?.ksp || []} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 lg-desktop:mt-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div className=\"product-highlight-item px-4 h-[36px] leading-[36px] lg-desktop:h-[38px] lg-desktop:leading-[38px] 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 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(\n    (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    },\n    [clickActiveKspItem, ksp]\n  )\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] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 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}, ${item?.img} 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\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"px-4 desktop:px-6 overflow-x-auto\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex p-1 w-max\">\n                {ksp?.map?.((item: any, index: number) => (\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 h-[38px] leading-[38px] rounded-full px-5',\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-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"mt-4 px-4 desktop:px-6\">\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      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
   "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "ProductHighlight", "product", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightModal", "ksp", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var u=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var P=(s,o)=>{for(var n in o)u(s,n,{get:o[n],enumerable:!0})},C=(s,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of k(o))!E.call(s,i)&&i!==n&&u(s,i,{get:()=>o[i],enumerable:!(a=_(o,i))||a.enumerable});return s};var L=s=>C(u({},"__esModule",{value:!0}),s);var B={};P(B,{default:()=>O});module.exports=L(B);var e=require("react/jsx-runtime"),d=require("../../../../../../components"),l=require("../../../../../../helpers/index.js"),p=require("react"),f=require("../../../../BizProductProvider.js"),v=require("../../../../../AiuiProvider/index.js"),x=require("../../../../utils/helper.js"),g=require("../../../../../../shared/Styles.js");const z=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:a}=(0,f.useBizProductContext)(),{storeDomain:i}=(0,v.useAiuiContext)(),[y,N]=(0,p.useState)({});return s.options.length?(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(r=>{const h=r.name.toLowerCase();return["color","colour","couleur"].some(t=>h.includes(t))?(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:"Select Color: "+o[r.name]}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4 ml-1",children:r.values.map(({label:t},m)=>{const b=`https://${i}/cdn/shop/files/${(0,x.handle)(t)}.png`;return(0,e.jsxs)("div",{className:"relative ipc-product-detail-options-value",children:[(0,e.jsx)("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{n(c=>({...c,[r.name]:t})),a?.({gift:void 0,bundle:void 0})},className:(0,l.cn)("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":o[r.name]===t}),children:!y[t]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(d.Picture,{className:"w-full",source:b,onError:({currentTarget:c})=>{c.onerror=null,N(w=>({...w,[t]:!0}))}})})}),(0,e.jsx)("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},t+m)})})]},r.id):(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:r.name}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t})=>(0,e.jsx)("button",{onClick:()=>{n(m=>({...m,[r.name]:t}))},className:(0,l.cn)("w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2",{"border-brand":o[r.name]===t}),children:t},t))})]},r.id)})}):null};var O=(0,g.withLayout)(z);
+"use strict";var l=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var P=(s,o)=>{for(var n in o)l(s,n,{get:o[n],enumerable:!0})},C=(s,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of _(o))!E.call(s,i)&&i!==n&&l(s,i,{get:()=>o[i],enumerable:!(a=k(o,i))||a.enumerable});return s};var L=s=>C(l({},"__esModule",{value:!0}),s);var B={};P(B,{default:()=>O});module.exports=L(B);var e=require("react/jsx-runtime"),d=require("../../../../../../components"),u=require("../../../../../../helpers/index.js"),p=require("react"),f=require("../../../../BizProductProvider.js"),v=require("../../../../../AiuiProvider/index.js"),g=require("../../../../utils/helper.js"),x=require("../../../../../../shared/Styles.js");const z=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:a}=(0,f.useBizProductContext)(),{storeDomain:i}=(0,v.useAiuiContext)(),[y,N]=(0,p.useState)({});return s.options.length?(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(r=>{const h=r.name.toLowerCase();return["color","colour","couleur"].some(t=>h.includes(t))?(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold leading-[1.2]",html:"Select Color: "+o[r.name]}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1",children:r.values.map(({label:t},m)=>{const b=`https://${i}/cdn/shop/files/${(0,g.handle)(t)}.png`;return(0,e.jsxs)("div",{className:"relative ipc-product-detail-options-value",children:[(0,e.jsx)("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{n(c=>({...c,[r.name]:t})),a?.({gift:void 0,bundle:void 0})},className:(0,u.cn)("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":o[r.name]===t}),children:!y[t]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(d.Picture,{className:"w-full",source:b,onError:({currentTarget:c})=>{c.onerror=null,N(w=>({...w,[t]:!0}))}})})}),(0,e.jsx)("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},t+m)})})]},r.id):(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:r.name}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t})=>(0,e.jsx)("button",{onClick:()=>{n(m=>({...m,[r.name]:t}))},className:(0,u.cn)("w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2",{"border-brand":o[r.name]===t}),children:t},t))})]},r.id)})}):null};var O=(0,x.withLayout)(z);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-4 ml-1\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"relative ipc-product-detail-options-value\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBc,IAAAI,EAAA,6BAvBdC,EAAsC,wCAEtCC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,OAAKN,EAAQ,QAAQ,UAEnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAM,iBAAmBR,EAAgBM,EAAO,IAAI,EAAG,KACnG,OAAC,OAAI,UAAU,oCACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,sBAAmB,UAAOM,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBT,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOlB,KAAQ,cAAWU,CAAc",
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold leading-[1.2]\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"relative ipc-product-detail-options-value\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBc,IAAAI,EAAA,6BAvBdC,EAAsC,wCAEtCC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,OAAKN,EAAQ,QAAQ,UAEnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,0BAA0B,KAAM,iBAAmBR,EAAgBM,EAAO,IAAI,EAAG,KACjH,OAAC,OAAI,UAAU,oDACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,sBAAmB,UAAOM,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBT,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOlB,KAAQ,cAAWU,CAAc",
   "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\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'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        let galleries = galleryMap[item?.galleries] || []\n        \n        if (item?.images && Array.isArray(item.images) && item.images.length > 0) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = item.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 768`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              \n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n          \n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n        \n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [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  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"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          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex]\n  )\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"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                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] 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 => handleGalleryTabClick(el, item, index)}\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\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        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.id}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`, \n                component_type: 'image', \n                component_name: props?.tabLabel || '', \n                position: jIndex + 1,\n                creative_id: '', \n                component_title: '', \n                component_description: '', \n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n          console.log('item', (item as any)?._responsiveSource)\n          \n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"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 border border-transparent cursor-pointer [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // 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 object-cover\">\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 withLayout(ProductGallery)\n"],
-  "mappings": "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",
-  "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "handleGalleryTabClick", "el", "scrollToEvent", "event", "container", "button", "scrollLeft", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView"]
+  "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  useImperativeHandle,\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'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (item?.images && Array.isArray(item.images) && item.images.length > 0) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = item.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 768`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [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  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"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          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex]\n  )\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"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                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] 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 => handleGalleryTabClick(el, item, index)}\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        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"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 border border-transparent cursor-pointer [&.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('line-clamp-2')}\n                style={{\n                  // animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // 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 object-cover\">\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 withLayout(ProductGallery)\n"],
+  "mappings": "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",
+  "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "handleGalleryTabClick", "el", "scrollToEvent", "event", "container", "button", "scrollLeft", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView"]
 }

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

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