npm - @anker-in/headless-ui - Versions diffs - 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764843603699 - Mend

@anker-in/headless-ui 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764843603699

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

Files changed (195) hide show

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

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

@@ -1,2 +1,2 @@
-declare const ProductDetail: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const ProductDetail: (_props: any) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetail;

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as m}from"react/jsx-runtime";import"./ProductBenefitsTabs/index.js";import t from"./ProductHighlight/index.js";import r from"./ProductFreeGift/index.js";import p from"./ProductOptions/index.js";import i from"./ProductBundle/index.js";import d from"./BenefitsTab.js";const e=f=>m("div",{id:"ipc-product-detail",className:"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4",children:[o(d,{}),o(t,{}),o(p,{}),o(r,{}),o(i,{})]});var P=e;export{P as default};
+import{jsx as o,jsxs as l}from"react/jsx-runtime";import t from"./ProductHighlight/index.js";import p from"./ProductFreeGift/index.js";import r from"./ProductOptions/index.js";import i from"./ProductBundle/index.js";import d from"./BenefitsTab.js";const e=m=>l("div",{id:"ipc-product-detail",className:"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4",children:[o(d,{}),o(t,{}),o(r,{}),o(p,{}),o(i,{})]});var n=e;export{n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
-  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab.js'\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
-  "mappings": "AASI,OACE,OAAAA,EADF,QAAAC,MAAA,oBATJ,MAAgC,iCAChC,OAAOC,MAAsB,8BAC7B,OAAOC,MAAqB,6BAC5B,OAAOC,MAAoB,4BAC3B,OAAOC,MAAmB,2BAC1B,OAAOC,MAAiB,mBAExB,MAAMC,EAAiBC,GAEnBP,EAAC,OAAI,GAAG,qBAAqB,UAAU,oEACrC,UAAAD,EAACM,EAAA,EAAY,EACbN,EAACE,EAAA,EAAiB,EAClBF,EAACI,EAAA,EAAe,EAChBJ,EAACG,EAAA,EAAgB,EACjBH,EAACK,EAAA,EAAc,GACjB,EAIJ,IAAOI,EAAQF",
-  "names": ["jsx", "jsxs", "ProductHighlight", "ProductFreeGift", "ProductOptions", "ProductBundle", "BenefitsTab", "ProductDetail", "props", "ProductDetail_default"]
+  "sourcesContent": ["import ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab.js'\n\nconst ProductDetail = (_props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"tablet:px-8 laptop:px-16 laptop-md:px-0 flex flex-col gap-12 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "AAQI,OACE,OAAAA,EADF,QAAAC,MAAA,oBARJ,OAAOC,MAAsB,8BAC7B,OAAOC,MAAqB,6BAC5B,OAAOC,MAAoB,4BAC3B,OAAOC,MAAmB,2BAC1B,OAAOC,MAAiB,mBAExB,MAAMC,EAAiBC,GAEnBP,EAAC,OAAI,GAAG,qBAAqB,UAAU,oEACrC,UAAAD,EAACM,EAAA,EAAY,EACbN,EAACE,EAAA,EAAiB,EAClBF,EAACI,EAAA,EAAe,EAChBJ,EAACG,EAAA,EAAgB,EACjBH,EAACK,EAAA,EAAc,GACjB,EAIJ,IAAOI,EAAQF",
+  "names": ["jsx", "jsxs", "ProductHighlight", "ProductFreeGift", "ProductOptions", "ProductBundle", "BenefitsTab", "ProductDetail", "_props", "ProductDetail_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts CHANGED Viewed

@@ -36,7 +36,7 @@ export interface HighlightProps {
 }
 export interface ProductOptionsProps {
     option: ProductOption;
-    onOptionChange: (arg0: {
+    onOptionChange: (_arg0: {
         id: string;
         value: string;
     }) => void;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/types.ts"],
-  "sourcesContent": ["import type {\n  ProductVariant,\n  Product,\n  ProductOption,\n  ProductOptionValues,\n} from '../../../../../cpn-components/CpnProductCard/types.js'\nimport type { Img } from '../../../../../types/props.js'\n\nexport interface ProductDetailProps {}\n\nexport enum BenefitsTabsType {\n  ALL_BENEFITS = 'allBenefits',\n  COUPON = 'coupon',\n  INSTALLMENT = 'installment',\n  MEMBERSHIP = 'membership',\n}\n\nexport interface ProductBenefitsTabsProps {\n  data: {\n    allBenefits: {\n      benefits: {\n        type?: BenefitsTabsType\n        tabName: string\n        tabValue: string\n        collectBgImage?: Img\n        coupons?: BenefitsTabCouponProps[]\n      }[]\n    }\n  }\n}\n\nexport interface BenefitsTabCouponProps {\n  code: string\n  title: string\n  description: string\n  discount: number\n  bgImage: Img\n}\n\nexport interface ProductBenefitsTabCouponProps {\n  coupons?: BenefitsTabCouponProps[]\n}\n\nexport interface HighlightProps {\n  data: any\n}\n\nexport interface ProductOptionsProps {\n  option: ProductOption\n  onOptionChange: (arg0: { id: string; value: string }) => void\n}\n"],
-  "mappings": "AAUO,IAAKA,OACVA,EAAA,aAAe,cACfA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,WAAa,aAJHA,OAAA",
+  "sourcesContent": ["import type { ProductOption } from '../../../../../cpn-components/CpnProductCard/types.js'\nimport type { Img } from '../../../../../types/props.js'\n\nexport interface ProductDetailProps {}\n\nexport enum BenefitsTabsType {\n  ALL_BENEFITS = 'allBenefits',\n  COUPON = 'coupon',\n  INSTALLMENT = 'installment',\n  MEMBERSHIP = 'membership',\n}\n\nexport interface ProductBenefitsTabsProps {\n  data: {\n    allBenefits: {\n      benefits: {\n        type?: BenefitsTabsType\n        tabName: string\n        tabValue: string\n        collectBgImage?: Img\n        coupons?: BenefitsTabCouponProps[]\n      }[]\n    }\n  }\n}\n\nexport interface BenefitsTabCouponProps {\n  code: string\n  title: string\n  description: string\n  discount: number\n  bgImage: Img\n}\n\nexport interface ProductBenefitsTabCouponProps {\n  coupons?: BenefitsTabCouponProps[]\n}\n\nexport interface HighlightProps {\n  data: any\n}\n\nexport interface ProductOptionsProps {\n  option: ProductOption\n  onOptionChange: (_arg0: { id: string; value: string }) => void\n}\n"],
+  "mappings": "AAKO,IAAKA,OACVA,EAAA,aAAe,cACfA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,WAAa,aAJHA,OAAA",
   "names": ["BenefitsTabsType"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ interface SelectProps {
     disabled?: boolean;
     error?: string;
     errorClassName?: string;
-    onChange?: (value: string) => void;
+    onChange?: (_value: string) => void;
     placeholder?: string;
     className?: string;
     containerClassName?: string;

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{cn as n,cn as y}from"../../../../../../helpers/index.js";import{useEffect as k,useRef as f,useState as L}from"react";const D=({label:p="",required:g=!1,list:s=[],value:o="",disabled:m=!1,error:a="",errorClassName:b="",onChange:x=v=>{},placeholder:r="",className:w="",containerClassName:h="",selectListClassName:N="",truncate:C=!1,...E})=>{const v=f(null),[d,c]=L(!1),u=f(null),F=s.find(e=>e?.value===o)?.text;return k(()=>{const e=l=>{u.current&&!u.current?.contains(l.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),i("div",{className:n("relative w-full",h),children:[p&&i("div",{className:"mb-[10px] text-[16px] font-bold",children:[p,g&&t("span",{className:"text-[#F84D4F]",children:"*"})]}),i("div",{ref:u,className:"relative block",children:[i("div",{className:n("flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]",r&&!o?"placeholder:text-[#999]":"",m?"pointer-events-none bg-[#F7F8F9]":"bg-white",a?"!border-[#F84D4F]":"border-[#E8E8E8]",s.length<=1&&"cursor-default",w),onClick:()=>{s.length>1&&c(!d)},onChange:e=>{x(e.target.value)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},...E,children:[!o&&r?t("div",{className:"text-[#999]",children:r}):t("div",{className:y("line-clamp-1",C?"min-w-0 flex-1 truncate":"flex-1"),children:F}),s.length>1&&t("svg",{xmlns:"http://www.w3.org/2000/svg",className:n("transition-transform",d&&"rotate-180"),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:t("path",{d:"M14.4101 6.91083C14.7355 6.58539 15.263 6.58539 15.5885 6.91083C15.9139 7.23626 15.9139 7.76377 15.5885 8.08921L10.5885 13.0892C10.263 13.4146 9.73553 13.4146 9.41009 13.0892L4.41009 8.08921C4.08466 7.76377 4.08466 7.23626 4.41009 6.91083C4.73553 6.58539 5.26304 6.58539 5.58848 6.91083L9.99929 11.3216L14.4101 6.91083Z",fill:"currentColor"})})]}),t("div",{ref:v,className:n("absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300",d?"":"pointer-events-none opacity-0",N),children:s.map(e=>t("div",{"data-value":e.value,className:n("flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]",o===e.value?"!bg-[#E8E8E8]":"",e?.disabled?"pointer-events-none text-[#C8C8C8]":""),onClick:()=>{x(e.value),c(!1)},role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&l.preventDefault()},children:e.text},e.value))})]}),a&&t("div",{className:n("mt-[8px] text-[14px] text-[#F84D4F]",b),children:typeof a=="string"?`*${a}`:a})]})};var _=D;export{_ as default};
+import{jsx as t,jsxs as i}from"react/jsx-runtime";import{cn as n,cn as y}from"../../../../../../helpers/index.js";import{useEffect as k,useRef as f,useState as L}from"react";const D=({label:p="",required:g=!1,list:s=[],value:o="",disabled:m=!1,error:a="",errorClassName:b="",onChange:x=v=>{},placeholder:r="",className:w="",containerClassName:h="",selectListClassName:N="",truncate:C=!1,...E})=>{const v=f(null),[d,c]=L(!1),u=f(null),F=s.find(e=>e?.value===o)?.text;return k(()=>{const e=l=>{u.current&&!u.current?.contains(l.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),i("div",{className:n("relative w-full",h),children:[p&&i("div",{className:"mb-[10px] text-[16px] font-bold",children:[p,g&&t("span",{className:"text-[#F84D4F]",children:"*"})]}),i("div",{ref:u,className:"relative block",children:[i("div",{className:n("flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]",r&&!o?"placeholder:text-[#999]":"",m?"pointer-events-none bg-[#F7F8F9]":"bg-white",a?"!border-[#F84D4F]":"border-[#E8E8E8]",s.length<=1&&"cursor-default",w),onClick:()=>{s.length>1&&c(!d)},onChange:e=>{x(e.target.value)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},...E,children:[!o&&r?t("div",{className:"text-[#999]",children:r}):t("div",{className:y("line-clamp-1",C?"min-w-0 flex-1 truncate":"flex-1"),children:F}),s.length>1&&t("svg",{xmlns:"http://www.w3.org/2000/svg",className:n("transition-transform",d&&"rotate-180"),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:t("path",{d:"M14.4101 6.91083C14.7355 6.58539 15.263 6.58539 15.5885 6.91083C15.9139 7.23626 15.9139 7.76377 15.5885 8.08921L10.5885 13.0892C10.263 13.4146 9.73553 13.4146 9.41009 13.0892L4.41009 8.08921C4.08466 7.76377 4.08466 7.23626 4.41009 6.91083C4.73553 6.58539 5.26304 6.58539 5.58848 6.91083L9.99929 11.3216L14.4101 6.91083Z",fill:"currentColor"})})]}),t("div",{ref:v,className:n("absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300",d?"":"pointer-events-none opacity-0",N),children:s.map(e=>t("div",{"data-value":e.value,className:n("flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]",o===e.value?"!bg-[#E8E8E8]":"",e?.disabled?"pointer-events-none text-[#C8C8C8]":""),onClick:()=>{x(e.value),c(!1)},role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&l.preventDefault()},children:e.text},e.value))})]}),a&&t("div",{className:n("mt-[8px] text-[14px] text-[#F84D4F]",b),children:typeof a=="string"?`*${a}`:a})]})};var R=D;export{R as default};
 //# sourceMappingURL=Select.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.tsx"],
-  "sourcesContent": ["import { cn as classNames, cn } from '../../../../../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface SelectProps {\n  label?: string\n  required?: boolean\n  list?: { value: string; text: string; disabled?: boolean }[]\n  value?: string\n  disabled?: boolean\n  error?: string\n  errorClassName?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  containerClassName?: string\n  selectListClassName?: string\n  truncate?: boolean\n}\n\nconst Select = ({\n  label = '',\n  required = false,\n  list = [],\n  value = '',\n  disabled = false,\n  error = '',\n  errorClassName = '',\n  onChange = (value: string) => {},\n  placeholder = '',\n  className = '',\n  containerClassName = '',\n  selectListClassName = '',\n  truncate = false,\n  ...props\n}: SelectProps) => {\n  const dropdownRef = useRef(null)\n  const [selecting, setSelecting] = useState(false)\n  const buttonRef = useRef<HTMLDivElement>(null)\n\n  const displayValue = list.find(item => item?.value === value)?.text\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (buttonRef.current && !buttonRef.current?.contains(event.target as Node)) {\n        setSelecting(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  // useEffect(() => {\n  //   // scroll to select item when select is open\n  //   // start_ai_generated\n  //   if (selecting && value) {\n  //     const selectedElement = dropdownRef.current.querySelector(`[data-value=\"${value}\"]`)\n  //     if (selectedElement) {\n  //       scrollParentToChild(dropdownRef.current, selectedElement)\n  //     }\n  //   }\n  //   // end_ai_generated\n  // }, [selecting, value])\n\n  return (\n    <div className={classNames('relative w-full', containerClassName)}>\n      {label && (\n        <div className=\"mb-[10px] text-[16px] font-bold\">\n          {label}\n          {required && <span className=\"text-[#F84D4F]\">*</span>}\n        </div>\n      )}\n      <div ref={buttonRef} className=\"relative block\">\n        <div\n          className={classNames(\n            'flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]',\n            placeholder && !value ? 'placeholder:text-[#999]' : '',\n            disabled ? 'pointer-events-none bg-[#F7F8F9]' : 'bg-white',\n            error ? '!border-[#F84D4F]' : 'border-[#E8E8E8]',\n            list.length <= 1 && 'cursor-default',\n            className\n          )}\n          onClick={() => {\n            if (list.length > 1) {\n              setSelecting(!selecting)\n            }\n          }}\n          onChange={event => {\n            onChange((event.target as HTMLSelectElement).value)\n          }}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n            }\n          }}\n          {...props}\n        >\n          {!value && placeholder ? (\n            <div className=\"text-[#999]\">{placeholder}</div>\n          ) : (\n            <div className={cn('line-clamp-1', truncate ? 'min-w-0 flex-1 truncate' : 'flex-1')}>{displayValue}</div>\n          )}\n          {list.length > 1 && (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={classNames('transition-transform', selecting && 'rotate-180')}\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M14.4101 6.91083C14.7355 6.58539 15.263 6.58539 15.5885 6.91083C15.9139 7.23626 15.9139 7.76377 15.5885 8.08921L10.5885 13.0892C10.263 13.4146 9.73553 13.4146 9.41009 13.0892L4.41009 8.08921C4.08466 7.76377 4.08466 7.23626 4.41009 6.91083C4.73553 6.58539 5.26304 6.58539 5.58848 6.91083L9.99929 11.3216L14.4101 6.91083Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          )}\n          {/* {list.length > 1 && (\n            <ChevronDownIcon\n              className={classNames(\n                'ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform',\n                selecting && 'rotate-180'\n              )}\n            />\n          )} */}\n        </div>\n        <div\n          ref={dropdownRef}\n          className={classNames(\n            'absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300',\n            selecting ? '' : 'pointer-events-none opacity-0',\n            selectListClassName\n          )}\n        >\n          {list.map(item => (\n            <div\n              key={item.value}\n              data-value={item.value}\n              className={classNames(\n                'flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]',\n                value === item.value ? '!bg-[#E8E8E8]' : '',\n                item?.disabled ? 'pointer-events-none text-[#C8C8C8]' : ''\n              )}\n              onClick={() => {\n                onChange(item.value)\n                setSelecting(false)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {item.text}\n            </div>\n          ))}\n        </div>\n      </div>\n      {error && (\n        <div className={classNames('mt-[8px] text-[14px] text-[#F84D4F]', errorClassName)}>\n          {typeof error === 'string' ? `*${error}` : error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Select\n"],
-  "mappings": "AAmEQ,OAEe,OAAAA,EAFf,QAAAC,MAAA,oBAnER,OAAS,MAAMC,EAAY,MAAAC,MAAU,qCACrC,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAkBnD,MAAMC,EAAS,CAAC,CACd,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,KAAAC,EAAO,CAAC,EACR,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,SAAAC,EAAYJ,GAAkB,CAAC,EAC/B,YAAAK,EAAc,GACd,UAAAC,EAAY,GACZ,mBAAAC,EAAqB,GACrB,oBAAAC,EAAsB,GACtB,SAAAC,EAAW,GACX,GAAGC,CACL,IAAmB,CACjB,MAAMC,EAAcjB,EAAO,IAAI,EACzB,CAACkB,EAAWC,CAAY,EAAIlB,EAAS,EAAK,EAC1CmB,EAAYpB,EAAuB,IAAI,EAEvCqB,EAAehB,EAAK,KAAKiB,GAAQA,GAAM,QAAUhB,CAAK,GAAG,KAC/D,OAAAP,EAAU,IAAM,CACd,MAAMwB,EAAsBC,GAAsB,CAC5CJ,EAAU,SAAW,CAACA,EAAU,SAAS,SAASI,EAAM,MAAc,GACxEL,EAAa,EAAK,CAEtB,EACA,gBAAS,iBAAiB,YAAaI,CAAkB,EAClD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAAC,CAAC,EAeH3B,EAAC,OAAI,UAAWC,EAAW,kBAAmBgB,CAAkB,EAC7D,UAAAV,GACCP,EAAC,OAAI,UAAU,kCACZ,UAAAO,EACAC,GAAYT,EAAC,QAAK,UAAU,iBAAiB,aAAC,GACjD,EAEFC,EAAC,OAAI,IAAKwB,EAAW,UAAU,iBAC7B,UAAAxB,EAAC,OACC,UAAWC,EACT,qJACAc,GAAe,CAACL,EAAQ,0BAA4B,GACpDC,EAAW,mCAAqC,WAChDC,EAAQ,oBAAsB,mBAC9BH,EAAK,QAAU,GAAK,iBACpBO,CACF,EACA,QAAS,IAAM,CACTP,EAAK,OAAS,GAChBc,EAAa,CAACD,CAAS,CAE3B,EACA,SAAUM,GAAS,CACjBd,EAAUc,EAAM,OAA6B,KAAK,CACpD,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EACC,GAAGR,EAEH,WAACV,GAASK,EACThB,EAAC,OAAI,UAAU,cAAe,SAAAgB,EAAY,EAE1ChB,EAAC,OAAI,UAAWG,EAAG,eAAgBiB,EAAW,0BAA4B,QAAQ,EAAI,SAAAM,EAAa,EAEpGhB,EAAK,OAAS,GACbV,EAAC,OACC,MAAM,6BACN,UAAWE,EAAW,uBAAwBqB,GAAa,YAAY,EACvE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAvB,EAAC,QACC,EAAE,kUACF,KAAK,eACP,EACF,GAUJ,EACAA,EAAC,OACC,IAAKsB,EACL,UAAWpB,EACT,4KACAqB,EAAY,GAAK,gCACjBJ,CACF,EAEC,SAAAT,EAAK,IAAIiB,GACR3B,EAAC,OAEC,aAAY2B,EAAK,MACjB,UAAWzB,EACT,0LACAS,IAAUgB,EAAK,MAAQ,gBAAkB,GACzCA,GAAM,SAAW,qCAAuC,EAC1D,EACA,QAAS,IAAM,CACbZ,EAASY,EAAK,KAAK,EACnBH,EAAa,EAAK,CACpB,EACA,KAAK,SACL,SAAU,EACV,UAAWM,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EAEC,SAAAH,EAAK,MAnBDA,EAAK,KAoBZ,CACD,EACH,GACF,EACCd,GACCb,EAAC,OAAI,UAAWE,EAAW,sCAAuCY,CAAc,EAC7E,gBAAOD,GAAU,SAAW,IAAIA,CAAK,GAAKA,EAC7C,GAEJ,CAEJ,EAEA,IAAOkB,EAAQxB",
-  "names": ["jsx", "jsxs", "classNames", "cn", "useEffect", "useRef", "useState", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "e", "Select_default"]
+  "sourcesContent": ["import { cn as classNames, cn } from '../../../../../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface SelectProps {\n  label?: string\n  required?: boolean\n  list?: { value: string; text: string; disabled?: boolean }[]\n  value?: string\n  disabled?: boolean\n  error?: string\n  errorClassName?: string\n  onChange?: (_value: string) => void\n  placeholder?: string\n  className?: string\n  containerClassName?: string\n  selectListClassName?: string\n  truncate?: boolean\n}\n\nconst Select = ({\n  label = '',\n  required = false,\n  list = [],\n  value = '',\n  disabled = false,\n  error = '',\n  errorClassName = '',\n  onChange = (_value: string) => {},\n  placeholder = '',\n  className = '',\n  containerClassName = '',\n  selectListClassName = '',\n  truncate = false,\n  ...props\n}: SelectProps) => {\n  const dropdownRef = useRef(null)\n  const [selecting, setSelecting] = useState(false)\n  const buttonRef = useRef<HTMLDivElement>(null)\n\n  const displayValue = list.find(item => item?.value === value)?.text\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (buttonRef.current && !buttonRef.current?.contains(event.target as Node)) {\n        setSelecting(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  // useEffect(() => {\n  //   // scroll to select item when select is open\n  //   // start_ai_generated\n  //   if (selecting && value) {\n  //     const selectedElement = dropdownRef.current.querySelector(`[data-value=\"${value}\"]`)\n  //     if (selectedElement) {\n  //       scrollParentToChild(dropdownRef.current, selectedElement)\n  //     }\n  //   }\n  //   // end_ai_generated\n  // }, [selecting, value])\n\n  return (\n    <div className={classNames('relative w-full', containerClassName)}>\n      {label && (\n        <div className=\"mb-[10px] text-[16px] font-bold\">\n          {label}\n          {required && <span className=\"text-[#F84D4F]\">*</span>}\n        </div>\n      )}\n      <div ref={buttonRef} className=\"relative block\">\n        <div\n          className={classNames(\n            'flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]',\n            placeholder && !value ? 'placeholder:text-[#999]' : '',\n            disabled ? 'pointer-events-none bg-[#F7F8F9]' : 'bg-white',\n            error ? '!border-[#F84D4F]' : 'border-[#E8E8E8]',\n            list.length <= 1 && 'cursor-default',\n            className\n          )}\n          onClick={() => {\n            if (list.length > 1) {\n              setSelecting(!selecting)\n            }\n          }}\n          onChange={event => {\n            onChange((event.target as HTMLSelectElement).value)\n          }}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n            }\n          }}\n          {...props}\n        >\n          {!value && placeholder ? (\n            <div className=\"text-[#999]\">{placeholder}</div>\n          ) : (\n            <div className={cn('line-clamp-1', truncate ? 'min-w-0 flex-1 truncate' : 'flex-1')}>{displayValue}</div>\n          )}\n          {list.length > 1 && (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={classNames('transition-transform', selecting && 'rotate-180')}\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M14.4101 6.91083C14.7355 6.58539 15.263 6.58539 15.5885 6.91083C15.9139 7.23626 15.9139 7.76377 15.5885 8.08921L10.5885 13.0892C10.263 13.4146 9.73553 13.4146 9.41009 13.0892L4.41009 8.08921C4.08466 7.76377 4.08466 7.23626 4.41009 6.91083C4.73553 6.58539 5.26304 6.58539 5.58848 6.91083L9.99929 11.3216L14.4101 6.91083Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          )}\n          {/* {list.length > 1 && (\n            <ChevronDownIcon\n              className={classNames(\n                'ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform',\n                selecting && 'rotate-180'\n              )}\n            />\n          )} */}\n        </div>\n        <div\n          ref={dropdownRef}\n          className={classNames(\n            'absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300',\n            selecting ? '' : 'pointer-events-none opacity-0',\n            selectListClassName\n          )}\n        >\n          {list.map(item => (\n            <div\n              key={item.value}\n              data-value={item.value}\n              className={classNames(\n                'flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]',\n                value === item.value ? '!bg-[#E8E8E8]' : '',\n                item?.disabled ? 'pointer-events-none text-[#C8C8C8]' : ''\n              )}\n              onClick={() => {\n                onChange(item.value)\n                setSelecting(false)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {item.text}\n            </div>\n          ))}\n        </div>\n      </div>\n      {error && (\n        <div className={classNames('mt-[8px] text-[14px] text-[#F84D4F]', errorClassName)}>\n          {typeof error === 'string' ? `*${error}` : error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Select\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "classNames", "cn", "useEffect", "useRef", "useState", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "_value", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "e", "Select_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <Swiper\n                modules={[Autoplay]}\n                loop\n                className=\"lg-desktop:h-11 h-10\"\n                direction=\"vertical\"\n                autoplay={{ delay: 2000, disableOnInteraction: false }}\n              >\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n              </Swiper>\n              {/* <div\n                ref={commentRef}\n                className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                />\n              </div> */}\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <Swiper\n                modules={[Autoplay]}\n                loop\n                className=\"lg-desktop:h-11 h-10\"\n                direction=\"vertical\"\n                autoplay={{ delay: 2000, disableOnInteraction: false }}\n              >\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n              </Swiper>\n              {/* <div\n                ref={commentRef}\n                className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#080A0F]\"\n                />\n              </div> */}\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/types.d.ts CHANGED Viewed

@@ -33,13 +33,13 @@ export interface ProductGalleryTabItemProps {
     realIndex?: number;
     galleryTabType: GalleryTabType;
     galleries: ImageMedia[] | VideoMedia[];
-    onCurrentTabLoopStart?: (index: number) => void;
-    onCurrentTabLoopEnd?: (index: number) => void;
+    onCurrentTabLoopStart?: (_index: number) => void;
+    onCurrentTabLoopEnd?: (_index: number) => void;
     onNextTab?: () => void;
     onPrevTab?: () => void;
     targetSlideIndex?: number | null;
     onSlideChange?: () => void;
-    onImageExposure?: (data: {
+    onImageExposure?: (_data: {
         imageUrl: string;
         imageAlt?: string;
         index: number;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/types.ts"],
-  "sourcesContent": ["import type { Img, Video } from '../../../../../types/props.js'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\n\nexport enum GalleryTabType {\n  GALLERY_IMAGE_MAIN = 'ipc-gallery-tab-image-main',\n  GALLERY_IMAGE_FEATURES = 'ipc-gallery-tab-image-features',\n  GALLERY_IMAGE_SCENE = 'ipc-gallery-tab-image-scene',\n  GALLERY_VIDEO = 'ipc-gallery-tab-video',\n  GALLERY_3D_VIEW = 'ipc-gallery-tab-3d-view',\n}\n\n// \u8F93\u5165\u6570\u636E\u7684\u7C7B\u578B\u5B9A\u4E49\uFF08\u4ECE product.payload.components \u4E2D\u83B7\u53D6\u7684\u539F\u59CB\u6570\u636E\u683C\u5F0F\uFF09\nexport interface ProductGalleryTabData {\n  tabLabel: string\n  tabValue: string\n  galleries: 'productList' | 'keyFeaturesList' | 'sceneList' | 'videoList'\n  galleryTabType: GalleryTabType | string\n  images?: Array<{\n    image_390?: string\n    image_768?: string\n    image_1024?: string\n    image_1440?: string\n    image_1920?: string\n  }>\n  comment?: {\n    avatar: {\n      url: string\n    }\n    content: string\n  }\n  id?: string\n}\n\nexport type ProductGalleryProps = ProductGalleryTabData[]\n\nexport interface ProductGalleryTabItemProps {\n  index?: number\n  realIndex?: number\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  onCurrentTabLoopStart?: (index: number) => void\n  onCurrentTabLoopEnd?: (index: number) => void\n  onNextTab?: () => void\n  onPrevTab?: () => void\n  targetSlideIndex?: number | null\n  onSlideChange?: () => void\n  onImageExposure?: (data: { imageUrl: string; imageAlt?: string; index: number; tabId: string }) => void\n  id: string\n  comment?: {\n    content: string\n    avatar: Img\n  }\n  tabLabel: string\n  tabValue: string\n  // galleryImgs?: Img[]\n  // galleryVideo?: Video\n  // gallery3DView?: Video\n}\n\nexport interface GalleryTabItemProps {\n  tabLabel: string\n  tabValue: string\n  id: string\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  images?: {\n    image_390?: string\n    image_768?: string\n    image_1024?: string\n    image_1440?: string\n    image_1920?: string\n  }\n  comment?: {\n    avatar: Img\n    content: string\n  }\n}\n"],
+  "sourcesContent": ["import type { Img } from '../../../../../types/props.js'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\n\nexport enum GalleryTabType {\n  GALLERY_IMAGE_MAIN = 'ipc-gallery-tab-image-main',\n  GALLERY_IMAGE_FEATURES = 'ipc-gallery-tab-image-features',\n  GALLERY_IMAGE_SCENE = 'ipc-gallery-tab-image-scene',\n  GALLERY_VIDEO = 'ipc-gallery-tab-video',\n  GALLERY_3D_VIEW = 'ipc-gallery-tab-3d-view',\n}\n\n// \u8F93\u5165\u6570\u636E\u7684\u7C7B\u578B\u5B9A\u4E49\uFF08\u4ECE product.payload.components \u4E2D\u83B7\u53D6\u7684\u539F\u59CB\u6570\u636E\u683C\u5F0F\uFF09\nexport interface ProductGalleryTabData {\n  tabLabel: string\n  tabValue: string\n  galleries: 'productList' | 'keyFeaturesList' | 'sceneList' | 'videoList'\n  galleryTabType: GalleryTabType | string\n  images?: Array<{\n    image_390?: string\n    image_768?: string\n    image_1024?: string\n    image_1440?: string\n    image_1920?: string\n  }>\n  comment?: {\n    avatar: {\n      url: string\n    }\n    content: string\n  }\n  id?: string\n}\n\nexport type ProductGalleryProps = ProductGalleryTabData[]\n\nexport interface ProductGalleryTabItemProps {\n  index?: number\n  realIndex?: number\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  onCurrentTabLoopStart?: (_index: number) => void\n  onCurrentTabLoopEnd?: (_index: number) => void\n  onNextTab?: () => void\n  onPrevTab?: () => void\n  targetSlideIndex?: number | null\n  onSlideChange?: () => void\n  onImageExposure?: (_data: { imageUrl: string; imageAlt?: string; index: number; tabId: string }) => void\n  id: string\n  comment?: {\n    content: string\n    avatar: Img\n  }\n  tabLabel: string\n  tabValue: string\n  // galleryImgs?: Img[]\n  // galleryVideo?: Video\n  // gallery3DView?: Video\n}\n\nexport interface GalleryTabItemProps {\n  tabLabel: string\n  tabValue: string\n  id: string\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  images?: {\n    image_390?: string\n    image_768?: string\n    image_1024?: string\n    image_1440?: string\n    image_1920?: string\n  }\n  comment?: {\n    avatar: Img\n    content: string\n  }\n}\n"],
   "mappings": "AAGO,IAAKA,OACVA,EAAA,mBAAqB,6BACrBA,EAAA,uBAAyB,iCACzBA,EAAA,oBAAsB,8BACtBA,EAAA,cAAgB,wBAChBA,EAAA,gBAAkB,0BALRA,OAAA",
   "names": ["GalleryTabType"]
 }