npm - @anker-in/headless-ui - Versions diffs - 1.1.79 → 1.1.80 - Mend

@anker-in/headless-ui 1.1.79 → 1.1.80

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 (161) hide show

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as r}from"react/jsx-runtime";import{Text as l,Picture as N,Checkbox as y}from"../../../../../../components/index.js";import{cn as f}from"../../../../../../helpers/index.js";import{useMemo as P}from"react";import{useBizProductContext as E}from"../../../../BizProductProvider.js";import{formatPrice as G}from"../../../../utils/index.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{withLayout as z}from"../../../../../../shared/Styles.js";const B=()=>{const{locale:u="us"}=w(),{freeGift:x,checkedGift:o,setCheckedGift:d,setCheckedBundle:D,setSavingDetail:b,savingDetail:h,setJoinedRecommendBuyProducts:a,joinedRecommendBuyProducts:s,setAddOrder:c}=E(),{title:g,giftList:n=[],freeLabel:k}=x||{},m=P(()=>n?.filter(e=>e.availableForSale),[n]),v=e=>{o?.id===e.id?(d?.(void 0),b?.({...h,freeGift:0}),a?.({...s,gift:{value:void 0,canOperate:!0}}),c?.(i=>i.filter(p=>p!=="gift"))):(d?.(e),a?.({...s,gift:{value:e,canOperate:!1}}),c?.(i=>[...i.filter(C=>C!=="gift"),"gift"]))};return m?.length?r("div",{className:"ipc-product-detail-free-gift",children:[t(l,{size:3,className:"font-bold leading-[1.2]",html:g}),t("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m.map(e=>r("div",{className:f("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":o?.id===e.id}),children:[t(y,{onCheckedChange:()=>v(e),size:"lg",className:f("rounded-full border-2 border-[#E4E5E6]",{"border-brand":o?.id===e.id}),id:e.id,checked:o?.id===e.id,value:e.id}),r("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[r("div",{className:"flex items-center gap-2",children:[t(N,{source:e.image?.url,className:"size-12 shrink-0"}),t(l,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),r("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[t(l,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:k}),t(l,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:G({amount:e.price.amount,locale:u,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var J=z(B);export{J as default};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as r,Picture as P,Checkbox as E}from"../../../../../../components/index.js";import{cn as f}from"../../../../../../helpers/index.js";import{useMemo as w}from"react";import{useBizProductContext as F}from"../../../../BizProductProvider.js";import{formatPrice as G}from"../../../../utils/index.js";import{useAiuiContext as B}from"../../../../../AiuiProvider/index.js";import{withLayout as D}from"../../../../../../shared/Styles.js";import{useFollowTooltip as T,FollowTooltip as z}from"../../../../hooks/useFollowTooltip.js";const L=()=>{const{locale:u="us"}=B(),{tooltip:x,getTooltipProps:b}=T(),{freeGift:h,checkedGift:l,setCheckedGift:d,setCheckedBundle:O,setSavingDetail:g,savingDetail:k,setJoinedRecommendBuyProducts:a,joinedRecommendBuyProducts:s,setAddOrder:c}=F(),{title:v,giftList:p=[],freeLabel:C}=h||{},n=w(()=>p?.filter(e=>e.availableForSale),[p]),N=e=>{l?.id===e.id?(d?.(void 0),g?.({...k,freeGift:0}),a?.({...s,gift:{value:void 0,canOperate:!0}}),c?.(i=>i.filter(m=>m!=="gift"))):(d?.(e),a?.({...s,gift:{value:e,canOperate:!1}}),c?.(i=>[...i.filter(y=>y!=="gift"),"gift"]))};return n?.length?o("div",{className:"ipc-product-detail-free-gift",children:[t(r,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:v}),t("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:n.map(e=>o("div",{className:f("rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[t(E,{onCheckedChange:()=>N(e),size:"lg",className:f("rounded-full border-2 border-[#E4E5E6]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),o("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-4 lg-desktop:py-6",children:[o("div",{className:"flex items-center gap-2",children:[t(P,{source:e.image?.url,className:"size-12 shrink-0",imgClassName:"h-full"}),t(r,{...b(e.product.title),className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title}),t(z,{...x})]}),o("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[t(r,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold !leading-[1.2]",html:C}),t(r,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through !leading-[1.2]",html:G({amount:e.price.amount,locale:u,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var I=D(L);export{I as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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 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": "AAiEM,cAAAA,EAoBQ,QAAAC,MApBR,oBAjEN,OAAS,QAAAC,EAAM,WAAAC,EAAS,YAAAC,MAAgB,wCACxC,OAAS,MAAAC,MAAU,qCACnB,OAAoB,WAAAC,MAAe,QACnC,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,uCAE/B,OAAS,cAAAC,MAAkB,qCAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIH,EAAe,EACnC,CACJ,SAAAI,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,EAAId,EAAqB,EACnB,CAAE,MAAAe,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,EAAiBnB,EAAQ,IAAMiB,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,OAAKL,GAAgB,OAGnBxB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMoB,EAAO,EAChEtB,EAAC,OAAI,UAAU,uFACZ,SAAAyB,EAAe,IAAIM,GAClB9B,EAAC,OAEC,UAAWI,EAAG,yFAA0F,CACrG,eAAiBS,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,UAAA/B,EAACI,EAAA,CACC,gBAAiB,IAAMuB,EAAoBI,CAAI,EAC/C,KAAK,KACL,UAAW1B,EAAG,yCAA0C,CACtD,eAAgBS,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,EACD9B,EAAC,SAAM,QAAS8B,EAAK,GAAI,UAAU,qEACjC,UAAA9B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQ4B,EAAK,OAAO,IAAK,UAAU,mBAAmB,EAC/D/B,EAACE,EAAA,CACC,UAAU,2EACV,KAAM6B,EAAK,QAAQ,MACrB,GACF,EACA9B,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,6DAA6D,KAAMsB,EAAW,EAC9FxB,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQuB,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAOC,EAAQtB,EAAWC,CAAe",
-  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "withLayout", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift", "ProductFreeGift_default"]
+  "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'\nimport { useFollowTooltip, FollowTooltip } from '../../../../hooks/useFollowTooltip.js'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { tooltip, getTooltipProps } = useFollowTooltip()\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 className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\" 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(\n              'rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold',\n              {\n                ['border-brand']: checkedGift?.id === gift.id,\n              }\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\n              htmlFor={gift.id}\n              className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-4 lg-desktop:py-6\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 shrink-0\" imgClassName=\"h-full\" />\n                <Text\n                  {...getTooltipProps(gift.product.title)}\n                  className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n                  html={gift.product.title}\n                />\n                <FollowTooltip {...tooltip} />\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 !leading-[1.2]\"\n                  html={freeLabel}\n                />\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through !leading-[1.2]\"\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": "AAmEM,cAAAA,EA0BQ,QAAAC,MA1BR,oBAnEN,OAAS,QAAAC,EAAM,WAAAC,EAAS,YAAAC,MAAgB,wCACxC,OAAS,MAAAC,MAAU,qCACnB,OAAoB,WAAAC,MAAe,QACnC,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,uCAE/B,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,oBAAAC,EAAkB,iBAAAC,MAAqB,wCAEhD,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIL,EAAe,EACnC,CAAE,QAAAM,EAAS,gBAAAC,CAAgB,EAAIL,EAAiB,EAChD,CACJ,SAAAM,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,EAAIlB,EAAqB,EACnB,CAAE,MAAAmB,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,EAAiBvB,EAAQ,IAAMqB,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,OAGnB5B,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,UAAU,6DAA6D,KAAMwB,EAAO,EAC1F1B,EAAC,OAAI,UAAU,uFACZ,SAAA6B,EAAe,IAAIM,GAClBlC,EAAC,OAEC,UAAWI,EACT,mHACA,CACG,eAAiBa,GAAa,KAAOiB,EAAK,EAC7C,CACF,EAEA,UAAAnC,EAACI,EAAA,CACC,gBAAiB,IAAM2B,EAAoBI,CAAI,EAC/C,KAAK,KACL,UAAW9B,EAAG,yCAA0C,CACtD,eAAgBa,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,EACDlC,EAAC,SACC,QAASkC,EAAK,GACd,UAAU,qFAEV,UAAAlC,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQgC,EAAK,OAAO,IAAK,UAAU,mBAAmB,aAAa,SAAS,EACrFnC,EAACE,EAAA,CACE,GAAGc,EAAgBmB,EAAK,QAAQ,KAAK,EACtC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,EACAnC,EAACY,EAAA,CAAe,GAAGG,EAAS,GAC9B,EACAd,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CACC,UAAU,4EACV,KAAM0B,EACR,EACA5B,EAACE,EAAA,CACC,UAAU,wGACV,KAAMM,EAAY,CAChB,OAAQ2B,EAAK,MAAM,OACnB,OAAArB,EACA,aAAcqB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA7CKA,EAAK,EA8CZ,CACD,EACH,GACF,EAzDkC,IA2DtC,EAEA,IAAOC,EAAQ1B,EAAWG,CAAe",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "withLayout", "useFollowTooltip", "FollowTooltip", "ProductFreeGift", "locale", "tooltip", "getTooltipProps", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift", "ProductFreeGift_default"]
 }

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

@@ -1,6 +1,6 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Text as u,Picture as k,Button as w,Dialog as y,DialogContent as N,DialogTrigger as C}from"../../../../../../components/index.js";import{Content as f,List as T,Root as E,Trigger as D}from"@radix-ui/react-tabs";import{useCallback as v,useEffect as A,useMemo as _,useRef as h,useState as x}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as P}from"../../../../BizProductProvider.js";import{withLayout as R}from"../../../../../../shared/Styles.js";import{gaTrack as H}from"../../../../../../shared/track.js";const I=()=>{const{product:i,variant:a}=P(),[g,p]=x(!1),l=_(()=>i?.payload?.components?.find(o=>o.componentKey==="ProductHighlight")?.data||{},[i?.payload]),[r,n]=x(l?.ksp?.[0]),t=v(o=>{H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:l?.title||"",button_name:o||l?.view||""}})},[l?.title,l?.view,a.sku]);return Reflect.ownKeys(l).length?s("div",{className:"ipc-product-detail-highlight",children:[s("div",{className:"flex items-center justify-between",children:[l?.title&&e(u,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),s(y,{open:g,onOpenChange:p,children:[e(C,{asChild:!0,children:e(w,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>t(),children:l?.view})}),e(z,{ksp:l?.ksp||[],activeKspItem:r,setActiveKspItem:n,gaTrackEvent:t})]})]}),e("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(o=>e("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:e(u,{size:3,onClick:()=>{n(o),p(!0),t(o?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]",html:o?.title})},o?.title))})]}):null},z=({ksp:i,activeKspItem:a,setActiveKspItem:g,gaTrackEvent:p})=>{const l=h([]),r=h(null),n=v(t=>{const o=i.findIndex(d=>d.title===t?.title),c=l.current[o];if(c&&r.current){const d=r.current,m=c,b=m.offsetLeft-d.offsetWidth/2+m.offsetWidth/2;d.scrollTo({left:b,behavior:"smooth"})}},[i]);return A(()=>{a&&setTimeout(()=>{n(a)},100)},[n,a]),s(N,{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:[e("style",{children:`
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Text as g,Picture as w,Button as k,Dialog as y,DialogContent as N,DialogTrigger as C}from"../../../../../../components/index.js";import{Content as f,List as T,Root as D,Trigger as E}from"@radix-ui/react-tabs";import{useCallback as x,useEffect as _,useMemo as A,useRef as v,useState as h}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as P}from"../../../../BizProductProvider.js";import{withLayout as R}from"../../../../../../shared/Styles.js";import{gaTrack as H}from"../../../../../../shared/track.js";const I=()=>{const{product:i,variant:a}=P(),[u,p]=h(!1),l=A(()=>i?.payload?.components?.find(o=>o.componentKey==="ProductHighlight")?.data||{},[i?.payload]),[r,n]=h(l?.ksp?.[0]),t=x(o=>{H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:l?.title||"",button_name:o||l?.view||""}})},[l?.title,l?.view,a.sku]);return Reflect.ownKeys(l).length?s("div",{className:"ipc-product-detail-highlight",children:[s("div",{className:"flex items-center justify-between",children:[l?.title&&e(g,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:l?.title}),s(y,{open:u,onOpenChange:p,children:[e(C,{asChild:!0,children:e(k,{variant:"link",className:"!p-0 text-[14px] lg-desktop:text-[16px] font-bold",onClick:()=>t(),children:l?.view})}),e(z,{ksp:l?.ksp||[],activeKspItem:r,setActiveKspItem:n,gaTrackEvent:t})]})]}),e("ul",{className:"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5",children:l?.ksp?.map(o=>e("li",{className:"product-highlight-item cursor-pointer",children:e(g,{size:3,onClick:()=>{n(o),p(!0),t(o?.title)},className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]",html:o?.title})},o?.title))})]}):null},z=({ksp:i,activeKspItem:a,setActiveKspItem:u,gaTrackEvent:p})=>{const l=v([]),r=v(null),n=x(t=>{const o=i.findIndex(d=>d.title===t?.title),c=l.current[o];if(c&&r.current){const d=r.current,m=c,b=m.offsetLeft-d.offsetWidth/2+m.offsetWidth/2;d.scrollTo({left:b,behavior:"smooth"})}},[i]);return _(()=>{a&&setTimeout(()=>{n(a)},100)},[n,a]),s(N,{className:"tablet:max-w-[90vw] tablet: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:[e("style",{children:`
         .dialog-close-icon {
           color: ${a?.closeColor||"#1D1D1F"};
         }
-      `}),s(E,{value:a?.title,className:"w-full overflow-hidden",children:[i?.map(t=>e(f,{value:t.title,children:e(k,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),s("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:r,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:i?.map((t,o)=>e(D,{ref:c=>{c&&(l.current[o]=c)},className:L("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===a?.title&&"bg-white"),onClick:()=>{n(t),g(t),p(t?.title)},value:t.title,children:e(u,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},o+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:i?.map((t,o)=>e(f,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:t.description},o+t.title))})]})]})]})};var W=R(I);export{W as default};
+      `}),s(D,{value:a?.title,className:"w-full overflow-hidden",children:[i?.map(t=>e(f,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),s("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:r,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:i?.map((t,o)=>e(E,{ref:c=>{c&&(l.current[o]=c)},className:L("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===a?.title&&"bg-white"),onClick:()=>{n(t),u(t),p(t?.title)},value:t.title,children:e(g,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},o+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:i?.map((t,o)=>e(f,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:t.description},o+t.title))})]})]})]})};var F=R(I);export{F as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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  if (!Reflect.ownKeys(productHighlightData).length) return null\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-[#080A0F]\"\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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",
+  "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  if (!Reflect.ownKeys(productHighlightData).length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text\n            className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n            html={productHighlightData?.title}\n          />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button\n              variant=\"link\"\n              className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n              onClick={() => gaTrackEvent()}\n            >\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      <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n              html={item?.title}\n            />\n          </li>\n        ))}\n      </ul>\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-[90vw] tablet: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": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "withLayout", "gaTrack", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";import{Text as m,Picture as N}from"../../../../../../components/index.js";import{cn as l}from"../../../../../../helpers/index.js";import{useState as h,useMemo as b}from"react";import{useBizProductContext as w}from"../../../../BizProductProvider.js";import{useAiuiContext as k}from"../../../../../AiuiProvider/index.js";import{handle as _}from"../../../../utils/helper.js";import{withLayout as C}from"../../../../../../shared/Styles.js";const E=()=>{const{product:r,selectedOptions:n,setSelectedOptions:c,setJoinedRecommendBuyProducts:u}=w(),{storeDomain:p}=k(),[f,v]=h({}),g=b(()=>r?.payload?.components?.find(e=>e.componentKey==="ProductOptions")?.data||{},[r?.payload]);return r.options.length?o("div",{className:"flex flex-col gap-12",children:r.options.map(e=>{const y=e.name.toLowerCase();if(["color","colour","couleur"].some(t=>y.includes(t)))return d("div",{className:"ipc-product-detail-options",children:[o(m,{as:"p",size:3,className:"font-bold leading-[1.2]",html:g?.selectColor+n[e.name]}),o("div",{className:"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-4",children:e.values.map(({label:t},s)=>{const a=`https://${p}/cdn/shop/files/${_(t)}.png`;return d("div",{className:"ipc-product-detail-options-value relative",children:[o("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{c(i=>({...i,[e.name]:t})),u?.({gift:void 0,bundle:void 0})},className:l("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":n[e.name]===t}),children:!f[t]&&o(P,{children:o(N,{className:"w-full",source:a,onError:({currentTarget:i})=>{i.onerror=null,v(x=>({...x,[t]:!0}))}})})}),o("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},t+s)})})]},e.id);{const t=e.name.charAt(0).toUpperCase()+e.name.slice(1);return d("div",{className:"ipc-product-detail-options",children:[o(m,{as:"p",size:3,className:"font-bold",html:t}),o("div",{className:"mt-4 flex items-center gap-4",children:e.values.map(({label:s})=>o("button",{onClick:()=>{c(a=>({...a,[e.name]:s}))},className:l("rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold",{"border-brand":n[e.name]===s}),children:s},s))})]},e.id)}})}):null};var S=C(E);export{S as default};
+import{Fragment as P,jsx as o,jsxs as i}from"react/jsx-runtime";import{Text as c,Picture as N}from"../../../../../../components/index.js";import{cn as m}from"../../../../../../helpers/index.js";import{useState as h,useMemo as k}from"react";import{useBizProductContext as b}from"../../../../BizProductProvider.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{handle as _}from"../../../../utils/helper.js";import{withLayout as C}from"../../../../../../shared/Styles.js";const E=()=>{const{product:r,selectedOptions:n,setSelectedOptions:l,setJoinedRecommendBuyProducts:p}=b(),{storeDomain:u}=w(),[f,x]=h({}),g=k(()=>r?.payload?.components?.find(e=>e.componentKey==="ProductOptions")?.data||{},[r?.payload]);return r.options.length?o("div",{className:"flex flex-col gap-12",children:r.options.map(e=>{const v=e.name.toLowerCase();if(["color","colour","couleur"].some(t=>v.includes(t)))return i("div",{className:"ipc-product-detail-options",children:[o(c,{as:"p",className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:g?.selectColor+n[e.name]}),o("div",{className:"lg-desktop:mt-5 ml-1 lg-desktop:mt-4 mt-3 flex items-center gap-4",children:e.values.map(({label:t},s)=>{const a=`https://${u}/cdn/shop/files/${_(t)}.png`;return i("div",{className:"ipc-product-detail-options-value relative",children:[o("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{l(d=>({...d,[e.name]:t})),p?.({gift:void 0,bundle:void 0})},className:m("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":n[e.name]===t}),children:!f[t]&&o(P,{children:o(N,{className:"w-full",source:a,onError:({currentTarget:d})=>{d.onerror=null,x(y=>({...y,[t]:!0}))}})})}),o("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},t+s)})})]},e.id);{const t=e.name.charAt(0).toUpperCase()+e.name.slice(1);return i("div",{className:"ipc-product-detail-options",children:[o(c,{as:"p",size:3,className:"font-bold text-[14px] leading-[1.2] lg-desktop:text-[16px]",html:t}),o("div",{className:"lg-desktop:mt-4 mt-3 flex items-center gap-4",children:e.values.map(({label:s})=>o("button",{onClick:()=>{l(a=>({...a,[e.name]:s}))},className:m("rounded-box w-1/2 border-2 text-[14px] laptop:text-[16px] border-[#E4E5E6] px-4 py-6 text-left font-bold",{"border-brand":n[e.name]===s}),children:s},s))})]},e.id)}})}):null};var S=C(E);export{S as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
-  "sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\n\n  if (!product.options.length) return null\n\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                size={3}\n                className=\"font-bold leading-[1.2]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"ipc-product-detail-options-value relative\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={capitalizedName} />\n              <div className=\"mt-4 flex items-center gap-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                    }}\n                    className={cn('rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\n\n  if (!product.options.length) return null\n\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 lg-desktop:mt-4 mt-3 flex items-center gap-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"ipc-product-detail-options-value relative\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                size={3}\n                className=\"font-bold text-[14px] leading-[1.2] lg-desktop:text-[16px]\"\n                html={capitalizedName}\n              />\n              <div className=\"lg-desktop:mt-4 mt-3 flex items-center gap-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                    }}\n                    className={cn('rounded-box w-1/2 border-2 text-[14px] laptop:text-[16px] border-[#E4E5E6] px-4 py-6 text-left font-bold', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Text", "Picture", "cn", "useState", "useMemo", "useBizProductContext", "useAiuiContext", "handle", "withLayout", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "capitalizedName", "ProductOptions_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n  Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n            {copyWriting?.compare}\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n            </GridItem>\n            <GridItem span={1}>\n              <Text\n                as=\"div\"\n                className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n                html={compareData.currentProductCompareData?.shortName || product.title}\n              ></Text>\n            </GridItem>\n            {selectedProductHandle && (\n              <GridItem span={1}>\n                <Select\n                  className=\"rounded-btn h-[48px] px-4\"\n                  value={selectedProductHandle}\n                  onChange={value => {\n                    setSelectedProductHandle(value)\n                  }}\n                  list={compareData.options!}\n                />\n              </GridItem>\n            )}\n          </Grid>\n          <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              return (\n                <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                  <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              const variant = product.variants[0]\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {/* Price with original price */}\n                  <div className=\"flex flex-col gap-[8px]\">\n                    {variant.price.amount < 9999999 && (\n                      <div className=\"flex items-center gap-[8px]\">\n                        {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n                        <div className=\"flex items-center gap-[6px]\">\n                          <span className=\"text-[18px] font-bold\">\n                            {formatPrice({\n                              locale,\n                              amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n                              currencyCode: variant.price.currencyCode,\n                            })}\n                          </span>\n                          {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n                            <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n                              {formatPrice({\n                                locale,\n                                amount: variant.price.amount,\n                                currencyCode: variant.price.currencyCode,\n                              })}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    )}\n                    {/* <Button variant=\"primary\" size=\"lg\">\n                    {copyWriting?.shopNow || 'Shop Now'}\n                  </Button> */}\n                  </div>\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n            </GridItem>\n            {products.map((product, productIndex) => {\n              const colors = product.options\n                ?.find(option =>\n                  ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n                )\n                ?.values.map(value => value.label)\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-4\">\n                      {colors.map(label => (\n                        <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n                      ))}\n                    </div>\n                  )}\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n            {compareData.specificationKeys?.map((key: string) => {\n              return (\n                <GridItem\n                  span={12}\n                  className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n                  key={key}\n                >\n                  {/* Detail value */}\n                  <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n                  {/* Product Values */}\n                  {products.map((product, productIndex) => {\n                    const value =\n                      product.metafields?.global?.specifications?.find(\n                        (specification: { key: string }) => specification?.key === key\n                      )?.value || ''\n                    let text = value\n                    switch (text.trim().toLowerCase()) {\n                      case 'true':\n                        text = '\u2714\uFE0F'\n                        break\n                      case 'false':\n                        text = '\u274C'\n                        break\n                      default:\n                        break\n                    }\n                    return (\n                      <div key={productIndex} className=\"flex items-center\">\n                        {/* Other details */}\n                        <Text className=\"text-[16px] font-bold text-[#1D1D1F]\" html={text}></Text>\n                      </div>\n                    )\n                  })}\n                </GridItem>\n              )\n            })}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
-  "mappings": "AAqCM,cAAAA,EAWI,QAAAC,MAXJ,oBArCN,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MAEK,wCACP,OAAS,wBAAAC,MAA4B,oCAErC,OAAOC,MAAY,cACnB,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,sBAAAC,MAA0B,0BAEnC,MAAMC,EAAe,IAAM,CACzB,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIL,EAAe,EAChD,CAAE,YAAAM,EAAa,QAAAC,CAAQ,EAAIT,EAAqB,EAChD,CAACU,EAAuBC,CAAwB,EAAIpB,EAAiB,EAE3ED,EAAU,IAAM,CACdqB,EAAyBH,GAAa,qBAAqB,CAAC,GAAG,MAAM,CACvE,EAAG,CAACA,GAAa,oBAAoB,CAAC,EAEtC,MAAMI,EAAW,CACfJ,GAAa,2BAA4B,QACzCA,GAAa,qBAAqB,KAAKC,GAAWA,EAAQ,SAAWC,CAAqB,GAAG,OAC/F,EAAE,OAAO,OAAO,EAEhB,OAAKF,GAAa,kBAGhBnB,EAACG,EAAA,CACC,UAAAJ,EAACK,EAAA,CAAc,UAAU,oCAAqC,SAAAc,GAAa,QAAQ,EACnFlB,EAACK,EAAA,CACC,iBAAiB,UACjB,UAAU,wPAEV,UAAAN,EAACO,EAAA,CAAa,UAAU,qDACtB,SAAAP,EAACQ,EAAA,CAAY,UAAU,qDACpB,SAAAW,GAAa,QAChB,EACF,EACAlB,EAAC,OAAI,UAAU,uDACb,UAAAA,EAACQ,EAAA,CAAK,UAAU,uDACd,UAAAT,EAACU,EAAA,CAAS,KAAM,EACd,SAAAV,EAAC,OAAI,UAAU,uCAAwC,SAAAmB,GAAa,SAAW,UAAU,EAC3F,EACAnB,EAACU,EAAA,CAAS,KAAM,EACd,SAAAV,EAACW,EAAA,CACC,GAAG,MACH,UAAU,mGACV,KAAMS,EAAY,2BAA2B,WAAaC,EAAQ,MACnE,EACH,EACCC,GACCtB,EAACU,EAAA,CAAS,KAAM,EACd,SAAAV,EAACa,EAAA,CACC,UAAU,4BACV,MAAOS,EACP,SAAUG,GAAS,CACjBF,EAAyBE,CAAK,CAChC,EACA,KAAML,EAAY,QACpB,EACF,GAEJ,EACAnB,EAACQ,EAAA,CAAK,UAAU,4CACd,UAAAT,EAACU,EAAA,CAAS,KAAM,EAAG,EAClBc,EAAS,IAAI,CAACH,EAASK,IAEpB1B,EAACU,EAAA,CAA4B,KAAM,EAAG,UAAU,oBAC9C,SAAAV,EAAC,OAAI,IAAKqB,EAAQ,OAAO,CAAC,EAAE,IAAK,IAAKA,EAAQ,MAAO,UAAU,eAAe,KAAK,eAAe,GADrFK,CAEf,CAEH,GACH,EACAzB,EAACQ,EAAA,CAAK,UAAU,iFACd,UAAAT,EAACU,EAAA,CAAS,KAAM,EAAG,EAClBc,EAAS,IAAI,CAACH,EAASK,IAAiB,CACvC,MAAMC,EAAUN,EAAQ,SAAS,CAAC,EAClC,OACErB,EAACU,EAAA,CAAS,KAAM,EAAsB,UAAU,cAE9C,SAAAV,EAAC,OAAI,UAAU,0BACZ,SAAA2B,EAAQ,MAAM,OAAS,SACtB3B,EAAC,OAAI,UAAU,8BAEb,SAAAC,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,QAAK,UAAU,wBACb,SAAAe,EAAY,CACX,OAAAG,EACA,OAAQS,GAAS,UAAU,CAAC,GAAG,sBAAwBA,EAAQ,MAAM,OACrE,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,EACC,OAAOA,GAAS,UAAU,CAAC,GAAG,oBAAoB,EAAI,GACrD3B,EAAC,QAAK,UAAU,oDACb,SAAAe,EAAY,CACX,OAAAG,EACA,OAAQS,EAAQ,MAAM,OACtB,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,GAEJ,EACF,EAKJ,GA7BsBD,CA8BxB,CAEJ,CAAC,GACH,EACAzB,EAACQ,EAAA,CAAK,UAAU,iFACd,UAAAT,EAACU,EAAA,CAAS,KAAM,EACd,SAAAV,EAAC,OAAI,UAAU,uCAAwC,SAAAmB,GAAa,OAAS,QAAQ,EACvF,EACCK,EAAS,IAAI,CAACH,EAASK,IAAiB,CACvC,MAAME,EAASP,EAAQ,SACnB,KAAKQ,GACL,CAAC,QAAS,SAAU,SAAS,EAAE,KAAKC,GAAaD,EAAO,KAAK,YAAY,EAAE,SAASC,CAAS,CAAC,CAChG,GACE,OAAO,IAAIL,GAASA,EAAM,KAAK,EACnC,OACEzB,EAACU,EAAA,CAAS,KAAM,EAAsB,UAAU,cAC7C,SAAAkB,GAAQ,QACP5B,EAAC,OAAI,UAAU,0BACZ,SAAA4B,EAAO,IAAIG,GACV/B,EAACgB,EAAA,CAA+B,MAAOe,EAAO,UAAU,UAA/BA,CAAwC,CAClE,EACH,GANoBL,CAQxB,CAEJ,CAAC,GACH,EACA1B,EAACS,EAAA,CAAK,UAAU,yEACb,SAAAW,EAAY,mBAAmB,IAAKY,GAEjC/B,EAACS,EAAA,CACC,KAAM,GACN,UAAU,mGAIV,UAAAV,EAAC,OAAI,UAAU,uCAAwC,SAAAgC,EAAI,EAE1DR,EAAS,IAAI,CAACH,EAASK,IAAiB,CAKvC,IAAIO,EAHFZ,EAAQ,YAAY,QAAQ,gBAAgB,KACzCa,GAAmCA,GAAe,MAAQF,CAC7D,GAAG,OAAS,GAEd,OAAQC,EAAK,KAAK,EAAE,YAAY,EAAG,CACjC,IAAK,OACHA,EAAO,eACP,MACF,IAAK,QACHA,EAAO,SACP,MACF,QACE,KACJ,CACA,OACEjC,EAAC,OAAuB,UAAU,oBAEhC,SAAAA,EAACW,EAAA,CAAK,UAAU,uCAAuC,KAAMsB,EAAM,GAF3DP,CAGV,CAEJ,CAAC,IA3BIM,CA4BP,CAEH,EACH,GACF,GACF,GACF,EAvJ0C,IAyJ9C,EAEA,IAAOG,EAAQlB",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n  Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box bg-white [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n            {copyWriting?.compare}\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n            </GridItem>\n            <GridItem span={1}>\n              <Text\n                as=\"div\"\n                className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n                html={compareData.currentProductCompareData?.shortName || product.title}\n              ></Text>\n            </GridItem>\n            {selectedProductHandle && (\n              <GridItem span={1}>\n                <Select\n                  className=\"rounded-btn h-[48px] px-4\"\n                  value={selectedProductHandle}\n                  onChange={value => {\n                    setSelectedProductHandle(value)\n                  }}\n                  list={compareData.options!}\n                />\n              </GridItem>\n            )}\n          </Grid>\n          <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              return (\n                <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                  <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              const variant = product.variants[0]\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {/* Price with original price */}\n                  <div className=\"flex flex-col gap-[8px]\">\n                    {variant.price.amount < 9999999 && (\n                      <div className=\"flex items-center gap-[8px]\">\n                        {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n                        <div className=\"flex items-center gap-[6px]\">\n                          <span className=\"text-[18px] font-bold\">\n                            {formatPrice({\n                              locale,\n                              amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n                              currencyCode: variant.price.currencyCode,\n                            })}\n                          </span>\n                          {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n                            <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n                              {formatPrice({\n                                locale,\n                                amount: variant.price.amount,\n                                currencyCode: variant.price.currencyCode,\n                              })}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    )}\n                    {/* <Button variant=\"primary\" size=\"lg\">\n                    {copyWriting?.shopNow || 'Shop Now'}\n                  </Button> */}\n                  </div>\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n            </GridItem>\n            {products.map((product, productIndex) => {\n              const colors = product.options\n                ?.find(option =>\n                  ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n                )\n                ?.values.map(value => value.label)\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-4\">\n                      {colors.map(label => (\n                        <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n                      ))}\n                    </div>\n                  )}\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n            {compareData.specificationKeys?.map((key: string) => {\n              return (\n                <GridItem\n                  span={12}\n                  className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n                  key={key}\n                >\n                  {/* Detail value */}\n                  <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n                  {/* Product Values */}\n                  {products.map((product, productIndex) => {\n                    const value =\n                      product.metafields?.global?.specifications?.find(\n                        (specification: { key: string }) => specification?.key === key\n                      )?.value || ''\n                    let text = value\n                    switch (text.trim().toLowerCase()) {\n                      case 'true':\n                        text = '\u2714\uFE0F'\n                        break\n                      case 'false':\n                        text = '\u274C'\n                        break\n                      default:\n                        break\n                    }\n                    return (\n                      <div key={productIndex} className=\"flex items-center\">\n                        {/* Other details */}\n                        <Text className=\"text-[16px] font-bold text-[#1D1D1F]\" html={text}></Text>\n                      </div>\n                    )\n                  })}\n                </GridItem>\n              )\n            })}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:p-0 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 overflow-y-auto px-4\">\n          <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n            {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n              <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n                <Text className=\"text-[18px] font-bold text-[#1D1D1F]\">{key}</Text>\n                <Text\n                  className=\"text-[18px] font-bold text-[#86868C]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </GridItem>\n            ))}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAmBM,cAAAA,EAWQ,QAAAC,MAXR,oBAnBN,OAAS,kBAAAC,MAAsB,uCAC/B,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EACnC,CAAE,YAAAG,CAAY,EAAIZ,EAAe,EAEvC,OACED,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAc,UAAU,oCAAqC,SAAAU,GAAa,MAAM,EACjFb,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,wQAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,qDACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAO,GAAa,MAAM,EAClG,EACAd,EAAC,OAAI,UAAU,mCACb,SAAAA,EAACQ,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,IAC7Df,EAACQ,EAAA,CAAS,KAAM,EAAa,UAAU,sBACrC,UAAAT,EAACU,EAAA,CAAK,UAAU,uCAAwC,SAAAK,EAAI,EAC5Df,EAACU,EAAA,CACC,UAAU,uCACV,KACEM,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,IAXsBD,CAYxB,CACD,EACH,EACF,GACF,GACF,CAEJ",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box bg-white [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:p-0 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 overflow-y-auto px-4\">\n          <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n            {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n              <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n                <Text className=\"text-[18px] font-bold text-[#1D1D1F]\">{key}</Text>\n                <Text\n                  className=\"text-[18px] font-bold text-[#86868C]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </GridItem>\n            ))}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAmBM,cAAAA,EAWQ,QAAAC,MAXR,oBAnBN,OAAS,kBAAAC,MAAsB,uCAC/B,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EACnC,CAAE,YAAAG,CAAY,EAAIZ,EAAe,EAEvC,OACED,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAc,UAAU,oCAAqC,SAAAU,GAAa,MAAM,EACjFb,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,iRAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,qDACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAO,GAAa,MAAM,EAClG,EACAd,EAAC,OAAI,UAAU,mCACb,SAAAA,EAACQ,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,IAC7Df,EAACQ,EAAA,CAAS,KAAM,EAAa,UAAU,sBACrC,UAAAT,EAACU,EAAA,CAAK,UAAU,uCAAwC,SAAAK,EAAI,EAC5Df,EAACU,EAAA,CACC,UAAU,uCACV,KACEM,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,IAXsBD,CAYxB,CACD,EACH,EACF,GACF,GACF,CAEJ",
   "names": ["jsx", "jsxs", "useAiuiContext", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "copyWriting", "key", "value"]
 }

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

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