npm - @anker-in/headless-ui - Versions diffs - 1.1.9-temp-112710 → 1.1.9-temp-120101 - Mend

@anker-in/headless-ui 1.1.9-temp-112710 → 1.1.9-temp-120101

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

Files changed (74) hide show

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

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var F=(a,t)=>{for(var d in t)s(a,d,{get:t[d],enumerable:!0})},L=(a,t,d,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!B.call(a,c)&&c!==d&&s(a,c,{get:()=>t[c],enumerable:!(l=w(t,c))||l.enumerable});return a};var O=a=>L(s({},"__esModule",{value:!0}),a);var A={};F(A,{default:()=>V});module.exports=O(A);var r=require("react/jsx-runtime"),o=require("../../../../../../components/index.js"),n=require("../../../../../../helpers/index.js"),P=require("react"),g=require("../../../../BizProductProvider.js"),m=require("../../../../utils/index.js"),k=require("../../../../../AiuiProvider/index.js"),v=require("../../../../../../shared/Styles.js");const S=()=>{const{locale:a="us"}=(0,k.useAiuiContext)(),{checkedExchangePurchase:t,exchangePurchase:d,setCheckedBundle:l,setJoinedRecommendBuyProducts:c,setSavingDetail:C,setCheckedExchangePurchase:u,joinedRecommendBuyProducts:p,savingDetail:y,setAddOrder:x}=(0,g.useBizProductContext)(),{title:N,giftList:h=[],freeLabel:R}=d||{},f=(0,P.useMemo)(()=>h?.filter(e=>e.availableForSale),[h]),E=e=>{t?.id===e.id?(u?.(void 0),c?.({...p,exchange:{value:void 0,canOperate:!0}}),C?.({...y,exchangePurchase:0}),x?.(i=>i.filter(b=>b!=="exchange"))):(u?.(e),c?.({...p,exchange:{value:e,canOperate:!1}}),x?.(i=>[...i.filter(D=>D!=="exchange"),"exchange"]))};return f?.length?(0,r.jsxs)("div",{className:"ipc-product-detail-exchange-purchase",children:[(0,r.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:N}),(0,r.jsx)("div",{className:"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:f.map(e=>(0,r.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":t?.id===e.id}),children:[(0,r.jsx)(o.Checkbox,{onCheckedChange:()=>E(e),size:"lg",className:(0,n.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand":t?.id===e.id}),id:e.id,checked:t?.id===e.id,value:e.id}),(0,r.jsxs)("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)(o.Picture,{source:e.image?.url,className:"size-12 shrink-0"}),(0,r.jsx)(o.Text,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),(0,r.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[(0,r.jsx)(o.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:(0,m.formatPrice)({amount:e?.finalPrice?.amount||0,locale:a,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),(0,r.jsx)(o.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,m.formatPrice)({amount:e.price.amount,locale:a,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=(0,v.withLayout)(S);
+"use strict";var n=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var F=(a,t)=>{for(var l in t)n(a,l,{get:t[l],enumerable:!0})},L=(a,t,l,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!B.call(a,c)&&c!==l&&n(a,c,{get:()=>t[c],enumerable:!(d=w(t,c))||d.enumerable});return a};var O=a=>L(n({},"__esModule",{value:!0}),a);var A={};F(A,{default:()=>V});module.exports=O(A);var r=require("react/jsx-runtime"),o=require("../../../../../../components/index.js"),s=require("../../../../../../helpers/index.js"),P=require("react"),g=require("../../../../BizProductProvider.js"),m=require("../../../../utils/index.js"),k=require("../../../../../AiuiProvider/index.js"),v=require("../../../../../../shared/Styles.js");const S=()=>{const{locale:a="us"}=(0,k.useAiuiContext)(),{checkedExchangePurchase:t,exchangePurchase:l,setCheckedBundle:d,setJoinedRecommendBuyProducts:c,setSavingDetail:C,setCheckedExchangePurchase:u,joinedRecommendBuyProducts:p,savingDetail:y,setAddOrder:x}=(0,g.useBizProductContext)(),{title:N,giftList:h=[],freeLabel:R}=l||{},f=(0,P.useMemo)(()=>h?.filter(e=>e.availableForSale),[h]),E=e=>{t?.id===e.id?(u?.(void 0),c?.({...p,exchange:{value:void 0,canOperate:!0}}),C?.({...y,exchangePurchase:0}),x?.(i=>i.filter(b=>b!=="exchange"))):(u?.(e),c?.({...p,exchange:{value:e,canOperate:!1}}),x?.(i=>[...i.filter(D=>D!=="exchange"),"exchange"]))};return f?.length?(0,r.jsxs)("div",{className:"ipc-product-detail-exchange-purchase",children:[(0,r.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:N}),(0,r.jsx)("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:f.map(e=>(0,r.jsxs)("div",{className:(0,s.cn)("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":t?.id===e.id}),children:[(0,r.jsx)(o.Checkbox,{onCheckedChange:()=>E(e),size:"lg",className:(0,s.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand":t?.id===e.id}),id:e.id,checked:t?.id===e.id,value:e.id}),(0,r.jsxs)("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)(o.Picture,{source:e.image?.url,className:"size-12 shrink-0"}),(0,r.jsx)(o.Text,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),(0,r.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[(0,r.jsx)(o.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:(0,m.formatPrice)({amount:e?.finalPrice?.amount||0,locale:a,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),(0,r.jsx)(o.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,m.formatPrice)({amount:e.price.amount,locale:a,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=(0,v.withLayout)(S);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\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 !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\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: ProductVariant & { finalPrice?: ProductPrice }) => (\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']: checkedExchangePurchase?.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': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.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\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\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(ProductExchangePurchase)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,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,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
+  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\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 !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\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']: checkedExchangePurchase?.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': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.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\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\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(ProductExchangePurchase)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,uFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,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,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
   "names": ["ProductExchangePurchase_exports", "__export", "ProductExchangePurchase_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
 }

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

@@ -1,2 +1,2 @@
-"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);
+"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 laptop-md: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);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
-  "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"],
-  "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",
+  "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 laptop-md: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"],
+  "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,uFACZ,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",
   "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"]
 }

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

@@ -1,6 +1,6 @@
-"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(a,o)=>{for(var c in o)m(a,c,{get:o[c],enumerable:!0})},D=(a,o,c,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!C.call(a,l)&&l!==c&&m(a,l,{get:()=>o[l],enumerable:!(d=y(o,l))||d.enumerable});return a};var E=a=>D(m({},"__esModule",{value:!0}),a);var _={};T(_,{default:()=>P});module.exports=E(_);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js"),k=require("../../../../../../shared/track.js");const A=()=>{const{product:a,variant:o}=(0,h.useBizProductContext)(),[c,d]=(0,s.useState)(!1),l=(0,s.useMemo)(()=>a?.payload?.components?.find(i=>i.componentKey==="ProductHighlight")?.data||{},[a?.payload]),[g,p]=(0,s.useState)(l?.ksp?.[0]),e=(0,s.useCallback)(i=>{(0,k.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${o.sku}`,position:l?.title||"",button_name:i||l?.view||""}})},[l?.title,l?.view,o.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,t.jsx)(n.Text,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:d,children:[(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>e(),children:l?.view})}),(0,t.jsx)(L,{ksp:l?.ksp||[],activeKspItem:g,setActiveKspItem:p,gaTrackEvent:e})]})]}),(0,t.jsx)("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(i=>(0,t.jsx)("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{p(i),d(!0),e(i?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:i?.title})},i?.title))})]})},L=({ksp:a,activeKspItem:o,setActiveKspItem:c,gaTrackEvent:d})=>{const l=(0,s.useRef)([]),g=(0,s.useRef)(null),p=(0,s.useCallback)(e=>{const i=a.findIndex(f=>f.title===e?.title),u=l.current[i];if(u&&g.current){const f=g.current,v=u,w=v.offsetLeft-f.offsetWidth/2+v.offsetWidth/2;f.scrollTo({left:w,behavior:"smooth"})}},[a]);return(0,s.useEffect)(()=>{o&&setTimeout(()=>{p(o)},100)},[p,o]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
+"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(a,o)=>{for(var c in o)f(a,c,{get:o[c],enumerable:!0})},D=(a,o,c,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!C.call(a,l)&&l!==c&&f(a,l,{get:()=>o[l],enumerable:!(p=y(o,l))||p.enumerable});return a};var E=a=>D(f({},"__esModule",{value:!0}),a);var _={};T(_,{default:()=>P});module.exports=E(_);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js"),k=require("../../../../../../shared/track.js");const A=()=>{const{product:a,variant:o}=(0,h.useBizProductContext)(),[c,p]=(0,s.useState)(!1),l=(0,s.useMemo)(()=>a?.payload?.components?.find(i=>i.componentKey==="ProductHighlight")?.data||{},[a?.payload]),[g,d]=(0,s.useState)(l?.ksp?.[0]),e=(0,s.useCallback)(i=>{(0,k.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${o.sku}`,position:l?.title||"",button_name:i||l?.view||""}})},[l?.title,l?.view,o.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,t.jsx)(n.Text,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:p,children:[(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>e(),children:l?.view})}),(0,t.jsx)(L,{ksp:l?.ksp||[],activeKspItem:g,setActiveKspItem:d,gaTrackEvent:e})]})]}),(0,t.jsx)("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(i=>(0,t.jsx)("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{d(i),p(!0),e(i?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:i?.title})},i?.title))})]})},L=({ksp:a,activeKspItem:o,setActiveKspItem:c,gaTrackEvent:p})=>{const l=(0,s.useRef)([]),g=(0,s.useRef)(null),d=(0,s.useCallback)(e=>{const i=a.findIndex(m=>m.title===e?.title),u=l.current[i];if(u&&g.current){const m=g.current,v=u,w=v.offsetLeft-m.offsetWidth/2+v.offsetWidth/2;m.scrollTo({left:w,behavior:"smooth"})}},[a]);return(0,s.useEffect)(()=>{o&&setTimeout(()=>{d(o)},100)},[d,o]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
         .dialog-close-icon {
           color: ${o?.closeColor||"#1D1D1F"};
         }
-      `}),(0,t.jsxs)(r.Root,{value:o?.title,className:"w-full overflow-hidden",children:[a?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"desktop:py-6 w-full overflow-visible bg-white py-4",children:[(0,t.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:a?.map((e,i)=>(0,t.jsx)(r.Trigger,{ref:u=>{u&&(l.current[i]=u)},className:(0,x.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===o?.title&&"bg-white"),onClick:()=>{p(e),c(e),d(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},i+e.title))})})}),(0,t.jsx)("div",{className:"desktop:px-6 mt-4 px-4",children:a?.map((e,i)=>(0,t.jsx)(r.Content,{value:e.title,className:"desktop:text-[18px] text-[14px] font-bold",children:e.description},i+e.title))})]})]})]})};var P=(0,b.withLayout)(A);
+      `}),(0,t.jsxs)(r.Root,{value:o?.title,className:"w-full overflow-hidden",children:[a?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,t.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:a?.map((e,i)=>(0,t.jsx)(r.Trigger,{ref:u=>{u&&(l.current[i]=u)},className:(0,x.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===o?.title&&"bg-white"),onClick:()=>{d(e),c(e),p(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},i+e.title))})})}),(0,t.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:a?.map((e,i)=>(0,t.jsx)(r.Content,{value:e.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:e.description},i+e.title))})]})]})]})};var P=(0,b.withLayout)(A);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (activeKspItem: any) => void\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"desktop:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (activeKspItem: any) => void\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"laptop-md:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
   "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var n=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)d(o,r,{get:t[r],enumerable:!0})},m=(o,t,r,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&d(o,i,{get:()=>t[i],enumerable:!(f=x(t,i))||f.enumerable});return o};var e=(o,t,r)=>(r=o!=null?n(b(o)):{},m(t||!o||!o.__esModule?d(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>m(d({},"__esModule",{value:!0}),o);var k={};B(k,{default:()=>T});module.exports=h(k);var p=require("react/jsx-runtime"),D=require("./ProductBenefitsTabs/index.js"),l=e(require("./ProductHighlight/index.js")),a=e(require("./ProductFreeGift/index.js")),c=e(require("./ProductOptions/index.js")),u=e(require("./ProductBundle/index.js")),s=e(require("./BenefitsTab.js"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"tablet:px-8 laptop:px-16 desktop:px-0 flex flex-col gap-12 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
+"use strict";var n=Object.create;var e=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)e(o,r,{get:t[r],enumerable:!0})},f=(o,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&e(o,i,{get:()=>t[i],enumerable:!(m=x(t,i))||m.enumerable});return o};var d=(o,t,r)=>(r=o!=null?n(b(o)):{},f(t||!o||!o.__esModule?e(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>f(e({},"__esModule",{value:!0}),o);var y={};B(y,{default:()=>T});module.exports=h(y);var p=require("react/jsx-runtime"),F=require("./ProductBenefitsTabs/index.js"),l=d(require("./ProductHighlight/index.js")),a=d(require("./ProductFreeGift/index.js")),c=d(require("./ProductOptions/index.js")),u=d(require("./ProductBundle/index.js")),s=d(require("./BenefitsTab.js"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
-  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab.js'\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"tablet:px-8 laptop:px-16 desktop:px-0 flex flex-col gap-12 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BATJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,+BAExB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
+  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab.js'\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BATJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,+BAExB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,oEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
   "names": ["ProductDetail_exports", "__export", "ProductDetail_default", "__toCommonJS", "import_jsx_runtime", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductOptions", "import_ProductBundle", "import_BenefitsTab", "ProductDetail", "props", "BenefitsTab", "ProductHighlight", "ProductOptions", "ProductFreeGift", "ProductBundle"]
 }

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

@@ -1,2 +1,2 @@
-"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"),P=require("../../../../../components/index.js"),a=require("react"),x=require("swiper/react"),m=require("swiper/modules"),G=require("../../../../../helpers/index.js"),E=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:l,variant:o,selectedOptions:y}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:l,variant:o}),[b,w]=(0,a.useState)(null),C=(0,a.useRef)(null),f=o?.metafields?.component?.custom_media_list;let s,h,I,N;f&&f?.available?(s=f?.product||[],h=f?.scenarios||[],I=f?.keyFeatures||[],N=f?.video||[]):(s=r?.productList,h=r?.sceneList,I=r?.keyFeaturesList,N=r?.videoList);const u=(0,a.useMemo)(()=>[...s,...h,...N],[s,h,N]),g={productList:s,sceneList:h,keyFeaturesList:I,videoList:N},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=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)},[o?.payload,g,l?.payload]),[v,n]=(0,a.useState)(i?.[0]),[p,A]=(0,a.useState)(0),[M,S]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const c=(p+1)%i.length;A(c),n(i[c]),S(0)},[p,i]),V=(0,a.useCallback)(()=>{const c=p===0?i.length-1:p-1;A(c),n(i[c]);const k=i[c]?.galleries||[];S(k.length-1)},[p,i]);(0,a.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(p)})},[p]),(0,a.useEffect)(()=>{n(i[0]),A(0)},[o?.id]);const te=(c,k)=>{switch(c?.galleryTabType){case E.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case E.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case E.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case E.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: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:C,galleryTabs:i,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:A,setTargetSlideIndex:S})]})})},ue=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:y,setActiveGalleryTab:r,setActiveTabIndex:b,setTargetSlideIndex:w}=t,{product:C}=(0,$.useBizProductContext)(),f=(0,a.useRef)(null),s=(0,a.useRef)(new Map),h=(0,a.useCallback)(u=>{if(f.current){const g=f.current,i=u.currentTarget,v=i.offsetLeft-g.offsetWidth/2+i.offsetWidth/2;g.scrollTo({left:v,behavior:"smooth"})}},[]),I=(0,a.useCallback)((u,g,i)=>{r(g),b(i),w(0),h(u)},[r,b,w,h]),N=(0,a.useCallback)(u=>{if(f.current&&o[u]){const g=f.current,i=o[u],v=s.current.get(i.tabValue);if(v){const n=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:n,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:N})),(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:o?.map((u,g)=>(0,e.jsx)(L.Trigger,{ref:i=>{i?s.current.set(u.tabValue,i):s.current.delete(u.tabValue)},className:(0,G.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(i,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,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:y}=(0,j.useAiuiContext)(),{variant:r,totalSavings:b}=(0,$.useBizProductContext)(),w=(0,a.useRef)(null),[C,f]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),I=(0,a.useRef)(null),[N,u]=(0,a.useState)(!1),g=(0,a.useMemo)(()=>{if(t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,E.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),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)(x.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: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)(x.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)(P.Picture,{source:S,alt:n?.image?.altText,className:(0,G.cn)("h-full",g),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!b&&!t.index&&(0,e.jsx)(P.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:o})} ${y?.off}`}),(0,e.jsx)("div",{className:(0,G.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)(O,{className:(0,G.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,G.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,G.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)(x.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)(x.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(P.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)(P.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)(x.Swiper,{modules:[m.Autoplay],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:(0,e.jsx)(x.SwiperSlide,{children:(0,e.jsx)(P.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[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)(x.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(b,w)=>{b.isBeginning&&b.swipeDirection==="prev"?y():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)(x.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,G.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)(O,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,G.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);
+"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"),L=require("../../../../../components/index.js"),a=require("react"),x=require("swiper/react"),m=require("swiper/modules"),N=require("../../../../../helpers/index.js"),P=require("./types.js"),k=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:l,variant:o,selectedOptions:y}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:l,variant:o}),[b,w]=(0,a.useState)(null),C=(0,a.useRef)(null),f=o?.metafields?.component?.custom_media_list;let s,h,I,E;f&&f?.available?(s=f?.product||[],h=f?.scenarios||[],I=f?.keyFeatures||[],E=f?.video||[]):(s=r?.productList,h=r?.sceneList,I=r?.keyFeaturesList,E=r?.videoList);const u=(0,a.useMemo)(()=>[...s,...h,...E],[s,h,E]),g={productList:s,sceneList:h,keyFeaturesList:I,videoList:E},i=(0,a.useMemo)(()=>{const c=l?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],G=o?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=G?.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)},[o?.payload,g,l?.payload]),[v,n]=(0,a.useState)(i?.[0]),[p,A]=(0,a.useState)(0),[M,S]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const c=(p+1)%i.length;A(c),n(i[c]),S(0)},[p,i]),V=(0,a.useCallback)(()=>{const c=p===0?i.length-1:p-1;A(c),n(i[c]);const G=i[c]?.galleries||[];S(G.length-1)},[p,i]);(0,a.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(p)})},[p]),(0,a.useEffect)(()=>{n(i[0]),A(0)},[o?.id]);const te=(c,G)=>{switch(c?.galleryTabType){case P.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:G,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:G,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:G,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)(k.Root,{className:"relative",value:v?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((c,G)=>(0,e.jsx)(k.Content,{className:"h-full",value:c.tabValue,children:te(c,G)},c.tabValue))}),(0,e.jsx)(ue,{ref:C,galleryTabs:i,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:A,setTargetSlideIndex:S})]})})},ue=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:y,setActiveGalleryTab:r,setActiveTabIndex:b,setTargetSlideIndex:w}=t,{product:C}=(0,$.useBizProductContext)(),f=(0,a.useRef)(null),s=(0,a.useRef)(new Map),h=(0,a.useCallback)(u=>{if(f.current){const g=f.current,i=u.currentTarget,v=i.offsetLeft-g.offsetWidth/2+i.offsetWidth/2;g.scrollTo({left:v,behavior:"smooth"})}},[]),I=(0,a.useCallback)((u,g,i)=>{r(g),b(i),w(0),h(u)},[r,b,w,h]),E=(0,a.useCallback)(u=>{if(f.current&&o[u]){const g=f.current,i=o[u],v=s.current.get(i.tabValue);if(v){const n=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:n,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:E})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(k.List,{ref:f,className:"laptop:p-0 laptop-md: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,g)=>(0,e.jsx)(k.Trigger,{ref:i=>{i?s.current.set(u.tabValue,i):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===y?.tabValue&&"bg-white"),onClick:i=>I(i,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,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:y}=(0,j.useAiuiContext)(),{variant:r,totalSavings:b}=(0,$.useBizProductContext)(),w=(0,a.useRef)(null),[C,f]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),I=(0,a.useRef)(null),[E,u]=(0,a.useState)(!1),g=(0,a.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]),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)(x.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: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)(x.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)(L.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)(L.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:b,currencyCode:r?.price?.currencyCode,locale:o})} ${y?.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 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,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 laptop-md: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 laptop-md:bottom-[20px] laptop-md: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)(x.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)(x.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(L.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)(L.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)(x.Swiper,{modules:[m.Autoplay],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:(0,e.jsx)(x.SwiperSlide,{children:(0,e.jsx)(L.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[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)(x.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(b,w)=>{b.isBeginning&&b.swipeDirection==="prev"?y():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)(x.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:y,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);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/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              </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"],
-  "mappings": "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",
+  "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] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md: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 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md: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 laptop-md:left-6 laptop-md: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 laptop-md: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 laptop-md: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 laptop-md:bottom-[20px] laptop-md: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              </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"],
+  "mappings": "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",
   "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "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"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var e in t)s(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of r(t))!i.call(o,a)&&a!==e&&s(o,a,{get:()=>t[a],enumerable:!(c=l(t,a))||c.enumerable});return o};var x=o=>m(s({},"__esModule",{value:!0}),o);var R={};k(R,{default:()=>N});module.exports=x(R);var p=require("react/jsx-runtime"),d=require("../../../../components/index.js");const G=({BoxLeftGallery:o,BoxRightDetail:t,BoxBottomSummary:e})=>(0,p.jsxs)("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,p.jsxs)(d.Grid,{className:"desktop:gap-4 lg-desktop:gap-8 gap-8",children:[(0,p.jsx)(d.GridItem,{className:"laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] col-span-12 h-fit",children:o}),(0,p.jsx)(d.GridItem,{className:"desktop:col-start-9 desktop:col-span-4 col-span-12",children:t})]}),e]});var N=G;
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var i=(t,p)=>{for(var a in p)c(t,a,{get:p[a],enumerable:!0})},x=(t,p,a,e)=>{if(p&&typeof p=="object"||typeof p=="function")for(let d of s(p))!r.call(t,d)&&d!==a&&c(t,d,{get:()=>p[d],enumerable:!(e=m(p,d))||e.enumerable});return t};var G=t=>x(c({},"__esModule",{value:!0}),t);var g={};i(g,{default:()=>R});module.exports=G(g);var o=require("react/jsx-runtime"),l=require("../../../../components/index.js");const N=({BoxLeftGallery:t,BoxRightDetail:p,BoxBottomSummary:a})=>(0,o.jsxs)("div",{id:"ipc-product-card",className:"laptop-md:mt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,o.jsxs)(l.Grid,{className:"laptop-md:gap-4 lg-desktop:gap-8 gap-8",children:[(0,o.jsx)(l.GridItem,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:t}),(0,o.jsx)(l.GridItem,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:p})]}),a]});var R=N;
 //# sourceMappingURL=ProductGridBox.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/ProductCard/ProductGridBox.tsx"],
-  "sourcesContent": ["import { Grid, GridItem } from '../../../../components/index.js'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"desktop:gap-4 lg-desktop:gap-8 gap-8\">\n        <GridItem className=\"laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] col-span-12 h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"desktop:col-start-9 desktop:col-span-4 col-span-12\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaM,IAAAI,EAAA,6BAbNC,EAA+B,2CAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,OAMI,QAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,qBAAC,QAAK,UAAU,uCACd,oBAAC,YAAS,UAAU,0GACjB,SAAAF,EACH,KACA,OAAC,YAAS,UAAU,qDAAsD,SAAAC,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOP,EAAQI",
+  "sourcesContent": ["import { Grid, GridItem } from '../../../../components/index.js'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"laptop-md:mt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop-md:gap-4 lg-desktop:gap-8 gap-8\">\n        <GridItem className=\"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaM,IAAAI,EAAA,6BAbNC,EAA+B,2CAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,OAMI,QAAC,OAAI,GAAG,mBAAmB,UAAU,iEACnC,qBAAC,QAAK,UAAU,yCACd,oBAAC,YAAS,UAAU,kHACjB,SAAAF,EACH,KACA,OAAC,YAAS,UAAU,yDAA0D,SAAAC,EAAe,GAC/F,EACCC,GACH,EAIJ,IAAOP,EAAQI",
   "names": ["ProductGridBox_exports", "__export", "ProductGridBox_default", "__toCommonJS", "import_jsx_runtime", "import_components", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary"]
 }