@anker-in/headless-ui 1.0.26-alpha.1762418060877 → 1.0.26-alpha.1762424198196
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.
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/dialog.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/Specs/dropdown.js +1 -1
- package/dist/esm/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var w=(o,l)=>{for(var n in l)g(o,n,{get:l[n],enumerable:!0})},C=(o,l,n,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of N(l))!k.call(o,i)&&i!==n&&g(o,i,{get:()=>l[i],enumerable:!(r=y(l,i))||r.enumerable});return o};var T=o=>C(g({},"__esModule",{value:!0}),o);var I={};w(I,{default:()=>H});module.exports=T(I);var e=require("react/jsx-runtime"),a=require("../../../../../../components"),p=require("@radix-ui/react-tabs"),s=require("react"),h=require("../../../../../../helpers"),v=require("../../../../BizProductProvider.js");const D=()=>{const{product:o}=(0,v.useBizProductContext)(),[l,n]=(0,s.useState)(!1),r=(0,s.useMemo)(()=>o?.payload?.components?.find(t=>t.blockType==="ipc-graphicmore")?.productsTab||{},[o?.payload]),[i,u]=(0,s.useState)(r?.[0]),c=(0,s.useMemo)(()=>o?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[o?.payload]);return(0,e.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[c?.title&&(0,e.jsx)(a.Text,{size:3,className:"font-bold",html:c?.title}),(0,e.jsxs)(a.Dialog,{open:l,onOpenChange:n,children:[(0,e.jsx)(a.DialogTrigger,{asChild:!0,children:(0,e.jsx)(a.Button,{variant:"link",className:"font-bold !p-0 text-base",children:c?.view})}),(0,e.jsx)(E,{ksp:r,clickActiveKspItem:i})]})]}),(0,e.jsx)("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:r.map(t=>(0,e.jsx)("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:(0,e.jsx)(a.Text,{size:3,onClick:()=>{u(t),n(!0)},className:"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:t?.title},t?.title)}))})]})},E=({ksp:o,clickActiveKspItem:l})=>{const n=(0,s.useRef)([]),r=(0,s.useRef)(null),[i,u]=(0,s.useState)(null),c=(0,s.useCallback)(t=>{const f=o.findIndex(m=>m.title===t?.title),d=n.current[f];if(d&&r.current){const m=r.current,x=d,b=x.offsetLeft-m.offsetWidth/2+x.offsetWidth/2;m.scrollTo({left:b,behavior:"smooth"})}},[l,o]);return(0,s.useEffect)(()=>{l&&(u(l),setTimeout(()=>{c(i)},100))},[l,c]),(0,e.jsx)(a.DialogContent,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:(0,e.jsxs)(p.Root,{defaultValue:i?.title,className:"w-full overflow-hidden",children:[o.map(t=>(0,e.jsx)(p.Content,{value:t.title,children:(0,e.jsx)(a.Picture,{source:`${t?.mobileImg?.url}, ${t?.img?.url} 767`,className:"w-full h-[304px] desktop:h-[480px]",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),(0,e.jsx)("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:(0,e.jsxs)("div",{ref:r,className:"px-4 desktop:px-6 overflow-x-auto",children:[(0,e.jsx)("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)(p.List,{className:"flex p-1 w-max",children:o.map((t,f)=>(0,e.jsx)(p.Trigger,{ref:d=>{d&&(n.current[f]=d)},className:(0,h.cn)("lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]",t.title===i?.title&&"bg-white"),onClick:()=>{c(t),u(t)},value:t.title,children:(0,e.jsx)(a.Text,{html:t.title,className:"font-bold text-[14px] leading-tight"})},f))})}),(0,e.jsx)("div",{className:"mt-4",children:o.map(t=>(0,e.jsx)(p.Content,{value:t.title,className:"font-bold text-base desktop:text-[18px]",children:t.description}))})]})})]})})};var H=D;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n const { product } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const ksp = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.blockType === 'ipc-graphicmore')?.productsTab || {}\n }, [product?.payload])\n\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n const { product } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const ksp = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.blockType === 'ipc-graphicmore')?.productsTab || {}\n }, [product?.payload])\n\n const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n const ProductHighlightData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n }, [product?.payload])\n\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger asChild>\n <Button variant=\"link\" className=\"font-bold !p-0 text-base\">\n {ProductHighlightData?.view}\n </Button>\n </DialogTrigger>\n <ProductHighlightModal ksp={ksp} clickActiveKspItem={activeKspItem} />\n </Dialog>\n </div>\n <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n {ksp.map((item: any) => (\n <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]\">\n <Text\n size={3}\n key={item?.title}\n onClick={() => {\n setActiveKspItem(item)\n setOpen(true)\n }}\n className=\"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n html={item?.title}\n />\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n const autoScrollToActiveItem = useCallback((activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [clickActiveKspItem, ksp])\n\n useEffect(() => {\n if (!clickActiveKspItem) return\n setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [clickActiveKspItem, autoScrollToActiveItem])\n\n return (\n <DialogContent\n overlayClassName=\"z-[70]\"\n className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n >\n <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.mobileImg?.url}, ${item?.img?.url} 767`}\n className=\"w-full h-[304px] desktop:h-[480px]\"\n alt={item.img.alt}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"py-4 desktop:py-6 w-full overflow-visible\">\n <div ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n <div\n className=\"w-fit rounded-full bg-[#EAEAEC]\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <List className=\"flex p-1 w-max\">\n {ksp.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n }}\n key={index}\n value={item.title}\n >\n <Text html={item.title} className=\"font-bold text-[14px] leading-tight\" />\n </Trigger>\n ))}\n </List>\n </div>\n <div className=\"mt-4\">\n {ksp.map(item => (\n <Content value={item.title} className=\"font-bold text-base desktop:text-[18px]\">\n {item.description}\n </Content>\n ))}\n </div>\n </div>\n </div>\n </Root>\n </DialogContent>\n )\n}\n\nexport default ProductHighlight\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "ProductHighlight", "product", "open", "setOpen", "ksp", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.create;var m=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(o,a)=>{for(var i in a)m(o,i,{get:a[i],enumerable:!0})},g=(o,a,i,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of h(a))!w.call(o,l)&&l!==i&&m(o,l,{get:()=>a[l],enumerable:!(p=D(a,l))||p.enumerable});return o};var k=(o,a,i)=>(i=o!=null?E(G(o)):{},g(a||!o||!o.__esModule?m(i,"default",{value:o,enumerable:!0}):i,o)),P=o=>g(m({},"__esModule",{value:!0}),o);var L={};I(L,{default:()=>z});module.exports=P(L);var e=require("react/jsx-runtime"),n=require("react"),t=require("../../../../../../components"),b=require("../../../../BizProductProvider"),v=k(require("./Select")),N=require("../../../../../AiuiProvider/index.js"),C=require("../../../../utils"),y=require("./ShopifyColorOption");const T=()=>{const{locale:o="us"}=(0,N.useAiuiContext)(),{compareData:a,product:i}=(0,b.useBizProductContext)(),[p,l]=(0,n.useState)();(0,n.useEffect)(()=>{l(a?.availableCompareList[0]?.handle)},[a?.availableCompareList]);const x=[a?.currentProductCompareData?.product,a?.availableCompareList.find(r=>r.handle===p)?.product].filter(Boolean);return a?.specificationKeys?(0,e.jsxs)(t.Dialog,{children:[(0,e.jsx)(t.DialogTrigger,{children:(0,e.jsx)("button",{className:"text-base leading-[1.4] font-bold",children:"Compare"})}),(0,e.jsxs)(t.DialogContent,{overlayClassName:"z-[100]",className:"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0",children:[(0,e.jsx)(t.DialogHeader,{className:"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]",children:(0,e.jsx)(t.DialogTitle,{className:"text-sm text-[#6D6D6F]",children:"Compare"})}),(0,e.jsxs)(t.Grid,{className:"grid-cols-3 laptop:gap-8 laptop:py-8 py-6",children:[(0,e.jsx)(t.GridItem,{span:1}),x.map((r,d)=>(0,e.jsx)(t.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:r.images[0].url,alt:r.title,className:"h-[200px] w-[200px]",role:"presentation"})},d))]}),(0,e.jsxs)(t.Grid,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(t.Text,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:a.currentProductCompareData?.shortName||i.title})}),p&&(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(v.default,{value:p,onChange:r=>{l(r)},list:a.options})})]}),(0,e.jsxs)(t.Grid,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),x.map((r,d)=>{const c=r.variants[0],f=r.options?.find(s=>["color","colour","couleur"].find(u=>s.name.toLowerCase().includes(u)))?.values.map(s=>s.label);return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:(0,e.jsxs)("div",{className:"flex flex-col gap-[8px]",children:[c.price.amount<9999999&&(0,e.jsxs)("div",{className:"flex items-center gap-[8px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),(0,e.jsx)("div",{className:"flex items-center gap-[6px]",children:(0,e.jsx)("span",{className:"text-[16px] font-bold",children:(0,C.formatPrice)({locale:o,amount:c.price.amount,currencyCode:c.price.currencyCode})})})]}),f?.length&&(0,e.jsxs)("div",{className:"flex items-center gap-[8px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),(0,e.jsx)("div",{className:"flex items-center gap-[16px]",children:f.map(s=>(0,e.jsx)(y.ShopifyColorOption,{label:s,className:"h-[16px] w-[16px]"},s))})]})]})},d)})]}),(0,e.jsx)(t.Grid,{className:"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:a.specificationKeys?.map(r=>(0,e.jsxs)(t.GridItem,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r}),x.map((d,c)=>{let s=d.metafields?.global?.specifications?.find(u=>u?.key===r)?.value||"";switch(s.trim().toLowerCase()){case"true":s="\u2714\uFE0F";break;case"false":s="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:s})},c)})]},r))})]})]}):null};var z=T;
|
|
2
2
|
//# sourceMappingURL=CompareModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n const { locale = 'us' } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger>\n <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n </DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"max-h-[
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BArCRC,EAAoC,iBACpCC,EASO,wCACPC,EAAqC,0CAErCC,EAAmB,uBACnBC,EAA+B,gDAC/BC,EAA4B,6BAC5BC,EAAmC,gCAEnC,MAAMC,EAAe,IAAM,CACzB,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAAE,YAAAC,EAAa,QAAAC,CAAQ,KAAI,wBAAqB,EAChD,CAACC,EAAuBC,CAAwB,KAAI,YAAiB,KAE3E,aAAU,IAAM,CACdA,EAAyBH,GAAa,qBAAqB,CAAC,GAAG,MAAM,CACvE,EAAG,CAACA,GAAa,oBAAoB,CAAC,EAEtC,MAAMI,EAAW,CACfJ,GAAa,2BAA4B,QACzCA,GAAa,qBAAqB,KAAKC,GAAWA,EAAQ,SAAWC,CAAqB,GAAG,OAC/F,EAAE,OAAO,OAAO,EAEhB,OAAKF,GAAa,qBAGhB,QAAC,UACC,oBAAC,iBACC,mBAAC,UAAO,UAAU,oCAAoC,mBAAO,EAC/D,KACA,QAAC,iBACC,iBAAiB,UACjB,UAAU,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n const { locale = 'us' } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger>\n <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n </DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0\"\n >\n <DialogHeader className=\"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]\">\n <DialogTitle className=\"text-sm text-[#6D6D6F]\">Compare</DialogTitle>\n </DialogHeader>\n <Grid className=\"grid-cols-3 laptop:gap-8 laptop:py-8 py-6\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img\n src={product.images[0].url}\n alt={product.title}\n className=\"h-[200px] w-[200px]\"\n role=\"presentation\"\n />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[16px] font-bold\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n\n {/* {Number(coupon?.fixed_value) > 0 && (\n <span className='font-semibold text-[#999999] line-through'>\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )} */}\n </div>\n </div>\n )}\n {colors?.length && (\n <div className=\"flex items-center gap-[8px]\">\n <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n <div className=\"flex items-center gap-[16px]\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n ))}\n </div>\n </div>\n )}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "Select", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var n=(a,t)=>{for(var l in t)i(a,l,{get:t[l],enumerable:!0})},m=(a,t,l,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of c(t))!d.call(a,s)&&s!==l&&i(a,s,{get:()=>t[s],enumerable:!(p=g(t,s))||p.enumerable});return a};var x=a=>m(i({},"__esModule",{value:!0}),a);var D={};n(D,{SpecsModal:()=>b});module.exports=x(D);var e=require("react/jsx-runtime"),o=require("../../../../../../components"),r=require("../../../../BizProductProvider");const b=()=>{const{product:a}=(0,r.useBizProductContext)();return(0,e.jsxs)(o.Dialog,{children:[(0,e.jsx)(o.DialogTrigger,{children:(0,e.jsx)("button",{className:"text-base leading-[1.4] font-bold",children:"Specs"})}),(0,e.jsxs)(o.DialogContent,{overlayClassName:"z-[100]",className:"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0",children:[(0,e.jsx)(o.DialogHeader,{className:"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]",children:(0,e.jsx)(o.DialogTitle,{className:"text-sm text-[#6D6D6F]",children:"Specs"})}),(0,e.jsx)(o.Grid,{className:"laptop:gap-8 laptop:py-8 py-6",children:a.metafields?.global?.specifications?.map(({key:t,value:l})=>(0,e.jsxs)(o.GridItem,{span:6,className:"flex flex-col gap-1",children:[(0,e.jsx)(o.Text,{className:"text-[16px] font-bold",children:t}),(0,e.jsx)(o.Text,{className:"text-[16px] font-bold text-[#86868C]",html:l?.trim().toLowerCase()==="true"?"\u2714\uFE0F":l?.trim().toLowerCase()==="false"?"\u274C":l})]}))})]})]})};
|
|
2
2
|
//# sourceMappingURL=SpecsModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n const { product } = useBizProductContext()\n\n return (\n <Dialog>\n <DialogTrigger>\n <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n </DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"max-h-[80vh] z-[110] overflow-y-
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAkBQ,IAAAI,EAAA,6BAlBRC,EASO,wCACPC,EAAqC,0CAE9B,MAAMJ,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAK,CAAQ,KAAI,wBAAqB,EAEzC,SACE,QAAC,UACC,oBAAC,iBACC,mBAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,KACA,QAAC,iBACC,iBAAiB,UACjB,UAAU,
|
|
4
|
+
"sourcesContent": ["import {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n const { product } = useBizProductContext()\n\n return (\n <Dialog>\n <DialogTrigger>\n <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n </DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"max-h-[80vh] rounded-box z-[110] px-4 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 [&_.dialog-close-icon]:text-[#6D6D6F] gap-0 overflow-hidden overflow-y-auto laptop:w-[896px] max-w-[90vw] laptop:px-8 !py-0 [&_.dialog-close-button]:focus:!ring-0\"\n >\n <DialogHeader className=\"border-b laptop:pt-4 pt-4 pb-2 laptop:pb-3 border-[#E8E8E8]\">\n <DialogTitle className=\"text-sm text-[#6D6D6F]\">Specs</DialogTitle>\n </DialogHeader>\n <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n <GridItem span={6} className=\"flex flex-col gap-1\">\n <Text className=\"text-[16px] font-bold\">{key}</Text>\n <Text\n className=\"text-[16px] font-bold text-[#86868C]\"\n html={\n value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n }\n />\n </GridItem>\n ))}\n </Grid>\n </DialogContent>\n </Dialog>\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAkBQ,IAAAI,EAAA,6BAlBRC,EASO,wCACPC,EAAqC,0CAE9B,MAAMJ,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAK,CAAQ,KAAI,wBAAqB,EAEzC,SACE,QAAC,UACC,oBAAC,iBACC,mBAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,KACA,QAAC,iBACC,iBAAiB,UACjB,UAAU,8QAEV,oBAAC,gBAAa,UAAU,8DACtB,mBAAC,eAAY,UAAU,yBAAyB,iBAAK,EACvD,KACA,OAAC,QAAK,UAAU,gCACb,SAAAA,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,OAC7D,QAAC,YAAS,KAAM,EAAG,UAAU,sBAC3B,oBAAC,QAAK,UAAU,wBAAyB,SAAAD,EAAI,KAC7C,OAAC,QACC,UAAU,uCACV,KACEC,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,GACF,CACD,EACH,GACF,GACF,CAEJ",
|
|
6
6
|
"names": ["SpecsModal_exports", "__export", "SpecsModal", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "product", "key", "value"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var W=Object.create;var M=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(t,a)=>{for(var o in a)M(t,o,{get:a[o],enumerable:!0})},D=(t,a,o,g)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of U(a))!q.call(t,r)&&r!==o&&M(t,r,{get:()=>a[r],enumerable:!(g=O(a,r))||g.enumerable});return t};var J=(t,a,o)=>(o=t!=null?W(Z(t)):{},D(a||!t||!t.__esModule?M(o,"default",{value:t,enumerable:!0}):o,t)),Q=t=>D(M({},"__esModule",{value:!0}),t);var ae={};K(ae,{default:()=>le});module.exports=Q(ae);var e=require("react/jsx-runtime"),_=require("../../../../AiuiProvider/index.js"),k=require("../../../../../components"),l=require("react"),N=require("swiper/react"),u=require("swiper/modules"),b=require("../../../../../helpers/index.js"),T=require("./types.js"),I=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),j=require("../../../hooks/use-variant-media.js"),H=require("./components/SpecsModal.js"),Y=J(require("./components/CompareModal.js")),$=require("../../../utils/index.js");const B=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"})]}),F=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"})]}),X=()=>{const{copyWriting:t}=(0,_.useAiuiContext)(),{product:a,variant:o,selectedOptions:g}=(0,z.useBizProductContext)(),r=(0,j.useVariantMedia)({product:a,variant:o}),[f,v]=(0,l.useState)(null),n=o?.metafields?.component?.custom_media_list;let h,w,S,y;n&&n?.available?(h=n?.product||[],w=n?.scenarios||[],S=n?.keyFeatures||[],y=n?.video||[]):(h=r?.productList,w=r?.sceneList,S=r?.keyFeaturesList,y=r?.videoList);const A=(0,l.useMemo)(()=>[...h,...w,...y],[h,w,y]),p={productList:h,sceneList:w,keyFeaturesList:S,videoList:y},d=(0,l.useMemo)(()=>(a?.payload?.components?.find(c=>c.componentKey==="ProductGallery")?.data||[])?.map(c=>({...c,galleries:p[c?.galleries]||[]})).filter(c=>c.galleries.length>0),[a?.payload,p]),[L,C]=(0,l.useState)(d?.[0]),[G,P]=(0,l.useState)(0),[E,x]=(0,l.useState)(null),s=(0,l.useCallback)(()=>{const i=(G+1)%d.length;P(i),C(d[i]),x(0)},[G,d]),m=(0,l.useCallback)(()=>{const i=G===0?d.length-1:G-1;P(i),C(d[i]);const c=d[i]?.galleries||[];x(c.length-1)},[G,d]);(0,l.useEffect)(()=>{C(d[0])},[o?.id]);const V=(i,c)=>{switch(i?.galleryTabType){case T.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(te,{...i,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(I.Root,{className:"relative",value:L?.tabValue,defaultValue:d?.[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:d.map((i,c)=>(0,e.jsx)(I.Content,{className:"h-full",value:i.tabValue,children:V(i,c)},i.tabValue))}),(0,e.jsx)(ee,{galleryTabs:d,activeGalleryTab:L,setActiveGalleryTab:C,setActiveTabIndex:P,setTargetSlideIndex:x})]})})},ee=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:o,setActiveTabIndex:g,setTargetSlideIndex:r})=>{const{product:f}=(0,z.useBizProductContext)(),v=(0,l.useRef)(null);return(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(I.List,{ref:v,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map((n,h)=>(0,e.jsx)(I.Trigger,{className:(0,b.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",n.tabValue===a?.tabValue&&"bg-white"),onClick:w=>{if(o(n),g(h),r(0),v.current){const S=v.current,y=w.currentTarget,A=y.offsetLeft-S.offsetWidth/2+y.offsetWidth/2;S.scrollTo({left:A,behavior:"smooth"})}},value:n.tabValue,children:n.tabLabel},n.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:f.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(H.SpecsModal,{})," | ",(0,e.jsx)(Y.default,{})]})})]})},R=(0,l.forwardRef)((t,a)=>{const{locale:o="us",copyWriting:g}=(0,_.useAiuiContext)(),{variant:r,totalSavings:f}=(0,z.useBizProductContext)(),v=(0,l.useRef)(null),[n,h]=(0,l.useState)(null),[w,S]=(0,l.useState)(!0),[y,A]=(0,l.useState)(!1),[p,d]=(0,l.useState)(null),L=(0,l.useRef)(null),[C,G]=(0,l.useState)(!1),P=(0,l.useMemo)(()=>{if(t?.galleryTabType===T.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===T.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,T.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),E=(0,l.useCallback)(()=>{p?.isBeginning?t.onPrevTab?.():p?.slidePrev()},[p,t]),x=(0,l.useCallback)(()=>{p?.isEnd?t.onNextTab?.():p?.slideNext()},[p,t]);return(0,l.useEffect)(()=>{p&&t.targetSlideIndex&&(p.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[p,t.targetSlideIndex,t]),(0,l.useEffect)(()=>{if(L.current){const s=L.current,m=s.scrollHeight,V=s.clientHeight,i=m>V;G(i)}},[]),console.log("shouldScroll",C),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(N.Swiper,{ref:a,className:"h-full",onSwiper:d,onProgress:s=>{S(s.isBeginning),A(s.isEnd)},pagination:{clickable:!0,el:v.current},thumbs:{swiper:n},modules:[u.Mousewheel,u.Thumbs,u.Navigation,u.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((s,m)=>(0,e.jsx)(N.SwiperSlide,{className:"h-full",children:(0,e.jsx)(k.Picture,{source:s?.image?.url,alt:s?.image?.altText,className:(0,b.cn)("h-full",P),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+m))}),r.availableForSale&&!!f&&!t.index&&(0,e.jsx)(k.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,$.formatPrice)({amount:f,currencyCode:r?.price?.currencyCode,locale:o})} ${g?.off}`}),(0,e.jsx)("div",{className:(0,b.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:E,children:(0,e.jsx)(B,{className:(0,b.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,b.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:x,children:(0,e.jsx)(F,{className:(0,b.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)(N.Swiper,{className:"flex items-center justify-between",onSwiper:h,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[u.Navigation,u.Thumbs],children:t?.galleries?.map((s,m)=>(0,e.jsx)(N.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(k.Picture,{source:s.image?.url,alt:s.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+m))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(k.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:L,className:(0,b.cn)("h-10 lg-desktop:h-12",C?"animate-marquee-scroll":""),style:{animationDuration:"3s"},children:(0,e.jsx)(k.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:v,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),te=t=>{const[a,o]=(0,l.useState)(null),g=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),r=(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)(N.Swiper,{className:"h-full",onSwiper:o,modules:[u.Mousewheel,u.Thumbs,u.Navigation,u.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((f,v)=>(0,e.jsx)(N.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+v))}),(0,e.jsx)("div",{className:(0,b.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:g,children:(0,e.jsx)(B,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,b.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:r,children:(0,e.jsx)(F,{className:"tablet:size-10 lg-desktop:size-12"})})]})},re=t=>(0,e.jsx)("div",{children:"3D View"});var le=X;
|
|
1
|
+
"use strict";var W=Object.create;var M=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(t,a)=>{for(var o in a)M(t,o,{get:a[o],enumerable:!0})},D=(t,a,o,g)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of U(a))!q.call(t,r)&&r!==o&&M(t,r,{get:()=>a[r],enumerable:!(g=O(a,r))||g.enumerable});return t};var J=(t,a,o)=>(o=t!=null?W(Z(t)):{},D(a||!t||!t.__esModule?M(o,"default",{value:t,enumerable:!0}):o,t)),Q=t=>D(M({},"__esModule",{value:!0}),t);var ae={};K(ae,{default:()=>le});module.exports=Q(ae);var e=require("react/jsx-runtime"),_=require("../../../../AiuiProvider/index.js"),k=require("../../../../../components"),l=require("react"),N=require("swiper/react"),u=require("swiper/modules"),b=require("../../../../../helpers/index.js"),T=require("./types.js"),I=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),j=require("../../../hooks/use-variant-media.js"),H=require("./components/SpecsModal.js"),Y=J(require("./components/CompareModal.js")),$=require("../../../utils/index.js");const B=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"})]}),F=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"})]}),X=()=>{const{copyWriting:t}=(0,_.useAiuiContext)(),{product:a,variant:o,selectedOptions:g}=(0,z.useBizProductContext)(),r=(0,j.useVariantMedia)({product:a,variant:o}),[f,v]=(0,l.useState)(null),n=o?.metafields?.component?.custom_media_list;let h,w,S,y;n&&n?.available?(h=n?.product||[],w=n?.scenarios||[],S=n?.keyFeatures||[],y=n?.video||[]):(h=r?.productList,w=r?.sceneList,S=r?.keyFeaturesList,y=r?.videoList);const A=(0,l.useMemo)(()=>[...h,...w,...y],[h,w,y]),p={productList:h,sceneList:w,keyFeaturesList:S,videoList:y},d=(0,l.useMemo)(()=>(a?.payload?.components?.find(c=>c.componentKey==="ProductGallery")?.data||[])?.map(c=>({...c,galleries:p[c?.galleries]||[]})).filter(c=>c.galleries.length>0),[a?.payload,p]),[G,L]=(0,l.useState)(d?.[0]),[C,P]=(0,l.useState)(0),[E,x]=(0,l.useState)(null),s=(0,l.useCallback)(()=>{const i=(C+1)%d.length;P(i),L(d[i]),x(0)},[C,d]),m=(0,l.useCallback)(()=>{const i=C===0?d.length-1:C-1;P(i),L(d[i]);const c=d[i]?.galleries||[];x(c.length-1)},[C,d]);(0,l.useEffect)(()=>{L(d[0])},[o?.id]);const V=(i,c)=>{switch(i?.galleryTabType){case T.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(R,{...i,index:c,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});case T.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(te,{...i,onNextTab:s,onPrevTab:m,targetSlideIndex:E,onSlideChange:()=>x(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(I.Root,{className:"relative",value:G?.tabValue,defaultValue:d?.[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:d.map((i,c)=>(0,e.jsx)(I.Content,{className:"h-full",value:i.tabValue,children:V(i,c)},i.tabValue))}),(0,e.jsx)(ee,{galleryTabs:d,activeGalleryTab:G,setActiveGalleryTab:L,setActiveTabIndex:P,setTargetSlideIndex:x})]})})},ee=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:o,setActiveTabIndex:g,setTargetSlideIndex:r})=>{const{product:f}=(0,z.useBizProductContext)(),v=(0,l.useRef)(null);return(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(I.List,{ref:v,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map((n,h)=>(0,e.jsx)(I.Trigger,{className:(0,b.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",n.tabValue===a?.tabValue&&"bg-white"),onClick:w=>{if(o(n),g(h),r(0),v.current){const S=v.current,y=w.currentTarget,A=y.offsetLeft-S.offsetWidth/2+y.offsetWidth/2;S.scrollTo({left:A,behavior:"smooth"})}},value:n.tabValue,children:n.tabLabel},n.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:f.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(H.SpecsModal,{})," | ",(0,e.jsx)(Y.default,{})]})})]})},R=(0,l.forwardRef)((t,a)=>{const{locale:o="us",copyWriting:g}=(0,_.useAiuiContext)(),{variant:r,totalSavings:f}=(0,z.useBizProductContext)(),v=(0,l.useRef)(null),[n,h]=(0,l.useState)(null),[w,S]=(0,l.useState)(!0),[y,A]=(0,l.useState)(!1),[p,d]=(0,l.useState)(null),G=(0,l.useRef)(null),[L,C]=(0,l.useState)(!1),P=(0,l.useMemo)(()=>{if(t?.galleryTabType===T.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===T.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,T.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),E=(0,l.useCallback)(()=>{p?.isBeginning?t.onPrevTab?.():p?.slidePrev()},[p,t]),x=(0,l.useCallback)(()=>{p?.isEnd?t.onNextTab?.():p?.slideNext()},[p,t]);return(0,l.useEffect)(()=>{p&&t.targetSlideIndex&&(p.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[p,t.targetSlideIndex,t]),(0,l.useEffect)(()=>{if(G.current){const s=G.current,m=s.scrollHeight,V=s.clientHeight,i=m>V;C(i)}},[]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(N.Swiper,{ref:a,className:"h-full",onSwiper:d,onProgress:s=>{S(s.isBeginning),A(s.isEnd)},pagination:{clickable:!0,el:v.current},thumbs:{swiper:n},modules:[u.Mousewheel,u.Thumbs,u.Navigation,u.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((s,m)=>(0,e.jsx)(N.SwiperSlide,{className:"h-full",children:(0,e.jsx)(k.Picture,{source:s?.image?.url,alt:s?.image?.altText,className:(0,b.cn)("h-full",P),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+m))}),r.availableForSale&&!!f&&!t.index&&(0,e.jsx)(k.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,$.formatPrice)({amount:f,currencyCode:r?.price?.currencyCode,locale:o})} ${g?.off}`}),(0,e.jsx)("div",{className:(0,b.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:E,children:(0,e.jsx)(B,{className:(0,b.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,b.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:x,children:(0,e.jsx)(F,{className:(0,b.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)(N.Swiper,{className:"flex items-center justify-between",onSwiper:h,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[u.Navigation,u.Thumbs],children:t?.galleries?.map((s,m)=>(0,e.jsx)(N.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(k.Picture,{source:s.image?.url,alt:s.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+m))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(k.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:G,className:(0,b.cn)("h-10 lg-desktop:h-12",L?"animate-marquee-scroll":""),style:{animationDuration:"3s"},children:(0,e.jsx)(k.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:v,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),te=t=>{const[a,o]=(0,l.useState)(null),g=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),r=(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)(N.Swiper,{className:"h-full",onSwiper:o,modules:[u.Mousewheel,u.Thumbs,u.Navigation,u.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((f,v)=>(0,e.jsx)(N.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:f?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+v))}),(0,e.jsx)("div",{className:(0,b.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:g,children:(0,e.jsx)(B,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,b.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:r,children:(0,e.jsx)(F,{className:"tablet:size-10 lg-desktop:size-12"})})]})},re=t=>(0,e.jsx)("div",{children:"3D View"});var le=X;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => ({\n ...item,\n galleries: galleryMap[item?.galleries] || [],\n }))\n .filter((item: any) => item.galleries.length > 0)\n }, [product?.payload, galleryMap])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nconst ProductGalleryTab = ({\n galleryTabs,\n activeGalleryTab,\n setActiveGalleryTab,\n setActiveTabIndex,\n setTargetSlideIndex,\n}: {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n}) => {\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n return (\n <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n <List\n ref={scrollContainerRef}\n className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }}\n key={item.tabValue}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 hidden laptop:flex\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const commentRef = useRef<HTMLDivElement>(null)\n const [shouldScroll, setShouldScroll] = useState(false)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n useEffect(() => {\n if (commentRef.current) {\n const container = commentRef.current\n const contentHeight = container.scrollHeight\n const containerHeight = container.clientHeight\n const needsScroll = contentHeight > containerHeight\n setShouldScroll(needsScroll)\n }\n }, [])\n\n console.log('shouldScroll', shouldScroll)\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <Picture\n source={item?.image?.url}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n <div className=\"hidden tablet:block\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n imgClassName=\"object-contain h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n imgClassName=\"object-cover \"\n />\n <div className=\"overflow-hidden max-w-[528px] relative\">\n <div\n ref={commentRef}\n className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n style={{\n animationDuration: `3s`,\n }}\n >\n <Text\n html={props?.comment?.content}\n className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n />\n </div>\n </div>\n </div>\n )}\n </div>\n <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => ({\n ...item,\n galleries: galleryMap[item?.galleries] || [],\n }))\n .filter((item: any) => item.galleries.length > 0)\n }, [product?.payload, galleryMap])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nconst ProductGalleryTab = ({\n galleryTabs,\n activeGalleryTab,\n setActiveGalleryTab,\n setActiveTabIndex,\n setTargetSlideIndex,\n}: {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n}) => {\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n return (\n <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n <List\n ref={scrollContainerRef}\n className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }}\n key={item.tabValue}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 hidden laptop:flex\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const commentRef = useRef<HTMLDivElement>(null)\n const [shouldScroll, setShouldScroll] = useState(false)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n useEffect(() => {\n if (commentRef.current) {\n const container = commentRef.current\n const contentHeight = container.scrollHeight\n const containerHeight = container.clientHeight\n const needsScroll = contentHeight > containerHeight\n setShouldScroll(needsScroll)\n }\n }, [])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <Picture\n source={item?.image?.url}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n <div className=\"hidden tablet:block\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n imgClassName=\"object-contain h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n imgClassName=\"object-cover \"\n />\n <div className=\"overflow-hidden max-w-[528px] relative\">\n <div\n ref={commentRef}\n className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n style={{\n animationDuration: `3s`,\n }}\n >\n <Text\n html={props?.comment?.content}\n className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n />\n </div>\n </div>\n </div>\n )}\n </div>\n <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "jIndex", "ProductGalleryTab3DView"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var J=Object.create;var w=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},V=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of M(t))!q.call(n,s)&&s!==o&&w(n,s,{get:()=>t[s],enumerable:!(i=H(t,s))||i.enumerable});return n};var Q=(n,t,o)=>(o=n!=null?J(W(n)):{},V(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),U=n=>V(w({},"__esModule",{value:!0}),n);var _={};K(_,{default:()=>Z});module.exports=U(_);var e=require("react/jsx-runtime"),a=require("../../../../../components"),k=require("../../../BizProductProvider"),g=require("react"),x=require("../../../utils"),P=require("../../../../AiuiProvider"),ne=require("../../../../../helpers"),B=Q(require("decimal.js"));const X=({})=>{const{locale:n="us",copyWriting:t}=(0,P.useAiuiContext)(),{product:o,variant:i,finalPrice:s,comparePrice:p,coupon:b,selectedOptions:r,selectedVariants:u,totalSavings:h,onAddToCart:z,onBuyNow:D,savingDetail:N,checkedBundle:C,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:O,setCheckedExchangePurchase:m,setCheckedBundle:y,setSavingDetail:R}=(0,k.useBizProductContext)(),[E]=u,I=(0,g.useMemo)(()=>{const[d]=C?.variants||[],T=new B.default(E?.price?.amount||0).minus(d?.price||E?.price?.amount).toNumber();return new B.default(E?.price?.amount||0).minus(N?.coupon).minus(T).toNumber()},[E,h,C]);if(!i.availableForSale)return null;const{bundleVariant:A,giftVariant:F,exchangeVariant:j}=Y()||{},[c,v]=(0,g.useState)();(0,g.useEffect)(()=>{v({bundle:l.bundle?.value?void 0:A,gift:l.gift?.value?void 0:F,exchange:l.exchange?.value?void 0:j})},[A,F,j,l]);const $=(0,g.useMemo)(()=>new B.default(p).minus(N.freeGift).toNumber(),[p,N]);return(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 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:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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"})})]}),(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.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"size-10 laptop:size-12 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:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r.color||r.colour||r.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:I,currencyCode:i.price.currencyCode,locale:n})}),h>0&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(S,{giftOperation:d=>{O?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),v?.({...c,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(G,{bundleOperation:d=>{y?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),v?.({...c,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(L,{exchangeOperation:d=>{m?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),v?.({...c,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(c?.bundle||c?.gift||c?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[c?.exchange&&(0,e.jsx)(L,{exchangeOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),v?.({...c,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&(0,e.jsx)(G,{bundleOperation:d=>{O?.(void 0),m?.(void 0),R?.({...N,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),v?.({...c,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&(0,e.jsx)(S,{giftOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),v?.({...c,gift:void 0})},canOperate:l?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${t?.totalPrice} ${(0,x.formatPrice)({amount:s,currencyCode:i.price.currencyCode,locale:n})}`}),h>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:$,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},Y=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:s,exchangePurchase:p,checkedExchangePurchase:b}=(0,k.useBizProductContext)();let r,u,h;const{bundleList:z}=n||{},{giftList:D=[]}=i||{},{giftList:N=[]}=p||{},C=z?.filter(m=>m.variants.slice(1,m.variants.length).every(y=>y.variant.availableForSale))||[],[l]=C;r=o||l;const[f]=D?.filter(m=>m.availableForSale);u=s||f;const[O]=N?.filter(m=>m.availableForSale);return h=b||O,{bundleVariant:r,giftVariant:u,exchangeVariant:h}},G=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{variant:p,setCheckedBundle:b}=(0,k.useBizProductContext)(),r=t?.variants.filter(u=>u.variant.sku!==p.sku);return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[r?.map(u=>(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:u?.variant?.image?.url,className:"size-10 laptop:size-12 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:u.variant.product.title})})]},u.variant.id)),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:r?.[0]?.price||0,locale:s,currencyCode:r?.[0]?.variant?.price?.currencyCode||""})}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})},S=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{freeGift:p,setCheckedGift:b}=(0,k.useBizProductContext)(),{freeLabel:r,count:u}=p||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 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${u} | ${r}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:r}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price.amount,locale:s,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},L=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{setCheckedExchangePurchase:p}=(0,k.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 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:s,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price?.amount||0,locale:s,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var Z=X;
|
|
1
|
+
"use strict";var H=Object.create;var w=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},V=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of W(t))!K.call(n,s)&&s!==o&&w(n,s,{get:()=>t[s],enumerable:!(i=M(t,s))||i.enumerable});return n};var U=(n,t,o)=>(o=n!=null?H(q(n)):{},V(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),X=n=>V(w({},"__esModule",{value:!0}),n);var ee={};Q(ee,{default:()=>_});module.exports=X(ee);var e=require("react/jsx-runtime"),a=require("../../../../../components"),k=require("../../../BizProductProvider"),g=require("react"),x=require("../../../utils"),P=require("../../../../AiuiProvider"),le=require("../../../../../helpers"),B=U(require("decimal.js")),R=require("../../../utils/textFormat");const Y=({})=>{const{locale:n="us",copyWriting:t}=(0,P.useAiuiContext)(),{product:o,variant:i,finalPrice:s,comparePrice:p,coupon:b,selectedOptions:r,selectedVariants:u,totalSavings:h,onAddToCart:z,onBuyNow:D,savingDetail:N,checkedBundle:C,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:O,setCheckedExchangePurchase:m,setCheckedBundle:y,setSavingDetail:I}=(0,k.useBizProductContext)(),[E]=u,$=(0,g.useMemo)(()=>{const[d]=C?.variants||[],J=new B.default(E?.price?.amount||0).minus(d?.price||E?.price?.amount).toNumber();return new B.default(E?.price?.amount||0).minus(N?.coupon).minus(J).toNumber()},[E,h,C]);if(!i.availableForSale)return null;const{bundleVariant:A,giftVariant:F,exchangeVariant:j}=Z()||{},[c,v]=(0,g.useState)();(0,g.useEffect)(()=>{v({bundle:l.bundle?.value?void 0:A,gift:l.gift?.value?void 0:F,exchange:l.exchange?.value?void 0:j})},[A,F,j,l]);const T=(0,g.useMemo)(()=>new B.default(p).minus(N.freeGift).toNumber(),[p,N]);return(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 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:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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"})})]}),(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.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"size-10 laptop:size-12 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:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r.color||r.colour||r.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:$,currencyCode:i.price.currencyCode,locale:n})}),h>0&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(S,{giftOperation:d=>{O?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),v?.({...c,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(G,{bundleOperation:d=>{y?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),v?.({...c,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(L,{exchangeOperation:d=>{m?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),v?.({...c,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(c?.bundle||c?.gift||c?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[c?.exchange&&(0,e.jsx)(L,{exchangeOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),v?.({...c,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&(0,e.jsx)(G,{bundleOperation:d=>{O?.(void 0),m?.(void 0),I?.({...N,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),v?.({...c,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&(0,e.jsx)(S,{giftOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),v?.({...c,gift:void 0})},canOperate:l?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${(0,R.replaceTemplate)(t?.totalPrice||"",{amount:(0,x.formatPrice)({amount:s,currencyCode:i.price.currencyCode,locale:n})})}`}),h>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:T,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},Z=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:s,exchangePurchase:p,checkedExchangePurchase:b}=(0,k.useBizProductContext)();let r,u,h;const{bundleList:z}=n||{},{giftList:D=[]}=i||{},{giftList:N=[]}=p||{},C=z?.filter(m=>m.variants.slice(1,m.variants.length).every(y=>y.variant.availableForSale))||[],[l]=C;r=o||l;const[f]=D?.filter(m=>m.availableForSale);u=s||f;const[O]=N?.filter(m=>m.availableForSale);return h=b||O,{bundleVariant:r,giftVariant:u,exchangeVariant:h}},G=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{variant:p,setCheckedBundle:b}=(0,k.useBizProductContext)(),r=t?.variants.filter(u=>u.variant.sku!==p.sku);return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[r?.map(u=>(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:u?.variant?.image?.url,className:"size-10 laptop:size-12 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:u.variant.product.title})})]},u.variant.id)),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:r?.[0]?.price||0,locale:s,currencyCode:r?.[0]?.variant?.price?.currencyCode||""})}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})},S=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{freeGift:p,setCheckedGift:b}=(0,k.useBizProductContext)(),{freeLabel:r,count:u}=p||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 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${u} | ${r}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:r}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price.amount,locale:s,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},L=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{setCheckedExchangePurchase:p}=(0,k.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 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:s,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price?.amount||0,locale:s,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var _=Y;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|