@anker-in/headless-ui 1.1.79 → 1.1.81

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

@@ -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": "AAuCU,cAAAA,EAKF,QAAAC,MALE,oBAvCV,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAQ,UAAAC,EAAQ,iBAAAC,EAAe,iBAAAC,MAAqB,wCAC5E,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,UAAAC,EAAQ,YAAAC,MAAgB,QAClE,OAAS,MAAAC,MAAU,qCACnB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,WAAAC,MAAe,oCAExB,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAIL,EAAqB,EAC5C,CAACM,EAAMC,CAAO,EAAIT,EAAS,EAAK,EAEhCU,EAAuBZ,EAAQ,IAC5BQ,GAAS,SAAS,YAAY,KAAMK,GAAcA,EAAK,eAAiB,kBAAkB,GAAG,MAAQ,CAAC,EAC5G,CAACL,GAAS,OAAO,CAAC,EAEf,CAACM,EAAeC,CAAgB,EAAIb,EAASU,GAAsB,MAAM,CAAC,CAAC,EAE3EI,EAAelB,EAClBmB,GAAwB,CACvBX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAY,sBAAsBG,EAAQ,GAAG,GAC7C,SAAUG,GAAsB,OAAS,GACzC,YAAaK,GAAcL,GAAsB,MAAQ,EAC3D,CACF,CAAC,CACH,EACA,CAACA,GAAsB,MAAOA,GAAsB,KAAMH,EAAQ,GAAG,CACvE,EAEA,OAAK,QAAQ,QAAQG,CAAoB,EAAE,OAGzCzB,EAAC,OAAI,UAAU,+BACb,UAAAA,EAAC,OAAI,UAAU,oCACZ,UAAAyB,GAAsB,OACrB1B,EAACE,EAAA,CACC,UAAU,6DACV,KAAMwB,GAAsB,MAC9B,EAEFzB,EAACI,EAAA,CAAO,KAAMmB,EAAM,aAAcC,EAChC,UAAAzB,EAACO,EAAA,CAAc,QAAO,GACpB,SAAAP,EAACI,EAAA,CACC,QAAQ,OACR,UAAU,oDACV,QAAS,IAAM0B,EAAa,EAE3B,SAAAJ,GAAsB,KACzB,EACF,EACA1B,EAACgC,EAAA,CACC,IAAKN,GAAsB,KAAO,CAAC,EACnC,cAAeE,EACf,iBAAkBC,EAClB,aAAcC,EAChB,GACF,GACF,EACA9B,EAAC,MAAG,UAAU,0DACX,SAAA0B,GAAsB,KAAK,IAAKC,GAC/B3B,EAAC,MAAqB,UAAU,wCAC9B,SAAAA,EAACE,EAAA,CACC,KAAM,EACN,QAAS,IAAM,CACb2B,EAAiBF,CAAI,EACrBF,EAAQ,EAAI,EACZK,EAAaH,GAAM,KAAK,CAC1B,EACA,UAAU,wHACV,KAAMA,GAAM,MACd,GAVOA,GAAM,KAWf,CACD,EACH,GACF,EA7CwD,IA+C5D,EAEMK,EAAwB,CAAC,CAC7B,IAAAC,EACA,cAAAL,EACA,iBAAAC,EACA,aAAAC,CACF,IAKM,CACJ,MAAMI,EAAenB,EAA4B,CAAC,CAAC,EAC7CoB,EAAqBpB,EAAuB,IAAI,EAEhDqB,EAAyBxB,EAC5BgB,GAAuB,CACtB,MAAMS,EAAWJ,EAAI,UAAUN,GAAQA,EAAK,QAAUC,GAAe,KAAK,EACpEU,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,CAACR,CAAG,CACN,EAEA,OAAApB,EAAU,IAAM,CACTe,GAIL,WAAW,IAAM,CACfQ,EAAuBR,CAAa,CACtC,EAAG,GAAG,CACR,EAAG,CAACQ,EAAwBR,CAAa,CAAC,EAGxC3B,EAACK,EAAA,CAAc,UAAU,mMACvB,UAAAN,EAAC,SAAO;AAAA;AAAA,mBAEK4B,GAAe,YAAc,SAAS;AAAA;AAAA,QAEjD,EACF3B,EAACS,EAAA,CAAK,MAAOkB,GAAe,MAAO,UAAU,yBAC1C,UAAAK,GAAK,IAAIN,GACR3B,EAACQ,EAAA,CAAQ,MAAOmB,EAAK,MACnB,SAAA3B,EAACG,EAAA,CACC,OAAQ,GAAGwB,GAAM,GAAG,KAAKA,GAAM,SAAS,OACxC,UAAU,uCACV,IAAKA,EAAK,IAAI,IACd,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,EACD1B,EAAC,OAAI,UAAU,uDACb,UAAAD,EAAC,OACC,IAAKmC,EACL,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,UAAU,sCAEV,SAAAnC,EAAC,OAAI,UAAU,iCACb,SAAAA,EAACS,EAAA,CAAK,UAAU,iBACb,SAAAwB,GAAK,IAAI,CAACN,EAAMe,IACf1C,EAACW,EAAA,CACC,IAAKgC,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,UAAW1B,EACT,oEACAU,EAAK,QAAUC,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbQ,EAAuBT,CAAI,EAC3BE,EAAiBF,CAAI,EACrBG,EAAaH,GAAM,KAAK,CAC1B,EAEA,MAAOA,EAAK,MAEZ,SAAA3B,EAACE,EAAA,CAAK,KAAMyB,EAAK,MAAO,UAAU,sCAAsC,GAHnEe,EAAQf,EAAK,KAIpB,CACD,EACH,EACF,EACF,EACA3B,EAAC,OAAI,UAAU,2BACZ,SAAAiC,GAAK,IAAI,CAACN,EAAMe,IACf1C,EAACQ,EAAA,CACC,MAAOmB,EAAK,MAEZ,UAAU,8CAET,SAAAA,EAAK,aAHDe,EAAQf,EAAK,KAIpB,CACD,EACH,GACF,GACF,GACF,CAEJ,EAEA,IAAOiB,EAAQzB,EAAWE,CAAgB",
   "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.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("react").ForwardRefExoticComponent<Partial<import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../../shared/Styles.js").ContainerProps> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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.d.ts

@@ -1,5 +1,5 @@
 export interface ProductGalleryTabRef {
     scrollToTab: (index: number) => void;
 }
-declare const _default: any;
+declare const _default: import("react").ForwardRefExoticComponent<Partial<import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -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