@anker-in/headless-ui 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764130591163
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/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/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 +1 -1
- 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/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- 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 +1 -1
- 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 +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var c=(e,l)=>{for(var s in l)n(e,s,{get:l[s],enumerable:!0})},f=(e,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of g(l))!x.call(e,i)&&i!==s&&n(e,i,{get:()=>l[i],enumerable:!(o=d(l,i))||o.enumerable});return e};var v=e=>f(n({},"__esModule",{value:!0}),e);var N={};c(N,{ShippingPolicyModal:()=>h});module.exports=v(N);var t=require("react/jsx-runtime"),p=require("../../../../components/index.js"),a=require("../../../../components/index.js");const h=({data:e,onClose:l,open:s})=>(0,t.jsx)(a.Dialog,{open:s,onOpenChange:l,children:(0,t.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,t.jsx)(a.DialogHeader,{className:"laptop:pt-4 pb-2 pt-4",children:(0,t.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),(0,t.jsxs)("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[(0,t.jsx)(p.Text,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),(0,t.jsx)("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((o,i)=>(0,t.jsxs)("li",{className:"flex text-[18px]",children:[(0,t.jsxs)("span",{className:"text-[#86868C]",children:[i+1,"."]}),(0,t.jsx)("span",{className:"ml-[4px] font-bold text-[#86868C]",children:o})]},i))}),(0,t.jsxs)("div",{className:"mt-[24px] md:mt-[16px]",children:[(0,t.jsx)(p.Text,{className:"text-[18px] font-bold leading-[1.2] text-[#1d1d1f]",html:e?.shippingService?.title}),(0,t.jsx)("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((o,i)=>(0,t.jsxs)("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[(0,t.jsx)(p.Text,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:o.title}),(0,t.jsx)("div",{className:"mt-3 grid grid-flow-row",children:o.list.map((r,m)=>(0,t.jsx)(p.Text,{as:"p",className:"text-base font-bold text-[#86868C]",children:r},m))})]},i))})]}),(0,t.jsx)(p.Link,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});
|
|
2
2
|
//# sourceMappingURL=ShippingPolicyModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAA2B,2CAC3BA,EAAiE,2CA8B1D,MAAMH,EAAsB,CAAC,CAAE,KAAAI,EAAM,QAAAC,EAAS,KAAAC,CAAK,OAEtD,OAAC,UAAO,KAAMA,EAAM,aAAcD,EAChC,oBAAC,iBACC,iBAAiB,UACjB,UAAU,oWAEV,oBAAC,gBAAa,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n </DialogHeader>\n <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n <Text\n className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n html={data?.shippingCoupon?.title}\n />\n <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n {data?.shippingCoupon?.list.map((item, index) => (\n <li className=\"flex text-[18px]\" key={index}>\n <span className=\"text-[#86868C]\">{index + 1}.</span>\n <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n </li>\n ))}\n </ul>\n <div className=\"mt-[24px] md:mt-[16px]\">\n <Text className=\"text-[18px] font-bold leading-[1.2] text-[#1d1d1f]\" html={data?.shippingService?.title} />\n <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n {data?.shippingService?.list.map((item, index) => (\n <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n <div className=\"mt-3 grid grid-flow-row\">\n {item.list.map((subItem, subIndex) => (\n <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n {subItem}\n </Text>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n <Link\n className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n href={`${data?.terms?.url}`}\n >\n {data?.terms?.text}\n </Link>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAA2B,2CAC3BA,EAAiE,2CA8B1D,MAAMH,EAAsB,CAAC,CAAE,KAAAI,EAAM,QAAAC,EAAS,KAAAC,CAAK,OAEtD,OAAC,UAAO,KAAMA,EAAM,aAAcD,EAChC,oBAAC,iBACC,iBAAiB,UACjB,UAAU,oWAEV,oBAAC,gBAAa,UAAU,wBACtB,mBAAC,eAAY,UAAU,qDAAsD,SAAAD,GAAM,MAAM,EAC3F,KACA,QAAC,OAAI,UAAU,gCACb,oBAAC,QACC,UAAU,oEACV,KAAMA,GAAM,gBAAgB,MAC9B,KACA,OAAC,MAAG,UAAU,4DACX,SAAAA,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,OACrC,QAAC,MAAG,UAAU,mBACZ,qBAAC,QAAK,UAAU,iBAAkB,UAAAA,EAAQ,EAAE,KAAC,KAC7C,OAAC,QAAK,UAAU,oCAAqC,SAAAD,EAAK,IAFtBC,CAGtC,CACD,EACH,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,QAAK,UAAU,sDAAsD,KAAMJ,GAAM,iBAAiB,MAAO,KAC1G,OAAC,OAAI,UAAU,yDACZ,SAAAA,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,OACtC,QAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMD,EAAK,MAAO,KAC7F,OAAC,OAAI,UAAU,0BACZ,SAAAA,EAAK,KAAK,IAAI,CAACE,EAASC,OACvB,OAAC,QAAK,GAAG,IAAI,UAAU,qCACpB,SAAAD,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,KAEA,OAAC,QACC,UAAU,0EACV,KAAM,GAAGJ,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
|
|
6
6
|
"names": ["ShippingPolicyModal_exports", "__export", "ShippingPolicyModal", "__toCommonJS", "import_jsx_runtime", "import_components", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var l in r)c(o,l,{get:r[l],enumerable:!0})},L=(o,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of B(r))!D.call(o,d)&&d!==l&&c(o,d,{get:()=>r[d],enumerable:!(a=z(r,d))||a.enumerable});return o};var O=o=>L(c({},"__esModule",{value:!0}),o);var S={};F(S,{default:()=>R});module.exports=O(S);var t=require("react/jsx-runtime"),i=require("../../../../../../components/index.js"),n=require("../../../../../../helpers/index.js"),h=require("react"),g=require("../../../../BizProductProvider.js"),k=require("../../../../utils/index.js"),v=require("../../../../../AiuiProvider/index.js"),C=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:o="us"}=(0,v.useAiuiContext)(),{freeGift:r,checkedGift:l,setCheckedGift:a,setCheckedBundle:d,setSavingDetail:N,savingDetail:y,setJoinedRecommendBuyProducts:m,joinedRecommendBuyProducts:p,setAddOrder:f}=(0,g.useBizProductContext)(),{title:P,giftList:u=[],freeLabel:E}=r||{},x=(0,h.useMemo)(()=>u?.filter(e=>e.availableForSale),[u]),G=e=>{l?.id===e.id?(a?.(void 0),N?.({...y,freeGift:0}),m?.({...p,gift:{value:void 0,canOperate:!0}}),f?.(s=>s.filter(b=>b!=="gift"))):(a?.(e),m?.({...p,gift:{value:e,canOperate:!1}}),f?.(s=>[...s.filter(w=>w!=="gift"),"gift"]))};return x?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(i.Text,{size:3,className:"font-bold leading-[1.2]",html:P}),(0,t.jsx)("div",{className:"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:x.map(e=>(0,t.jsxs)("div",{className:(0,n.cn)("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(i.Checkbox,{onCheckedChange:()=>G(e),size:"lg",className:(0,n.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(i.Picture,{source:e.image?.url,className:"size-12 shrink-0"}),(0,t.jsx)(i.Text,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:E}),(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,k.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=(0,C.withLayout)(A);
|
|
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/ProductFreeGift/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n freeGift,\n checkedGift,\n setCheckedGift,\n setCheckedBundle,\n setSavingDetail,\n savingDetail,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n } else {\n setCheckedGift?.(value)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'gift')\n return [...filtered, 'gift']\n })\n }\n }\n\n useEffect(() => {\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEM,IAAAI,EAAA,6BAjENC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAmC,iBACnCC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n freeGift,\n checkedGift,\n setCheckedGift,\n setCheckedBundle,\n setSavingDetail,\n savingDetail,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n } else {\n setCheckedGift?.(value)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'gift')\n return [...filtered, 'gift']\n })\n }\n }\n\n // useEffect(() => {\n // // \u5982\u679C\u7B2C\u4E00\u4E2A\u793C\u7269\u53EF\u7528\uFF0C\u5219\u9009\u4E2D\u5B83\n // availableGifts?.[0] && handleCheckboxClick(availableGifts?.[0])\n // }, [availableGifts])\n\n if (!availableGifts?.length) return null\n\n return (\n <div className=\"ipc-product-detail-free-gift\">\n <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n <div className=\"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n {availableGifts.map(gift => (\n <div\n key={gift.id}\n className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n ['border-brand']: checkedGift?.id === gift.id,\n })}\n >\n <Checkbox\n onCheckedChange={() => handleCheckboxClick(gift)}\n size=\"lg\"\n className={cn('rounded-full border-2 border-[#E4E5E6]', {\n 'border-brand': checkedGift?.id === gift.id,\n })}\n id={gift.id}\n checked={checkedGift?.id === gift.id}\n value={gift.id}\n ></Checkbox>\n <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n <div className=\"flex items-center gap-2\">\n <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n <Text\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n html={gift.product.title}\n />\n </div>\n <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n <Text className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n </label>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEM,IAAAI,EAAA,6BAjENC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAmC,iBACnCC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAIM,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBjB,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBjB,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,mBAAmB,KAC/D,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAMP,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQO,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAe",
|
|
6
6
|
"names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var h=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var o in r)u(t,o,{get:r[o],enumerable:!0})},b=(t,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(t,s)&&s!==o&&u(t,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return t};var z=(t,r,o)=>(o=t!=null?h(w(t)):{},b(r||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>b(u({},"__esModule",{value:!0}),t);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),x=require("react"),a=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:t="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,x.useState)();(0,x.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(a.Dialog,{children:[(0,e.jsx)(a.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(a.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(a.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(a.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(a.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-
|
|
1
|
+
"use strict";var h=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var o in r)u(t,o,{get:r[o],enumerable:!0})},b=(t,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(t,s)&&s!==o&&u(t,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return t};var z=(t,r,o)=>(o=t!=null?h(w(t)):{},b(r||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>b(u({},"__esModule",{value:!0}),t);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),x=require("react"),a=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:t="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,x.useState)();(0,x.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(a.Dialog,{children:[(0,e.jsx)(a.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(a.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(a.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(a.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(a.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>{const p=l.variants[0];return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:p.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:t,amount:p?.coupons?.[0]?.variant_price4wscode||p.price.amount,currencyCode:p.price.currencyCode})}),Number(p?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:t,amount:p.price.amount,currencyCode:p.price.currencyCode})})]})})})},i)})]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((l,i)=>{const p=l.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:p?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:p.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},i)})]}),(0,e.jsx)(a.Grid,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:o.specificationKeys?.map(l=>(0,e.jsxs)(a.GridItem,{span:12,className:"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:l}),m.map((i,p)=>{let n=i.metafields?.global?.specifications?.find(C=>C?.key===l)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#1D1D1F]",children:n})},p)})]},l))})]})]})]}):null};var _=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 Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = 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 className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-
|
|
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 Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = 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 className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\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-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] 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 {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\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 {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{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-bold text-[#1D1D1F]\">{text}</div>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
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", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ae=Object.create;var B=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(t,l)=>{for(var o in l)B(t,o,{get:l[o],enumerable:!0})},Y=(t,l,o,y)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of ie(l))!re.call(t,r)&&r!==o&&B(t,r,{get:()=>l[r],enumerable:!(y=le(l,r))||y.enumerable});return t};var ne=(t,l,o)=>(o=t!=null?ae(oe(t)):{},Y(l||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),ce=t=>Y(B({},"__esModule",{value:!0}),t);var be={};se(be,{default:()=>me});module.exports=ce(be);var e=require("react/jsx-runtime"),j=require("../../../../AiuiProvider/index.js"),E=require("../../../../../components/index.js"),a=require("react"),P=require("swiper/react"),f=require("swiper/modules"),x=require("../../../../../helpers/index.js"),N=require("./types.js"),L=require("@radix-ui/react-tabs"),$=require("../../../BizProductProvider.js"),U=require("../../../hooks/use-variant-media.js"),Z=require("./components/SpecsModal.js"),q=ne(require("./components/CompareModal.js")),J=require("../../../utils/index.js"),Q=require("../../../../../shared/Styles.js"),X=require("../../../../../shared/track.js"),ee=require("../../../../../components/index.js");const K=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),de=()=>{const{copyWriting:t}=(0,j.useAiuiContext)(),{product:l,variant:o,selectedOptions:y}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:l,variant:o}),[m,w]=(0,a.useState)(null),I=(0,a.useRef)(null),g=o?.metafields?.component?.custom_media_list;let s,h,_,G;g&&g?.available?(s=g?.product||[],h=g?.scenarios||[],_=g?.keyFeatures||[],G=g?.video||[]):(s=r?.productList,h=r?.sceneList,_=r?.keyFeaturesList,G=r?.videoList);const u=(0,a.useMemo)(()=>[...s,...h,...G],[s,h,G]),b={productList:s,sceneList:h,keyFeaturesList:_,videoList:G},i=(0,a.useMemo)(()=>{const c=l?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],k=o?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=k?.find(D=>T?.galleries===D?.galleries);let H=b[T?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(d=>{const C=[];if(d.image_1920&&d.image_1920.trim()&&C.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&C.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&C.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&C.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&C.push(`${d.image_390} 390`),C.length>0){const W=C.join(", ");return{image:{url:W,altText:T.comment?.content||""},_fromImages:!0,_responsiveSource:W}}return null}).filter(d=>d!==null);D.length>0&&(H=D)}return{...T,galleries:H}}).filter(T=>T.galleries.length>0)},[o?.payload,b,l?.payload]),[v,n]=(0,a.useState)(i?.[0]),[p,M]=(0,a.useState)(0),[A,S]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const c=(p+1)%i.length;M(c),n(i[c]),S(0)},[p,i]),V=(0,a.useCallback)(()=>{const c=p===0?i.length-1:p-1;M(c),n(i[c]);const k=i[c]?.galleries||[];S(k.length-1)},[p,i]);(0,a.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(p)})},[p]),(0,a.useEffect)(()=>{n(i[0]),M(0)},[o?.id]);const te=(c,k)=>{switch(c?.galleryTabType){case N.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(pe,{...c,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(L.Root,{className:"relative",value:v?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((c,k)=>(0,e.jsx)(L.Content,{className:"h-full",value:c.tabValue,children:te(c,k)},c.tabValue))}),(0,e.jsx)(ue,{ref:I,galleryTabs:i,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:M,setTargetSlideIndex:S})]})})},ue=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:y,setActiveGalleryTab:r,setActiveTabIndex:m,setTargetSlideIndex:w}=t,{product:I}=(0,$.useBizProductContext)(),g=(0,a.useRef)(null),s=(0,a.useRef)(new Map),h=(0,a.useCallback)(u=>{if(g.current){const b=g.current,i=u.currentTarget,v=i.offsetLeft-b.offsetWidth/2+i.offsetWidth/2;b.scrollTo({left:v,behavior:"smooth"})}},[]),_=(0,a.useCallback)((u,b,i)=>{r(b),m(i),w(0),h(u)},[r,m,w,h]),G=(0,a.useCallback)(u=>{if(g.current&&o[u]){const b=g.current,i=o[u],v=s.current.get(i.tabValue);if(v){const n=v.offsetLeft-b.offsetWidth/2+v.offsetWidth/2;b.scrollTo({left:n,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:G})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(L.List,{ref:g,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((u,b)=>(0,e.jsx)(L.Trigger,{ref:i=>{i?s.current.set(u.tabValue,i):s.current.delete(u.tabValue)},className:(0,x.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===y?.tabValue&&"bg-white"),onClick:i=>_(i,u,b),value:u.tabValue,children:u.tabLabel},u.tabValue+b))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:I.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z.SpecsModal,{})," | ",(0,e.jsx)(q.default,{})]})})]})}),F=(0,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:y}=(0,j.useAiuiContext)(),{variant:r,totalSavings:m}=(0,$.useBizProductContext)(),w=(0,a.useRef)(null),[I,g]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),_=(0,a.useRef)(null),[G,u]=(0,a.useState)(!1),b=(0,a.useMemo)(()=>{if(t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,N.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,a.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),v=(0,a.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,a.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(P.Swiper,{ref:l,className:"h-full",onSwiper:h,onTouchEnd:(n,p)=>{n.isBeginning&&n.swipeDirection==="prev"?i():n.isEnd&&n.swipeDirection==="next"&&v()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[f.Mousewheel,f.Thumbs,f.Navigation,f.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((n,p)=>{const M=`${t.tabValue}-${p}`,A=()=>{(0,X.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:p+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=n?._responsiveSource||n?.image?.url||"";return(0,e.jsx)(P.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ee.ExposureDetector,{onExposure:A,exposureKey:M,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(E.Picture,{source:S,alt:n?.image?.altText,className:(0,x.cn)("h-full",b),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!m&&!t.index&&(0,e.jsx)(E.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:m,currencyCode:r?.price?.currencyCode,locale:o})} ${y?.off}`}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(K,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:(0,e.jsx)(O,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(P.Swiper,{className:"flex items-center justify-between",onSwiper:g,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[f.Navigation,f.Thumbs],children:t?.galleries?.map((n,p)=>(0,e.jsx)(P.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(E.Picture,{source:n.image?.url,alt:n.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+p))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(E.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative max-w-[528px] overflow-hidden",children:(0,e.jsx)("div",{ref:_,className:(0,x.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(E.Text,{html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),pe=t=>{const[l,o]=(0,a.useState)(null),y=(0,a.useCallback)(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),r=(0,a.useCallback)(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return(0,a.useEffect)(()=>{l&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(P.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(m,w)=>{m.isBeginning&&m.swipeDirection==="prev"?y():m.isEnd&&m.swipeDirection==="next"&&r()},modules:[f.Mousewheel,f.Thumbs,f.Navigation,f.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,w)=>(0,e.jsx)(P.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,x.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:y,children:(0,e.jsx)(K,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var me=(0,Q.withLayout)(de);
|
|
1
|
+
"use strict";var le=Object.create;var B=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(t,a)=>{for(var i in a)B(t,i,{get:a[i],enumerable:!0})},Y=(t,a,i,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of oe(a))!re.call(t,r)&&r!==i&&B(t,r,{get:()=>a[r],enumerable:!(h=ae(a,r))||h.enumerable});return t};var ne=(t,a,i)=>(i=t!=null?le(ie(t)):{},Y(a||!t||!t.__esModule?B(i,"default",{value:t,enumerable:!0}):i,t)),ce=t=>Y(B({},"__esModule",{value:!0}),t);var be={};se(be,{default:()=>me});module.exports=ce(be);var e=require("react/jsx-runtime"),j=require("../../../../AiuiProvider/index.js"),G=require("../../../../../components/index.js"),l=require("react"),y=require("swiper/react"),m=require("swiper/modules"),N=require("../../../../../helpers/index.js"),P=require("./types.js"),L=require("@radix-ui/react-tabs"),$=require("../../../BizProductProvider.js"),U=require("../../../hooks/use-variant-media.js"),Z=require("./components/SpecsModal.js"),q=ne(require("./components/CompareModal.js")),J=require("../../../utils/index.js"),Q=require("../../../../../shared/Styles.js"),X=require("../../../../../shared/track.js"),ee=require("../../../../../components/index.js");const O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{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"})]}),K=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"})]}),de=()=>{const{copyWriting:t}=(0,j.useAiuiContext)(),{product:a,variant:i,selectedOptions:h}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:a,variant:i}),[b,w]=(0,l.useState)(null),C=(0,l.useRef)(null),f=i?.metafields?.component?.custom_media_list;let s,x,I,E;f&&f?.available?(s=f?.product||[],x=f?.scenarios||[],I=f?.keyFeatures||[],E=f?.video||[]):(s=r?.productList,x=r?.sceneList,I=r?.keyFeaturesList,E=r?.videoList);const u=(0,l.useMemo)(()=>[...s,...x,...E],[s,x,E]),g={productList:s,sceneList:x,keyFeaturesList:I,videoList:E},o=(0,l.useMemo)(()=>{const c=a?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],k=i?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=k?.find(D=>T?.galleries===D?.galleries);let H=g[T?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(d=>{const _=[];if(d.image_1920&&d.image_1920.trim()&&_.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&_.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&_.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&_.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&_.push(`${d.image_390} 390`),_.length>0){const W=_.join(", ");return{image:{url:W,altText:T.comment?.content||""},_fromImages:!0,_responsiveSource:W}}return null}).filter(d=>d!==null);D.length>0&&(H=D)}return{...T,galleries:H}}).filter(T=>T.galleries.length>0)},[i?.payload,g,a?.payload]),[v,n]=(0,l.useState)(o?.[0]),[p,A]=(0,l.useState)(0),[M,S]=(0,l.useState)(null),R=(0,l.useCallback)(()=>{const c=(p+1)%o.length;A(c),n(o[c]),S(0)},[p,o]),V=(0,l.useCallback)(()=>{const c=p===0?o.length-1:p-1;A(c),n(o[c]);const k=o[c]?.galleries||[];S(k.length-1)},[p,o]);(0,l.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(p)})},[p]),(0,l.useEffect)(()=>{n(o[0]),A(0)},[i?.id]);const te=(c,k)=>{switch(c?.galleryTabType){case P.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(pe,{...c,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(L.Root,{className:"relative",value:v?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((c,k)=>(0,e.jsx)(L.Content,{className:"h-full",value:c.tabValue,children:te(c,k)},c.tabValue))}),(0,e.jsx)(ue,{ref:C,galleryTabs:o,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:A,setTargetSlideIndex:S})]})})},ue=(0,l.forwardRef)((t,a)=>{const{galleryTabs:i,activeGalleryTab:h,setActiveGalleryTab:r,setActiveTabIndex:b,setTargetSlideIndex:w}=t,{product:C}=(0,$.useBizProductContext)(),f=(0,l.useRef)(null),s=(0,l.useRef)(new Map),x=(0,l.useCallback)(u=>{if(f.current){const g=f.current,o=u.currentTarget,v=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:v,behavior:"smooth"})}},[]),I=(0,l.useCallback)((u,g,o)=>{r(g),b(o),w(0),x(u)},[r,b,w,x]),E=(0,l.useCallback)(u=>{if(f.current&&i[u]){const g=f.current,o=i[u],v=s.current.get(o.tabValue);if(v){const n=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:n,behavior:"smooth"})}}},[i]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:E})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(L.List,{ref:f,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:i?.map((u,g)=>(0,e.jsx)(L.Trigger,{ref:o=>{o?s.current.set(u.tabValue,o):s.current.delete(u.tabValue)},className:(0,N.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===h?.tabValue&&"bg-white"),onClick:o=>I(o,u,g),value:u.tabValue,children:u.tabLabel},u.tabValue+g))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z.SpecsModal,{})," | ",(0,e.jsx)(q.default,{})]})})]})}),F=(0,l.forwardRef)((t,a)=>{const{locale:i="us",copyWriting:h}=(0,j.useAiuiContext)(),{variant:r,totalSavings:b}=(0,$.useBizProductContext)(),w=(0,l.useRef)(null),[C,f]=(0,l.useState)(null),[s,x]=(0,l.useState)(null),I=(0,l.useRef)(null),[E,u]=(0,l.useState)(!1),g=(0,l.useMemo)(()=>{if(t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),o=(0,l.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),v=(0,l.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,l.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{ref:a,className:"h-full",onSwiper:x,onTouchEnd:(n,p)=>{n.isBeginning&&n.swipeDirection==="prev"?o():n.isEnd&&n.swipeDirection==="next"&&v()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:C},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((n,p)=>{const A=`${t.tabValue}-${p}`,M=()=>{(0,X.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:p+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=n?._responsiveSource||n?.image?.url||"";return(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ee.ExposureDetector,{onExposure:M,exposureKey:A,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(G.Picture,{source:S,alt:n?.image?.altText,className:(0,N.cn)("h-full",g),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!b&&!t.index&&(0,e.jsx)(G.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:b,currencyCode:r?.price?.currencyCode,locale:i})} ${h?.off}`}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,e.jsx)(O,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:(0,e.jsx)(K,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(y.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[m.Navigation,m.Thumbs],children:t?.galleries?.map((n,p)=>(0,e.jsx)(y.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(G.Picture,{source:n.image?.url,alt:n.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+p))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(G.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative max-w-[528px] overflow-hidden",children:(0,e.jsxs)(y.Swiper,{modules:[m.Autoplay],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:[(0,e.jsx)(y.SwiperSlide,{children:(0,e.jsx)(G.Text,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})}),(0,e.jsx)(y.SwiperSlide,{children:(0,e.jsx)(G.Text,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})]})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),pe=t=>{const[a,i]=(0,l.useState)(null),h=(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)(y.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(b,w)=>{b.isBeginning&&b.swipeDirection==="prev"?h():b.isEnd&&b.swipeDirection==="next"&&r()},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((b,w)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,N.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:h,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(K,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var me=(0,Q.withLayout)(de);
|
|
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/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\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 [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 onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\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 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -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 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -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=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\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=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover 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=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <div\n ref={commentRef}\n className={cn('line-clamp-2')}\n style={\n {\n // animationDuration: `3s`,\n }\n }\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </div>\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -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 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAkCI,IAAAI,EAAA,6BAlCJC,EAA+B,6CAC/BC,EAA6C,8CAC7CC,EAWO,iBACPA,EAAoD,wBACpDC,
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\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 [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 onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\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 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -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 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -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=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\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=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover 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=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <Swiper\n modules={[Autoplay]}\n loop\n className=\"lg-desktop:h-11 h-10\"\n direction=\"vertical\"\n autoplay={{ delay: 2000, disableOnInteraction: false }}\n >\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n </Swiper>\n {/* <div\n ref={commentRef}\n className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </div> */}\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -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 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
|
|
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", "import_Styles", "import_track", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Text as
|
|
1
|
+
import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Text as o,Link as m}from"../../../../components/index.js";import{Dialog as d,DialogContent as g,DialogHeader as x,DialogTitle as c}from"../../../../components/index.js";const h=({data:e,onClose:p,open:s})=>t(d,{open:s,onOpenChange:p,children:l(g,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(x,{className:"laptop:pt-4 pb-2 pt-4",children:t(c,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),l("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(o,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((i,a)=>l("li",{className:"flex text-[18px]",children:[l("span",{className:"text-[#86868C]",children:[a+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:i})]},a))}),l("div",{className:"mt-[24px] md:mt-[16px]",children:[t(o,{className:"text-[18px] font-bold leading-[1.2] text-[#1d1d1f]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((i,a)=>l("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(o,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:i.title}),t("div",{className:"mt-3 grid grid-flow-row",children:i.list.map((n,r)=>t(o,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},a))})]}),t(m,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{h as ShippingPolicyModal};
|
|
2
2
|
//# sourceMappingURL=ShippingPolicyModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4
|
|
5
|
-
"mappings": "AAuCU,cAAAA,
|
|
4
|
+
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n </DialogHeader>\n <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n <Text\n className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n html={data?.shippingCoupon?.title}\n />\n <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n {data?.shippingCoupon?.list.map((item, index) => (\n <li className=\"flex text-[18px]\" key={index}>\n <span className=\"text-[#86868C]\">{index + 1}.</span>\n <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n </li>\n ))}\n </ul>\n <div className=\"mt-[24px] md:mt-[16px]\">\n <Text className=\"text-[18px] font-bold leading-[1.2] text-[#1d1d1f]\" html={data?.shippingService?.title} />\n <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n {data?.shippingService?.list.map((item, index) => (\n <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n <div className=\"mt-3 grid grid-flow-row\">\n {item.list.map((subItem, subIndex) => (\n <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n {subItem}\n </Text>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n <Link\n className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n href={`${data?.terms?.url}`}\n >\n {data?.terms?.text}\n </Link>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAuCU,cAAAA,EAUM,QAAAC,MAVN,oBAvCV,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,gBAAAC,EAAc,eAAAC,MAAmB,kCA8B1D,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACI,EAAA,CAAO,KAAMO,EAAM,aAAcD,EAChC,SAAAT,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,oWAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,wBACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAE,GAAM,MAAM,EAC3F,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACE,EAAA,CACC,UAAU,oEACV,KAAMO,GAAM,gBAAgB,MAC9B,EACAT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,mBACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAFtBC,CAGtC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,sDAAsD,KAAMO,GAAM,iBAAiB,MAAO,EAC1GT,EAAC,OAAI,UAAU,yDACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMU,EAAK,MAAO,EAC7FZ,EAAC,OAAI,UAAU,0BACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAY,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACG,EAAA,CACC,UAAU,0EACV,KAAM,GAAGM,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
|
|
6
6
|
"names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "DialogHeader", "DialogTitle", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as
|
|
1
|
+
import{jsx as t,jsxs as r}from"react/jsx-runtime";import{Text as l,Picture as N,Checkbox as y}from"../../../../../../components/index.js";import{cn as f}from"../../../../../../helpers/index.js";import{useMemo as P}from"react";import{useBizProductContext as E}from"../../../../BizProductProvider.js";import{formatPrice as G}from"../../../../utils/index.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{withLayout as z}from"../../../../../../shared/Styles.js";const B=()=>{const{locale:u="us"}=w(),{freeGift:x,checkedGift:o,setCheckedGift:d,setCheckedBundle:D,setSavingDetail:b,savingDetail:h,setJoinedRecommendBuyProducts:a,joinedRecommendBuyProducts:s,setAddOrder:c}=E(),{title:g,giftList:n=[],freeLabel:k}=x||{},m=P(()=>n?.filter(e=>e.availableForSale),[n]),v=e=>{o?.id===e.id?(d?.(void 0),b?.({...h,freeGift:0}),a?.({...s,gift:{value:void 0,canOperate:!0}}),c?.(i=>i.filter(p=>p!=="gift"))):(d?.(e),a?.({...s,gift:{value:e,canOperate:!1}}),c?.(i=>[...i.filter(C=>C!=="gift"),"gift"]))};return m?.length?r("div",{className:"ipc-product-detail-free-gift",children:[t(l,{size:3,className:"font-bold leading-[1.2]",html:g}),t("div",{className:"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m.map(e=>r("div",{className:f("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":o?.id===e.id}),children:[t(y,{onCheckedChange:()=>v(e),size:"lg",className:f("rounded-full border-2 border-[#E4E5E6]",{"border-brand":o?.id===e.id}),id:e.id,checked:o?.id===e.id,value:e.id}),r("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[r("div",{className:"flex items-center gap-2",children:[t(N,{source:e.image?.url,className:"size-12 shrink-0"}),t(l,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),r("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[t(l,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:k}),t(l,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:G({amount:e.price.amount,locale:u,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var J=z(B);export{J as default};
|
|
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/ProductFreeGift/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n freeGift,\n checkedGift,\n setCheckedGift,\n setCheckedBundle,\n setSavingDetail,\n savingDetail,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n } else {\n setCheckedGift?.(value)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'gift')\n return [...filtered, 'gift']\n })\n }\n }\n\n useEffect(() => {\n
|
|
5
|
-
"mappings": "AAiEM,cAAAA,EAoBQ,QAAAC,MApBR,oBAjEN,OAAS,QAAAC,EAAM,WAAAC,EAAS,YAAAC,MAAgB,wCACxC,OAAS,MAAAC,MAAU,qCACnB,
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n freeGift,\n checkedGift,\n setCheckedGift,\n setCheckedBundle,\n setSavingDetail,\n savingDetail,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n const { title, giftList = [], freeLabel } = freeGift || {}\n const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n const handleCheckboxClick = (value: ProductVariant) => {\n if (checkedGift?.id === value.id) {\n setCheckedGift?.(undefined)\n setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n } else {\n setCheckedGift?.(value)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'gift')\n return [...filtered, 'gift']\n })\n }\n }\n\n // useEffect(() => {\n // // \u5982\u679C\u7B2C\u4E00\u4E2A\u793C\u7269\u53EF\u7528\uFF0C\u5219\u9009\u4E2D\u5B83\n // availableGifts?.[0] && handleCheckboxClick(availableGifts?.[0])\n // }, [availableGifts])\n\n if (!availableGifts?.length) return null\n\n return (\n <div className=\"ipc-product-detail-free-gift\">\n <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n <div className=\"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n {availableGifts.map(gift => (\n <div\n key={gift.id}\n className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n ['border-brand']: checkedGift?.id === gift.id,\n })}\n >\n <Checkbox\n onCheckedChange={() => handleCheckboxClick(gift)}\n size=\"lg\"\n className={cn('rounded-full border-2 border-[#E4E5E6]', {\n 'border-brand': checkedGift?.id === gift.id,\n })}\n id={gift.id}\n checked={checkedGift?.id === gift.id}\n value={gift.id}\n ></Checkbox>\n <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n <div className=\"flex items-center gap-2\">\n <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n <Text\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n html={gift.product.title}\n />\n </div>\n <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n <Text className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n </label>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
|
|
5
|
+
"mappings": "AAiEM,cAAAA,EAoBQ,QAAAC,MApBR,oBAjEN,OAAS,QAAAC,EAAM,WAAAC,EAAS,YAAAC,MAAgB,wCACxC,OAAS,MAAAC,MAAU,qCACnB,OAAoB,WAAAC,MAAe,QACnC,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,uCAE/B,OAAS,cAAAC,MAAkB,qCAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIH,EAAe,EACnC,CACJ,SAAAI,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,EAAId,EAAqB,EACnB,CAAE,MAAAe,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,EAAiBnB,EAAQ,IAAMiB,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,OAAKL,GAAgB,OAGnBxB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMoB,EAAO,EAChEtB,EAAC,OAAI,UAAU,qFACZ,SAAAyB,EAAe,IAAIM,GAClB9B,EAAC,OAEC,UAAWI,EAAG,yFAA0F,CACrG,eAAiBS,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,UAAA/B,EAACI,EAAA,CACC,gBAAiB,IAAMuB,EAAoBI,CAAI,EAC/C,KAAK,KACL,UAAW1B,EAAG,yCAA0C,CACtD,eAAgBS,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,EACD9B,EAAC,SAAM,QAAS8B,EAAK,GAAI,UAAU,qEACjC,UAAA9B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQ4B,EAAK,OAAO,IAAK,UAAU,mBAAmB,EAC/D/B,EAACE,EAAA,CACC,UAAU,2EACV,KAAM6B,EAAK,QAAQ,MACrB,GACF,EACA9B,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,6DAA6D,KAAMsB,EAAW,EAC9FxB,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQuB,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAOC,EAAQtB,EAAWC,CAAe",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "withLayout", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift", "ProductFreeGift_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as v,useState as N}from"react";import{Dialog as y,DialogTrigger as D,DialogContent as C,DialogHeader as h,DialogTitle as E,Grid as c,GridItem as o,Text as G}from"../../../../../../components/index.js";import{useBizProductContext as w}from"../../../../BizProductProvider.js";import I from"./Select.js";import{useAiuiContext as k}from"../../../../../AiuiProvider/index.js";import{formatPrice as f}from"../../../../utils/index.js";import{ShopifyColorOption as z}from"./ShopifyColorOption.js";const P=()=>{const{locale:u="us",copyWriting:n}=k(),{compareData:l,product:g}=w(),[m,x]=N();v(()=>{x(l?.availableCompareList[0]?.handle)},[l?.availableCompareList]);const d=[l?.currentProductCompareData?.product,l?.availableCompareList.find(a=>a.handle===m)?.product].filter(Boolean);return l?.specificationKeys?r(y,{children:[e(D,{className:"text-base font-bold leading-[1.4]",children:n?.compare}),r(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(h,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:e(E,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:n?.compare})}),r("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[r(c,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[e(o,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:n?.product||"Product"})}),e(o,{span:1,children:e(G,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:l.currentProductCompareData?.shortName||g.title})}),m&&e(o,{span:1,children:e(I,{className:"rounded-btn h-[48px] px-4",value:m,onChange:a=>{x(a)},list:l.options})})]}),r(c,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[e(o,{span:1}),d.map((a,p)=>e(o,{span:1,className:"flex items-center",children:e("img",{src:a.images[0].url,alt:a.title,className:"size-[100px]",role:"presentation"})},p))]}),r(c,{className:"laptop:py-
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as v,useState as N}from"react";import{Dialog as y,DialogTrigger as D,DialogContent as C,DialogHeader as h,DialogTitle as E,Grid as c,GridItem as o,Text as G}from"../../../../../../components/index.js";import{useBizProductContext as w}from"../../../../BizProductProvider.js";import I from"./Select.js";import{useAiuiContext as k}from"../../../../../AiuiProvider/index.js";import{formatPrice as f}from"../../../../utils/index.js";import{ShopifyColorOption as z}from"./ShopifyColorOption.js";const P=()=>{const{locale:u="us",copyWriting:n}=k(),{compareData:l,product:g}=w(),[m,x]=N();v(()=>{x(l?.availableCompareList[0]?.handle)},[l?.availableCompareList]);const d=[l?.currentProductCompareData?.product,l?.availableCompareList.find(a=>a.handle===m)?.product].filter(Boolean);return l?.specificationKeys?r(y,{children:[e(D,{className:"text-base font-bold leading-[1.4]",children:n?.compare}),r(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(h,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:e(E,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:n?.compare})}),r("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[r(c,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[e(o,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:n?.product||"Product"})}),e(o,{span:1,children:e(G,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:l.currentProductCompareData?.shortName||g.title})}),m&&e(o,{span:1,children:e(I,{className:"rounded-btn h-[48px] px-4",value:m,onChange:a=>{x(a)},list:l.options})})]}),r(c,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[e(o,{span:1}),d.map((a,p)=>e(o,{span:1,className:"flex items-center",children:e("img",{src:a.images[0].url,alt:a.title,className:"size-[100px]",role:"presentation"})},p))]}),r(c,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[e(o,{span:1}),d.map((a,p)=>{const t=a.variants[0];return e(o,{span:1,className:"flex h-full",children:e("div",{className:"flex flex-col gap-[8px]",children:t.price.amount<9999999&&e("div",{className:"flex items-center gap-[8px]",children:r("div",{className:"flex items-center gap-[6px]",children:[e("span",{className:"text-[18px] font-bold",children:f({locale:u,amount:t?.coupons?.[0]?.variant_price4wscode||t.price.amount,currencyCode:t.price.currencyCode})}),Number(t?.coupons?.[0]?.variant_price4wscode)>0&&e("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:f({locale:u,amount:t.price.amount,currencyCode:t.price.currencyCode})})]})})})},p)})]}),r(c,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[e(o,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:n?.color||"Color"})}),d.map((a,p)=>{const t=a.options?.find(s=>["color","colour","couleur"].find(i=>s.name.toLowerCase().includes(i)))?.values.map(s=>s.label);return e(o,{span:1,className:"flex h-full",children:t?.length&&e("div",{className:"flex items-center gap-4",children:t.map(s=>e(z,{label:s,className:"size-6"},s))})},p)})]}),e(c,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:l.specificationKeys?.map(a=>r(o,{span:12,className:"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[e("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:a}),d.map((p,t)=>{let i=p.metafields?.global?.specifications?.find(b=>b?.key===a)?.value||"";switch(i.trim().toLowerCase()){case"true":i="\u2714\uFE0F";break;case"false":i="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-bold text-[#1D1D1F]",children:i})},t)})]},a))})]})]})]}):null};var A=P;export{A as default};
|
|
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 Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = 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 className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-
|
|
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 Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = 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 className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\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-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] 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 {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\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 {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{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-bold text-[#1D1D1F]\">{text}</div>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as he,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as ae,Picture as B,Badge as le}from"../../../../../components/index.js";import{useCallback as w,useMemo as $,useState as G,forwardRef as q,useRef as M,useEffect as D,useImperativeHandle as ie}from"react";import{Swiper as F,SwiperSlide as j}from"swiper/react";import{Navigation as H,Mousewheel as J,Thumbs as W,Pagination as Q}from"swiper/modules";import{cn as S}from"../../../../../helpers/index.js";import{GalleryTabType as L}from"./types.js";import{Content as oe,List as re,Root as se,Trigger as ne}from"@radix-ui/react-tabs";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useVariantMedia as ce}from"../../../hooks/use-variant-media.js";import{SpecsModal as de}from"./components/SpecsModal.js";import ue from"./components/CompareModal.js";import{formatPrice as pe}from"../../../utils/index.js";import{withLayout as me}from"../../../../../shared/Styles.js";import{gaTrack as be}from"../../../../../shared/track.js";import{ExposureDetector as ge}from"../../../../../components/index.js";const X=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),ee=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),fe=()=>{const{copyWriting:t}=Z(),{product:r,variant:p,selectedOptions:N}=Y(),m=ce({product:r,variant:p}),[d,h]=G(null),_=M(null),b=p?.metafields?.component?.custom_media_list;let l,f,E,k;b&&b?.available?(l=b?.product||[],f=b?.scenarios||[],E=b?.keyFeatures||[],k=b?.video||[]):(l=m?.productList,f=m?.sceneList,E=m?.keyFeaturesList,k=m?.videoList);const n=$(()=>[...l,...f,...k],[l,f,k]),u={productList:l,sceneList:f,keyFeaturesList:E,videoList:k},a=$(()=>{const o=r?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],x=p?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return o?.map(v=>{const V=x?.find(z=>v?.galleries===z?.galleries);let O=u[v?.galleries]||[];if(V?.images&&Array.isArray(V.images)&&V.images.length>0){const z=V.images.map(s=>{const P=[];if(s.image_1920&&s.image_1920.trim()&&P.push(`${s.image_1920} 1920`),s.image_1440&&s.image_1440.trim()&&P.push(`${s.image_1440} 1440`),s.image_1024&&s.image_1024.trim()&&P.push(`${s.image_1024} 1024`),s.image_768&&s.image_768.trim()&&P.push(`${s.image_768} 767`),s.image_390&&s.image_390.trim()&&P.push(`${s.image_390} 390`),P.length>0){const U=P.join(", ");return{image:{url:U,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(s=>s!==null);z.length>0&&(O=z)}return{...v,galleries:O}}).filter(v=>v.galleries.length>0)},[p?.payload,u,r?.payload]),[g,i]=G(a?.[0]),[c,C]=G(0),[I,T]=G(null),A=w(()=>{const o=(c+1)%a.length;C(o),i(a[o]),T(0)},[c,a]),R=w(()=>{const o=c===0?a.length-1:c-1;C(o),i(a[o]);const x=a[o]?.galleries||[];T(x.length-1)},[c,a]);D(()=>{c!=null&&requestAnimationFrame(()=>{_.current?.scrollToTab(c)})},[c]),D(()=>{i(a[0]),C(0)},[p?.id]);const te=(o,x)=>{switch(o?.galleryTabType){case L.GALLERY_IMAGE_MAIN:return e(K,{...o,index:x,onNextTab:A,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_IMAGE_FEATURES:return e(K,{...o,index:x,onNextTab:A,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_IMAGE_SCENE:return e(K,{...o,index:x,onNextTab:A,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_VIDEO:return e(ye,{...o,onNextTab:A,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(se,{className:"relative",value:g?.tabValue,defaultValue:a?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((o,x)=>e(oe,{className:"h-full",value:o.tabValue,children:te(o,x)},o.tabValue))}),e(ve,{ref:_,galleryTabs:a,activeGalleryTab:g,setActiveGalleryTab:i,setActiveTabIndex:C,setTargetSlideIndex:T})]})})},ve=q((t,r)=>{const{galleryTabs:p,activeGalleryTab:N,setActiveGalleryTab:m,setActiveTabIndex:d,setTargetSlideIndex:h}=t,{product:_}=Y(),b=M(null),l=M(new Map),f=w(n=>{if(b.current){const u=b.current,a=n.currentTarget,g=a.offsetLeft-u.offsetWidth/2+a.offsetWidth/2;u.scrollTo({left:g,behavior:"smooth"})}},[]),E=w((n,u,a)=>{m(u),d(a),h(0),f(n)},[m,d,h,f]),k=w(n=>{if(b.current&&p[n]){const u=b.current,a=p[n],g=l.current.get(a.tabValue);if(g){const i=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:i,behavior:"smooth"})}}},[p]);return ie(r,()=>({scrollToTab:k})),y("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(re,{ref:b,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:p?.map((n,u)=>e(ne,{ref:a=>{a?l.current.set(n.tabValue,a):l.current.delete(n.tabValue)},className:S("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===N?.tabValue&&"bg-white"),onClick:a=>E(a,n,u),value:n.tabValue,children:n.tabLabel},n.tabValue+u))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:_.metafields?.global?.specifications&&y(he,{children:[e(de,{})," | ",e(ue,{})]})})]})}),K=q((t,r)=>{const{locale:p="us",copyWriting:N}=Z(),{variant:m,totalSavings:d}=Y(),h=M(null),[_,b]=G(null),[l,f]=G(null),E=M(null),[k,n]=G(!1),u=$(()=>{if(t?.galleryTabType===L.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===L.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,L.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),a=w(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),g=w(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return D(()=>{l&&t.targetSlideIndex&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(F,{ref:r,className:"h-full",onSwiper:f,onTouchEnd:(i,c)=>{i.isBeginning&&i.swipeDirection==="prev"?a():i.isEnd&&i.swipeDirection==="next"&&g()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:_},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,c)=>{const C=`${t.tabValue}-${c}`,I=()=>{be({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=i?._responsiveSource||i?.image?.url||"";return e(j,{className:"h-full",children:e(ge,{onExposure:I,exposureKey:C,threshold:.5,duration:2e3,className:"h-full",children:e(B,{source:T,alt:i?.image?.altText,className:S("h-full",u),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),m.availableForSale&&!!d&&!t.index&&e(le,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${pe({amount:d,currencyCode:m?.price?.currencyCode,locale:p})} ${N?.off}`}),e("div",{className:S("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:e(X,{className:S("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:S("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:g,children:e(ee,{className:S("tablet:size-10 lg-desktop:size-12")})}),y("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e(F,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[H,W],children:t?.galleries?.map((i,c)=>e(j,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(B,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(B,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),e("div",{className:"relative max-w-[528px] overflow-hidden",children:e("div",{ref:E,className:S("line-clamp-2"),style:{},children:e(ae,{html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]}),e("div",{ref:h,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),ye=t=>{const[r,p]=G(null),N=w(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),m=w(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return D(()=>{r&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(F,{className:"h-full",onSwiper:p,onTouchEnd:(d,h)=>{d.isBeginning&&d.swipeDirection==="prev"?N():d.isEnd&&d.swipeDirection==="next"&&m()},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((d,h)=>e(j,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:d?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:d?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:d?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:S("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:N,children:e(X,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:S("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:e(ee,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ze=t=>e("div",{children:"3D View"});var De=me(fe);export{De as default};
|
|
1
|
+
import{Fragment as xe,jsx as e,jsxs as f}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as q,Picture as F,Badge as ae}from"../../../../../components/index.js";import{useCallback as w,useMemo as j,useState as k,forwardRef as J,useRef as A,useEffect as B,useImperativeHandle as oe}from"react";import{Swiper as $,SwiperSlide as M}from"swiper/react";import{Navigation as H,Mousewheel as Q,Thumbs as W,Pagination as X,Autoplay as ie}from"swiper/modules";import{cn as N}from"../../../../../helpers/index.js";import{GalleryTabType as P}from"./types.js";import{Content as re,List as se,Root as ne,Trigger as ce}from"@radix-ui/react-tabs";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useVariantMedia as de}from"../../../hooks/use-variant-media.js";import{SpecsModal as ue}from"./components/SpecsModal.js";import pe from"./components/CompareModal.js";import{formatPrice as me}from"../../../utils/index.js";import{withLayout as be}from"../../../../../shared/Styles.js";import{gaTrack as ge}from"../../../../../shared/track.js";import{ExposureDetector as fe}from"../../../../../components/index.js";const ee=t=>f("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),te=t=>f("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ve=()=>{const{copyWriting:t}=Z(),{product:r,variant:p,selectedOptions:G}=Y(),m=de({product:r,variant:p}),[d,h]=k(null),L=A(null),b=p?.metafields?.component?.custom_media_list;let a,v,_,S;b&&b?.available?(a=b?.product||[],v=b?.scenarios||[],_=b?.keyFeatures||[],S=b?.video||[]):(a=m?.productList,v=m?.sceneList,_=m?.keyFeaturesList,S=m?.videoList);const n=j(()=>[...a,...v,...S],[a,v,S]),u={productList:a,sceneList:v,keyFeaturesList:_,videoList:S},l=j(()=>{const i=r?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[],T=p?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[];return i?.map(y=>{const z=T?.find(D=>y?.galleries===D?.galleries);let K=u[y?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(s=>{const E=[];if(s.image_1920&&s.image_1920.trim()&&E.push(`${s.image_1920} 1920`),s.image_1440&&s.image_1440.trim()&&E.push(`${s.image_1440} 1440`),s.image_1024&&s.image_1024.trim()&&E.push(`${s.image_1024} 1024`),s.image_768&&s.image_768.trim()&&E.push(`${s.image_768} 767`),s.image_390&&s.image_390.trim()&&E.push(`${s.image_390} 390`),E.length>0){const U=E.join(", ");return{image:{url:U,altText:y.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(s=>s!==null);D.length>0&&(K=D)}return{...y,galleries:K}}).filter(y=>y.galleries.length>0)},[p?.payload,u,r?.payload]),[g,o]=k(l?.[0]),[c,C]=k(0),[I,x]=k(null),R=w(()=>{const i=(c+1)%l.length;C(i),o(l[i]),x(0)},[c,l]),V=w(()=>{const i=c===0?l.length-1:c-1;C(i),o(l[i]);const T=l[i]?.galleries||[];x(T.length-1)},[c,l]);B(()=>{c!=null&&requestAnimationFrame(()=>{L.current?.scrollToTab(c)})},[c]),B(()=>{o(l[0]),C(0)},[p?.id]);const le=(i,T)=>{switch(i?.galleryTabType){case P.GALLERY_IMAGE_MAIN:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_IMAGE_FEATURES:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_IMAGE_SCENE:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_VIDEO:return e(he,{...i,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:f(ne,{className:"relative",value:g?.tabValue,defaultValue:l?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:l.map((i,T)=>e(re,{className:"h-full",value:i.tabValue,children:le(i,T)},i.tabValue))}),e(ye,{ref:L,galleryTabs:l,activeGalleryTab:g,setActiveGalleryTab:o,setActiveTabIndex:C,setTargetSlideIndex:x})]})})},ye=J((t,r)=>{const{galleryTabs:p,activeGalleryTab:G,setActiveGalleryTab:m,setActiveTabIndex:d,setTargetSlideIndex:h}=t,{product:L}=Y(),b=A(null),a=A(new Map),v=w(n=>{if(b.current){const u=b.current,l=n.currentTarget,g=l.offsetLeft-u.offsetWidth/2+l.offsetWidth/2;u.scrollTo({left:g,behavior:"smooth"})}},[]),_=w((n,u,l)=>{m(u),d(l),h(0),v(n)},[m,d,h,v]),S=w(n=>{if(b.current&&p[n]){const u=b.current,l=p[n],g=a.current.get(l.tabValue);if(g){const o=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:o,behavior:"smooth"})}}},[p]);return oe(r,()=>({scrollToTab:S})),f("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(se,{ref:b,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:p?.map((n,u)=>e(ce,{ref:l=>{l?a.current.set(n.tabValue,l):a.current.delete(n.tabValue)},className:N("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===G?.tabValue&&"bg-white"),onClick:l=>_(l,n,u),value:n.tabValue,children:n.tabLabel},n.tabValue+u))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:L.metafields?.global?.specifications&&f(xe,{children:[e(ue,{})," | ",e(pe,{})]})})]})}),O=J((t,r)=>{const{locale:p="us",copyWriting:G}=Z(),{variant:m,totalSavings:d}=Y(),h=A(null),[L,b]=k(null),[a,v]=k(null),_=A(null),[S,n]=k(!1),u=j(()=>{if(t?.galleryTabType===P.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),l=w(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),g=w(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return B(()=>{a&&t.targetSlideIndex&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),f("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e($,{ref:r,className:"h-full",onSwiper:v,onTouchEnd:(o,c)=>{o.isBeginning&&o.swipeDirection==="prev"?l():o.isEnd&&o.swipeDirection==="next"&&g()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:L},modules:[Q,W,H,X],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,c)=>{const C=`${t.tabValue}-${c}`,I=()=>{ge({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},x=o?._responsiveSource||o?.image?.url||"";return e(M,{className:"h-full",children:e(fe,{onExposure:I,exposureKey:C,threshold:.5,duration:2e3,className:"h-full",children:e(F,{source:x,alt:o?.image?.altText,className:N("h-full",u),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),m.availableForSale&&!!d&&!t.index&&e(ae,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${me({amount:d,currencyCode:m?.price?.currencyCode,locale:p})} ${G?.off}`}),e("div",{className:N("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:l,children:e(ee,{className:N("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:N("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:g,children:e(te,{className:N("tablet:size-10 lg-desktop:size-12")})}),f("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[H,W],children:t?.galleries?.map((o,c)=>e(M,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(F,{source:o.image?.url,alt:o.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&f("div",{className:"flex items-center gap-2",children:[e(F,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),e("div",{className:"relative max-w-[528px] overflow-hidden",children:f($,{modules:[ie],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:[e(M,{children:e(q,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})}),e(M,{children:e(q,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})]})})]})]}),e("div",{ref:h,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),he=t=>{const[r,p]=k(null),G=w(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),m=w(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return B(()=>{r&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),f("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e($,{className:"h-full",onSwiper:p,onTouchEnd:(d,h)=>{d.isBeginning&&d.swipeDirection==="prev"?G():d.isEnd&&d.swipeDirection==="next"&&m()},modules:[Q,W,H,X],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((d,h)=>e(M,{className:"h-full",children:f("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:d?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:d?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:d?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:N("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:G,children:e(ee,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:N("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:e(te,{className:"tablet:size-10 lg-desktop:size-12"})})]})},De=t=>e("div",{children:"3D View"});var Be=be(ve);export{Be as default};
|
|
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/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\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 [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 onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\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 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -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 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -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=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\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=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover 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=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <div\n ref={commentRef}\n className={cn('line-clamp-2')}\n style={\n {\n // animationDuration: `3s`,\n }\n }\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </div>\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -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 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\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 [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 onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\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 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -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 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -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=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\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=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover 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=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <Swiper\n modules={[Autoplay]}\n loop\n className=\"lg-desktop:h-11 h-10\"\n direction=\"vertical\"\n autoplay={{ delay: 2000, disableOnInteraction: false }}\n >\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n </Swiper>\n {/* <div\n ref={commentRef}\n className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </div> */}\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -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 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
|
|
7
7
|
}
|