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

@anker-in/headless-ui 1.1.79 → 1.1.81

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, 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'\nimport { debounce } from 'es-toolkit'\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}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\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\nProductGalleryTab.displayName = 'ProductGalleryTab'\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 [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\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  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\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-0 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]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\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\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\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'\nimport { debounce } from 'es-toolkit'\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}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\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=\"desktop:gap-2 desktop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductGalleryTab.displayName = 'ProductGalleryTab'\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 [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\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  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\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-0 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]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\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\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
   "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "import_es_toolkit", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "ProductGalleryTab3DView"]
 }

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

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

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

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

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { Product, ProductVariant } from '../../../types/product.js';
+import type { DeliveryCustom } from '../../PaidShipping/type.js';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    metafields: any;
+    productList: Array<Product & {
+        variant: ProductVariant;
+    }>;
+    variant: ProductVariant;
+    onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void;
+    className?: string;
+} & Partial<import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps> & import("react").RefAttributes<any>>;
+export default _default;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var E=Object.create;var x=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var j=(i,t)=>{for(var n in t)x(i,n,{get:t[n],enumerable:!0})},T=(i,t,n,a)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let l of O(t))!W.call(i,l)&&l!==n&&x(i,l,{get:()=>t[l],enumerable:!(a=I(t,l))\|\|a.enumerable});return i};var F=(i,t,n)=>(n=i!=null?E(V(i)):{},T(t\|\|!i\|\|!i.__esModule?x(n,"default",{value:i,enumerable:!0}):n,i)),$=i=>T(x({},"__esModule",{value:!0}),i);var H={};j(H,{default:()=>G});module.exports=$(H);var r=require("react/jsx-runtime"),s=require("../../../../../components/index.js"),o=require("react"),P=require("../../../../../helpers/index.js"),_=F(require("../../PaidShipping/ShippingMethod.js")),k=require("../../PaidShipping/ShippingPolicyModal.js"),M=require("../../PaidShipping/utils.js"),Q=require("../../PaidShipping/LearnMore.js"),C=require("../../../BizProductProvider.js"),N=require("../../../../../shared/Styles.js");const q=({metafields:i,productList:t,onShippingInfoChange:n,variant:a,className:l})=>{const{isLogin:A,openSignInPopup:w}=(0,C.useBizProductContext)(),[L,S]=(0,o.useState)(!1),[f,z]=(0,o.useState)(!1),[B,v]=(0,o.useState)(null),b=(0,o.useMemo)(()=>t.reduce((e,p)=>e+(p?.variant?.weight\|\|0),0),[t]),h=(0,o.useCallback)((e,p,c)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!(0,M.isWeightAvailable)(p,e),price:e.price,subtitle:e.subtitle,tag:c!==0?i?.memberOnly:"",error:(0,M.isWeightAvailable)(p,e)?"":i.overWeightError}),[i?.memberOnly,i.overWeightError]),g=(0,o.useMemo)(()=>{const e=i?.list?.map((p,c)=>h(p,b,c));return e?.reduce((p,c)=>{const y=e.filter(d=>d.code==c.code);let m;return y.every(d=>d.disabled)?m=y[y.length-1]:m=y.find(d=>!d.disabled),p.find(d=>m.id===d.id)?p:[...p,m]},[])},[h,i?.list,b]),u=(0,o.useCallback)(e=>{n({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[n]);(0,o.useEffect)(()=>{if(i?.list?.length>0&&!f){const e=h(i?.list[0],0,0);v(e),u(e),z(!0)}},[h,i?.list,u,f]);const D=(0,o.useCallback)(e=>{e.disabled\|\|(v(e),u(e))},[A,g,a.sku,u,w]);return(0,r.jsxs)("div",{id:"ipc-product-paid-shipping",className:(0,P.cn)(l),children:[(0,r.jsxs)("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:[(0,r.jsx)(s.Text,{className:"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]",html:i?.title}),(0,r.jsx)(s.Button,{variant:"link",onClick:()=>{S(!0)},className:"lg-desktop:text-[16px] text-[14px] font-bold !p-0",children:i?.policy})]}),(0,r.jsx)("div",{className:"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden",children:g.map((e,p)=>(0,r.jsx)(_.default,{index:p,item:e,active:B?.code===e.code,toggleShipping:()=>D(e),currencyCode:a.price.currencyCode,metafields:i,className:"w-full laptop:h-[100px] h-[80px]"},p))}),g.find(e=>e?.error)&&(0,r.jsx)(s.Text,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:g.find(e=>e.error)?.error,as:"p"}),i?.seeAvailableArea&&(0,r.jsx)(s.Text,{as:"div",className:"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline",html:i?.seeAvailableArea}),i?.shippingPolicy&&(0,r.jsx)(k.ShippingPolicyModal,{data:i?.shippingPolicy,onClose:()=>S(!1),open:L})]})};var G=(0,N.withLayout)(q);
2	+ //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.tsx"],
+  "sourcesContent": ["import { Button, Text } from '../../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../../types/product.js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../../helpers/index.js'\n\nimport ShippingMethod from '../../PaidShipping/ShippingMethod.js'\nimport { ShippingPolicyModal } from '../../PaidShipping/ShippingPolicyModal.js'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from '../../PaidShipping/type.js'\nimport { isWeightAvailable } from '../../PaidShipping/utils.js'\nimport LearnMore from '../../PaidShipping/LearnMore.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\n\nconst ProductPaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError]\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n      normalizedMethod(method, weight, index)\n    )\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange]\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n  )\n\n  return (\n    <div id=\"ipc-product-paid-shipping\" className={cn(className)}>\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]\"\n          html={metafields?.title}\n        ></Text>\n        <Button\n          variant=\"link\"\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold !p-0\"\n        >\n          {metafields?.policy}\n        </Button>\n      </div>\n      <div className=\"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:h-[100px] h-[80px]\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        {/* <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full\"\n        /> */}\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default withLayout(ProductPaidShipping)\n"],
+  "mappings": "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",
+  "names": ["ProductPaidShipping_exports", "__export", "ProductPaidShipping_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "import_helpers", "import_ShippingMethod", "import_ShippingPolicyModal", "import_utils", "import_LearnMore", "import_BizProductProvider", "import_Styles", "ProductPaidShipping", "metafields", "productList", "onShippingInfoChange", "variant", "className", "isLogin", "openSignInPopup", "openShippingPolicyModal", "setOpenShippingPolicyModal", "init", "setInit", "selectedMethod", "setSelectedMethod", "weight", "acc", "product", "normalizedMethod", "method", "index", "list", "normalizedList", "prev", "sameTypeMethod", "m", "availableMethod", "handleChangeShippingInfo", "standardShippingMethod", "toggleShipping", "ShippingMethod"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts CHANGED Viewed

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

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var S=(l,t)=>{for(var r in t)s(l,r,{get:t[r],enumerable:!0})},A=(l,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of h(t))!P.call(l,i)&&i!==r&&s(l,i,{get:()=>t[i],enumerable:!(o=w(t,i))||o.enumerable});return l};var B=l=>A(s({},"__esModule",{value:!0}),l);var z={};S(z,{default:()=>k});module.exports=B(z);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),u=require("react"),d=require("../../../utils/index.js"),b=require("../../../utils/textFormat.js");const T=({totalSavingsSlot:l}={})=>{const{copyWriting:t,locale:r="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:i,totalSavings:n,isLogin:c,comparePrice:g,onAddToCart:f,onBuyNow:y,savingDetail:m,addToCartLoading:C,buyNowLoading:v}=(0,x.useBizProductContext)(),N=(0,u.useMemo)(()=>(0,b.replaceTemplate)(t?.totalSavings||"",{amount:(0,d.formatPrice)({amount:n,currencyCode:o.price.currencyCode,locale:r})}),[t?.totalSavings,n,o.price.currencyCode,r]);return(0,e.jsxs)(a.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[o.availableForSale?(0,e.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,d.formatPrice)({amount:Math.floor(i*100)/100,currencyCode:o.price.currencyCode,locale:r})}),(n>0||m?.member>0&&c)&&(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,d.formatPrice)({amount:g,currencyCode:o.price.currencyCode,locale:r})}),m?.member>0&&c&&(0,e.jsx)(a.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:t?.memberPrice||"Member Price"})]}),l||(n>0||m?.member>0&&c)&&(0,e.jsx)(a.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${N}`})]}):(0,e.jsx)(a.Text,{className:"text-[20px] font-bold text-[#999999]",html:t?.soldOut??"Sold Out"}),(0,e.jsxs)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:[(0,e.jsx)(a.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"tablet:w-auto w-1/2",onClick:()=>f?.(),loading:C,children:t?.addToCart??"Add to Cart"}),(0,e.jsx)(a.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:v,className:"tablet:w-auto w-1/2",onClick:()=>y?.(),children:t?.buyNow??"Buy Now"})]})]})};var k=T;
+"use strict";var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var S=(l,t)=>{for(var r in t)m(l,r,{get:t[r],enumerable:!0})},A=(l,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of h(t))!P.call(l,i)&&i!==r&&m(l,i,{get:()=>t[i],enumerable:!(o=w(t,i))||o.enumerable});return l};var k=l=>A(m({},"__esModule",{value:!0}),l);var z={};S(z,{default:()=>T});module.exports=k(z);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),u=require("react"),d=require("../../../utils/index.js"),b=require("../../../utils/textFormat.js");const B=({totalSavingsSlot:l}={})=>{const{copyWriting:t,locale:r="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:i,totalSavings:n,isLogin:s,comparePrice:g,onAddToCart:f,onBuyNow:y,savingDetail:c,addToCartLoading:C,buyNowLoading:v}=(0,x.useBizProductContext)(),N=(0,u.useMemo)(()=>(0,b.replaceTemplate)(t?.totalSavings||"",{amount:(0,d.formatPrice)({amount:n,currencyCode:o.price.currencyCode,locale:r})}),[t?.totalSavings,n,o.price.currencyCode,r]);return(0,e.jsxs)(a.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[o.availableForSale?(0,e.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,d.formatPrice)({amount:Math.floor(i*100)/100,currencyCode:o.price.currencyCode,locale:r})}),(n>0||c?.member>0&&s)&&(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,d.formatPrice)({amount:g,currencyCode:o.price.currencyCode,locale:r})}),c?.member>0&&s&&(0,e.jsx)(a.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:t?.memberPrice||"Member Price"})]}),l||(n>0||c?.member>0&&s)&&(0,e.jsx)(a.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${N}`})]}):(0,e.jsx)(a.Text,{className:"text-[20px] font-bold text-[#999999]",html:t?.soldOut??"Sold Out"}),(0,e.jsxs)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:[(0,e.jsx)(a.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"tablet:w-auto w-1/2",onClick:()=>f?.(),loading:C,children:t?.addToCart??"Add to Cart"}),(0,e.jsx)(a.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:v,className:"tablet:w-auto w-1/2",onClick:()=>y?.(),children:t?.buyNow??"Buy Now"})]})]})};var T=B;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n  /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n  totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const totalSavingsText = useMemo(() => {\n    return replaceTemplate(copyWriting?.totalSavings || '', {\n      amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n    })\n  }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n  // const memberPriceSaveText = useMemo(() => {\n  //   return replaceTemplate(copyWriting?.memberSaving || '', {\n  //     amount: formatPrice({\n  //       amount: savingDetail?.member,\n  //       currencyCode: variant.price.currencyCode,\n  //       locale,\n  //     }),\n  //   })\n  // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n  return (\n    <Container\n      childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 tablet:items-center tablet:gap-4\"\n      className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n    >\n      {variant.availableForSale ? (\n        <div className=\"laptop-md:items-end flex flex-col justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n              html={formatPrice({\n                amount: Math.floor(finalPrice * 100) / 100,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              })}\n            />\n            {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            {savingDetail?.member > 0 && isLogin && (\n              <Text\n                className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n                html={copyWriting?.memberPrice || 'Member Price'}\n              />\n            )}\n          </div>\n          {totalSavingsSlot ||\n            ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n                html={`${totalSavingsText}`}\n              />\n            ))}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onAddToCart?.()}\n          loading={addToCartLoading}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          loading={buyNowLoading}\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </Container>\n  )\n}\n\nexport default ProductActions\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkDU,IAAAI,EAAA,6BAlDVC,EAAwC,8CACxCC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwC,iBACxCC,EAA4B,mCAC5BC,EAAgC,wCAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBZ,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,SACE,QAAC,aACC,eAAe,8FACf,UAAU,+EAET,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,oDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQ,KAAK,MAAMC,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,qHACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcJ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDQ,GAAc,OAAS,GAAKJ,MAC3B,OAAC,QACC,UAAU,gEACV,KAAML,GAAa,aAAe,eACpC,GAEJ,EACCD,IACGK,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,4HACV,KAAM,GAAGO,CAAgB,GAC3B,GAEN,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMZ,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAc,EAC7B,QAASG,EAER,SAAAV,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASS,EACT,UAAU,sBACV,QAAS,IAAMH,IAAW,EAEzB,SAAAR,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOX,EAAQS",
+  "sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n  /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n  totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const totalSavingsText = useMemo(() => {\n    return replaceTemplate(copyWriting?.totalSavings || '', {\n      amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n    })\n  }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n  // const memberPriceSaveText = useMemo(() => {\n  //   return replaceTemplate(copyWriting?.memberSaving || '', {\n  //     amount: formatPrice({\n  //       amount: savingDetail?.member,\n  //       currencyCode: variant.price.currencyCode,\n  //       locale,\n  //     }),\n  //   })\n  // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n  return (\n    <Container\n      childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n      className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n    >\n      {variant.availableForSale ? (\n        <div className=\"laptop-md:items-end flex flex-col justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n              html={formatPrice({\n                amount: Math.floor(finalPrice * 100) / 100,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              })}\n            />\n            {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            {savingDetail?.member > 0 && isLogin && (\n              <Text\n                className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n                html={copyWriting?.memberPrice || 'Member Price'}\n              />\n            )}\n          </div>\n          {totalSavingsSlot ||\n            ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n                html={`${totalSavingsText}`}\n              />\n            ))}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onAddToCart?.()}\n          loading={addToCartLoading}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          loading={buyNowLoading}\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </Container>\n  )\n}\n\nexport default ProductActions\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkDU,IAAAI,EAAA,6BAlDVC,EAAwC,8CACxCC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwC,iBACxCC,EAA4B,mCAC5BC,EAAgC,wCAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBZ,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,SACE,QAAC,aACC,eAAe,2GACf,UAAU,+EAET,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,oDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQ,KAAK,MAAMC,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,qHACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcJ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDQ,GAAc,OAAS,GAAKJ,MAC3B,OAAC,QACC,UAAU,gEACV,KAAML,GAAa,aAAe,eACpC,GAEJ,EACCD,IACGK,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,4HACV,KAAM,GAAGO,CAAgB,GAC3B,GAEN,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMZ,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAc,EAC7B,QAASG,EAER,SAAAV,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASS,EACT,UAAU,sBACV,QAAS,IAAMH,IAAW,EAEzB,SAAAR,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOX,EAAQS",
   "names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "totalSavingsText"]
 }

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var H=(n,o)=>{for(var s in o)v(n,s,{get:o[s],enumerable:!0})},L=(n,o,s,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of k(o))!E.call(n,i)&&i!==s&&v(n,i,{get:()=>o[i],enumerable:!(c=T(o,i))||c.enumerable});return n};var M=n=>L(v({},"__esModule",{value:!0}),n);var I={};H(I,{default:()=>P});module.exports=M(I);var r=require("react/jsx-runtime"),t=require("react"),w=require("es-toolkit"),d=require("../../../../../helpers/index.js"),g=require("./useScrollSpy.js");const z=({tabs:n,onSpyNavItemClick:o,className:s,renderRating:c})=>{const[i,S]=(0,t.useState)(0),p=(0,t.useMemo)(()=>c?[...n,{label:"Reviews",id:"ipc-review",href:""}]:n,[n,c]),y=(0,t.useMemo)(()=>p.map(e=>e.id),[p]),u=(0,w.debounce)(()=>{const e=document.querySelector("#purchase-bar");e&&S(e.getBoundingClientRect().height)},500);(0,t.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]);const a=(0,g.useScrollSpy)(y,i),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),x=(0,t.useCallback)(e=>{o?.(e)},[o]);(0,t.useEffect)(()=>{if(!a||!f.current)return;const e=m.current.get(a);if(!e)return;const l=f.current,h=e.getBoundingClientRect(),b=l.getBoundingClientRect(),R=h.left+h.width/2-b.left,B=b.width/2,C=R-B;l.scrollTo({left:l.scrollLeft+C,behavior:"smooth"})},[a]);const N=(0,t.useCallback)((e,l)=>{l?m.current.set(e,l):m.current.delete(e)},[]);return(0,r.jsx)("div",{ref:f,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,d.cn)("overflow-x-auto",s),children:(0,r.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:p?.map(e=>(0,r.jsx)("button",{ref:l=>N(e.id,l),children:e.id==="ipc-review"?(0,r.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[c,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]}):(0,r.jsxs)("div",{className:(0,d.cn)("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":a===e.id}),onClick:()=>x(e),children:[e.label,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]})},e.id))})})};var P=z;
+"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var H=(n,o)=>{for(var s in o)v(n,s,{get:o[s],enumerable:!0})},L=(n,o,s,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of E(o))!k.call(n,l)&&l!==s&&v(n,l,{get:()=>o[l],enumerable:!(c=T(o,l))||c.enumerable});return n};var M=n=>L(v({},"__esModule",{value:!0}),n);var I={};H(I,{default:()=>P});module.exports=M(I);var r=require("react/jsx-runtime"),t=require("react"),b=require("es-toolkit"),d=require("../../../../../helpers/index.js"),g=require("./useScrollSpy.js");const z=({tabs:n,onSpyNavItemClick:o,className:s,renderRating:c})=>{const[l,S]=(0,t.useState)(0),p=(0,t.useMemo)(()=>c?[...n,{label:"Reviews",id:"ipc-review",href:""}]:n,[n,c]),y=(0,t.useMemo)(()=>p.map(e=>e.id),[p]),u=(0,b.debounce)(()=>{const e=document.querySelector("#purchase-bar");e&&S(e.getBoundingClientRect().height)},500);(0,t.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]);const a=(0,g.useScrollSpy)(y,l),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),x=(0,t.useCallback)(e=>{o?.(e)},[o]);(0,t.useEffect)(()=>{if(!a||!f.current)return;const e=m.current.get(a);if(!e)return;const i=f.current,h=e.getBoundingClientRect(),w=i.getBoundingClientRect(),R=h.left+h.width/2-w.left,B=w.width/2,C=R-B;i.scrollTo({left:i.scrollLeft+C,behavior:"smooth"})},[a]);const N=(0,t.useCallback)((e,i)=>{i?m.current.set(e,i):m.current.delete(e)},[]);return(0,r.jsx)("div",{ref:f,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,d.cn)("overflow-x-auto",s),children:(0,r.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:p?.map(e=>(0,r.jsx)("button",{ref:i=>N(e.id,i),children:e.id==="ipc-review"?(0,r.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[c,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]}):(0,r.jsxs)("div",{className:(0,d.cn)("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":a===e.id}),onClick:()=>x(e),children:[e.label,(0,r.jsx)("div",{className:(0,d.cn)("bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]})},e.id))})})};var P=z;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
-  "sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const combinedTabs = useMemo(() => {\n    if (renderRating) {\n      return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n    }\n    return tabs\n  }, [tabs, renderRating])\n\n  const sectionIds = useMemo(() => {\n    return combinedTabs.map(tab => tab.id)\n  }, [combinedTabs])\n\n  const debouncedHandleResize = debounce(() => {\n    const purchaseBar = document.querySelector('#purchase-bar')\n    if (purchaseBar) {\n      setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!activeId || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeId)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeId])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n      className={cn('overflow-x-auto', className)}\n    >\n      <div className=\"tablet:gap-8 flex gap-6\">\n        {combinedTabs?.map(tab => (\n          <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n            {tab.id === 'ipc-review' ? (\n              <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n                {renderRating}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            ) : (\n              <div\n                className={cn(\n                  'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n                  {\n                    'text-[#1d1d1f]': activeId === tab.id,\n                  }\n                )}\n                onClick={() => onTabClick(tab)}\n              >\n                {tab.label}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            )}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAkE,iBAClEC,EAAyB,sBAEzBC,EAAmB,2CACnBC,EAA6B,6BAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUG,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOhB,EAAQO",
+  "sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const combinedTabs = useMemo(() => {\n    if (renderRating) {\n      return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n    }\n    return tabs\n  }, [tabs, renderRating])\n\n  const sectionIds = useMemo(() => {\n    return combinedTabs.map(tab => tab.id)\n  }, [combinedTabs])\n\n  const debouncedHandleResize = debounce(() => {\n    const purchaseBar = document.querySelector('#purchase-bar')\n    if (purchaseBar) {\n      setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!activeId || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeId)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeId])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n      className={cn('overflow-x-auto', className)}\n    >\n      <div className=\"tablet:gap-8 flex gap-6\">\n        {combinedTabs?.map(tab => (\n          <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n            {tab.id === 'ipc-review' ? (\n              <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n                {renderRating}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            ) : (\n              <div\n                className={cn(\n                  'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n                  {\n                    'text-[#1d1d1f]': activeId === tab.id,\n                  }\n                )}\n                onClick={() => onTabClick(tab)}\n              >\n                {tab.label}\n                <div\n                  className={cn(\n                    'bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            )}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAkE,iBAClEC,EAAyB,sBAEzBC,EAAmB,2CACnBC,EAA6B,6BAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,0FACA,CACE,SAAUG,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOhB,EAAQO",
   "names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_helpers", "import_useScrollSpy", "ScrollSpyNav", "tabs", "onSpyNavItemClick", "className", "renderRating", "purchaseBarHeight", "setPurchaseBarHeight", "combinedTabs", "sectionIds", "tab", "debouncedHandleResize", "purchaseBar", "activeId", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "element", "el"]
 }

package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.d.ts CHANGED Viewed

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

package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+interface TooltipState {
+    visible: boolean;
+    x: number;
+    y: number;
+    text: string;
+}
+export declare const useFollowTooltip: () => {
+    tooltip: TooltipState;
+    showTooltip: (e: React.MouseEvent, text: string) => void;
+    hideTooltip: () => void;
+    getTooltipProps: (text: string) => {
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+};
+export declare const FollowTooltip: ({ visible, x, y, text, className, }: TooltipState & {
+    className?: string;
+}) => import("react").ReactPortal | null;
+export default useFollowTooltip;

package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var f=(o,t)=>{for(var e in t)p(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,l)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of b(t))!x.call(o,i)&&i!==e&&p(o,i,{get:()=>t[i],enumerable:!(l=d(t,i))\|\|l.enumerable});return o};var v=o=>m(p({},"__esModule",{value:!0}),o);var w={};f(w,{FollowTooltip:()=>T,default:()=>g,useFollowTooltip:()=>u});module.exports=v(w);var c=require("react/jsx-runtime"),n=require("react"),a=require("react-dom");const u=()=>{const[o,t]=(0,n.useState)({visible:!1,x:0,y:0,text:""}),e=(0,n.useCallback)((s,r)=>{r&&t({visible:!0,x:s.clientX,y:s.clientY,text:r})},[]),l=(0,n.useCallback)(()=>{t(s=>({...s,visible:!1}))},[]);return{tooltip:o,showTooltip:e,hideTooltip:l,getTooltipProps:s=>({onMouseMove:r=>e(r,s),onMouseLeave:l})}},T=({visible:o,x:t,y:e,text:l,className:i})=>typeof window>"u"\|\|!o?null:(0,a.createPortal)((0,c.jsx)("div",{className:i\|\|"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${t+16}px`,top:`${e+16}px`},children:l}),document.body);var g=u;
2	+ //# sourceMappingURL=useFollowTooltip.js.map

package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/hooks/useFollowTooltip.tsx"],
+  "sourcesContent": ["import { useState, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface TooltipState {\n  visible: boolean\n  x: number\n  y: number\n  text: string\n}\n\nexport const useFollowTooltip = () => {\n  const [tooltip, setTooltip] = useState<TooltipState>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const showTooltip = useCallback((e: React.MouseEvent, text: string) => {\n    if (text) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text,\n      })\n    }\n  }, [])\n\n  const hideTooltip = useCallback(() => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }, [])\n\n  const getTooltipProps = (text: string) => ({\n    onMouseMove: (e: React.MouseEvent) => showTooltip(e, text),\n    onMouseLeave: hideTooltip,\n  })\n\n  return {\n    tooltip,\n    showTooltip,\n    hideTooltip,\n    getTooltipProps,\n  }\n}\n\nexport const FollowTooltip = ({\n  visible,\n  x,\n  y,\n  text,\n  className,\n}: TooltipState & { className?: string }) => {\n  if (typeof window === 'undefined' || !visible) return null\n\n  return createPortal(\n    <div\n      className={\n        className ||\n        'pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200'\n      }\n      style={{\n        left: `${x + 16}px`,\n        top: `${y + 16}px`,\n      }}\n    >\n      {text}\n    </div>,\n    document.body\n  )\n}\n\nexport default useFollowTooltip\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,YAAAC,EAAA,qBAAAC,IAAA,eAAAC,EAAAL,GAwDI,IAAAM,EAAA,6BAxDJC,EAAsC,iBACtCC,EAA6B,qBAStB,MAAMJ,EAAmB,IAAM,CACpC,KAAM,CAACK,EAASC,CAAU,KAAI,YAAuB,CACnD,QAAS,GACT,EAAG,EACH,EAAG,EACH,KAAM,EACR,CAAC,EAEKC,KAAc,eAAY,CAACC,EAAqBC,IAAiB,CACjEA,GACFH,EAAW,CACT,QAAS,GACT,EAAGE,EAAE,QACL,EAAGA,EAAE,QACL,KAAAC,CACF,CAAC,CAEL,EAAG,CAAC,CAAC,EAECC,KAAc,eAAY,IAAM,CACpCJ,EAAWK,IAAS,CAAE,GAAGA,EAAM,QAAS,EAAM,EAAE,CAClD,EAAG,CAAC,CAAC,EAOL,MAAO,CACL,QAAAN,EACA,YAAAE,EACA,YAAAG,EACA,gBATuBD,IAAkB,CACzC,YAAcD,GAAwBD,EAAYC,EAAGC,CAAI,EACzD,aAAcC,CAChB,EAOA,CACF,EAEaZ,EAAgB,CAAC,CAC5B,QAAAc,EACA,EAAAC,EACA,EAAAC,EACA,KAAAL,EACA,UAAAM,CACF,IACM,OAAO,OAAW,KAAe,CAACH,EAAgB,QAE/C,mBACL,OAAC,OACC,UACEG,GACA,uKAEF,MAAO,CACL,KAAM,GAAGF,EAAI,EAAE,KACf,IAAK,GAAGC,EAAI,EAAE,IAChB,EAEC,SAAAL,EACH,EACA,SAAS,IACX,EAGF,IAAOV,EAAQC",
+  "names": ["useFollowTooltip_exports", "__export", "FollowTooltip", "useFollowTooltip_default", "useFollowTooltip", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_dom", "tooltip", "setTooltip", "showTooltip", "e", "text", "hideTooltip", "prev", "visible", "x", "y", "className"]
+}

package/dist/cjs/biz-components/Marquee/Marquee.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
+import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
+import { type SwiperRef } from 'swiper/react';
 declare const MarqueeItem: {
     ({ data, configuration }: MarqueeItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -9,6 +10,6 @@ declare const MarqueeImageContent: {
     displayName: string;
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: any;
+declare const _default: React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<SwiperRef> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
 export default _default;
 export { MarqueeItem, MarqueeImageContent, MarqueeTextContent };

package/dist/cjs/biz-components/MarqueeReview/index.d.ts CHANGED Viewed

@@ -33,5 +33,5 @@ export interface MarqueeReviewProps extends React.HTMLAttributes<HTMLElement> {
     /** 评论数据 */
     data: MarqueeReviewData;
 }
-declare const _default: any;
+declare const _default: React.ForwardRefExoticComponent<MarqueeReviewProps & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/MediaEndorsement/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import 'swiper/css/pagination';
 import type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName } from './types.js';
-declare const _default: any;
+declare const _default: React.ForwardRefExoticComponent<MediaEndorsementProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
 export default _default;
 export type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName };

package/dist/cjs/biz-components/MediaPlayerBase/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
-declare const _default: any;
+import type { MediaPlayerBaseProps } from './types.js';
+declare const _default: import("react").ForwardRefExoticComponent<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
 export default _default;