npm - @anker-in/headless-ui - Versions diffs - 1.0.26-temp-111002 → 1.0.26-temp-111401-alpha.1763091370012 - Mend

@anker-in/headless-ui 1.0.26-temp-111002 → 1.0.26-temp-111401-alpha.1763091370012

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 (1211) 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, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } 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'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\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 =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\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  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[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=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\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          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\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  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\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                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.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                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\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          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\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          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -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          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -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=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\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=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain 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=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        // 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\">\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          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -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          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -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 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", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "jIndex", "ProductGalleryTab3DView"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } 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'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\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 =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\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  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=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\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          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\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  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\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                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.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                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  useEffect(() => {\n    if (commentRef.current) {\n      const container = commentRef.current\n      const contentHeight = container.scrollHeight\n      const containerHeight = container.clientHeight\n      const needsScroll = contentHeight > containerHeight\n      setShouldScroll(needsScroll)\n    }\n  }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\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          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\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          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -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          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -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=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\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=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain 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=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"overflow-hidden  max-w-[528px] relative\">\n              <div\n                ref={commentRef}\n                className={cn('h-10 lg-desktop:h-12', shouldScroll ? 'animate-marquee-scroll' : '')}\n                style={{\n                  animationDuration: `3s`,\n                }}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\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          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -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          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -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 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", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "contentHeight", "containerHeight", "needsScroll", "event", "jIndex", "ProductGalleryTab3DView"]
 }

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

@@ -1,3 +1,2 @@
-import type { ProductSummaryProps } from './types';
-declare const ProductSummary: ({}: ProductSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ProductSummary: () => import("react/jsx-runtime").JSX.Element | null;
 export default ProductSummary;

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

@@ -1,2 +1,2 @@
-"use strict";var M=Object.create;var E=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(n,t)=>{for(var o in t)E(n,o,{get:t[o],enumerable:!0})},G=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!Q.call(n,s)&&s!==o&&E(n,s,{get:()=>t[s],enumerable:!(i=W(t,s))||i.enumerable});return n};var X=(n,t,o)=>(o=n!=null?M(K(n)):{},G(t||!n||!n.__esModule?E(o,"default",{value:n,enumerable:!0}):o,n)),Y=n=>G(E({},"__esModule",{value:!0}),n);var te={};U(te,{default:()=>ee});module.exports=Y(te);var e=require("react/jsx-runtime"),a=require("../../../../../components"),k=require("../../../BizProductProvider"),g=require("react"),m=require("../../../utils"),P=require("../../../../AiuiProvider"),ie=require("../../../../../helpers"),B=X(require("decimal.js")),R=require("../../../utils/textFormat");const Z=({})=>{const{locale:n="us",copyWriting:t}=(0,P.useAiuiContext)(),{product:o,variant:i,finalPrice:s,comparePrice:u,coupon:b,selectedOptions:p,selectedVariants:r,totalSavings:h,onAddToCart:D,onBuyNow:z,savingDetail:N,checkedBundle:C,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:O,setCheckedExchangePurchase:x,setCheckedBundle:y,setSavingDetail:I,addToCartLoading:T,buyNowLoading:$}=(0,k.useBizProductContext)(),[w]=r,J=(0,g.useMemo)(()=>{const[d]=C?.variants||[],H=new B.default(w?.price?.amount||0).minus(d?.price||w?.price?.amount).toNumber();return new B.default(w?.price?.amount||0).minus(N?.coupon).minus(H).toNumber()},[w,h,C]);if(!i.availableForSale)return null;const{bundleVariant:A,giftVariant:F,exchangeVariant:j}=_()||{},[c,v]=(0,g.useState)();(0,g.useEffect)(()=>{v({bundle:l.bundle?.value?void 0:A,gift:l.gift?.value?void 0:F,exchange:l.exchange?.value?void 0:j})},[A,F,j,l]);const ne=(0,g.useMemo)(()=>new B.default(u).minus(N.freeGift).toNumber(),[u,N]);return(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[(0,e.jsxs)(a.GridItem,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[(0,e.jsx)(a.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full"})})]}),(0,e.jsxs)(a.GridItem,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${p.color||p.colour||p.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:J,currencyCode:i.price.currencyCode,locale:n})}),h>0&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(L,{giftOperation:d=>{O?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),v?.({...c,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(S,{bundleOperation:d=>{y?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),v?.({...c,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(V,{exchangeOperation:d=>{x?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),v?.({...c,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(c?.bundle||c?.gift||c?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[c?.exchange&&(0,e.jsx)(V,{exchangeOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),v?.({...c,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&(0,e.jsx)(S,{bundleOperation:d=>{O?.(void 0),x?.(void 0),I?.({...N,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),v?.({...c,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&(0,e.jsx)(L,{giftOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),v?.({...c,gift:void 0})},canOperate:l?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${(0,R.replaceTemplate)(t?.totalPrice||"",{amount:(0,m.formatPrice)({amount:s,currencyCode:i.price.currencyCode,locale:n})})}`}),h>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:u,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:T,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:$,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.shopNow})]})]})]})]})})})},_=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:s,exchangePurchase:u,checkedExchangePurchase:b}=(0,k.useBizProductContext)();let p,r,h;const{bundleList:D}=n||{},{giftList:z=[]}=i||{},{giftList:N=[]}=u||{},C=D?.filter(x=>x.variants.slice(1,x.variants.length).every(y=>y.variant.availableForSale))||[],[l]=C;p=o||l;const[f]=z?.filter(x=>x.availableForSale);r=s||f;const[O]=N?.filter(x=>x.availableForSale);return h=b||O,{bundleVariant:p,giftVariant:r,exchangeVariant:h}},S=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{variant:u,setCheckedBundle:b}=(0,k.useBizProductContext)(),p=t?.variants.filter(r=>r.variant.sku!==u.sku);return(0,e.jsx)("div",{className:"",children:p?.map(r=>(0,e.jsxs)("div",{className:"flex items-center gap-4 justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:r?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(a.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:r.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:r?.price||0,locale:s,currencyCode:r.variant?.price?.currencyCode||""})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:r.variant.price.amount||0,locale:s,currencyCode:r.variant?.price?.currencyCode||""})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]},r.variant.id))})},L=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{freeGift:u,setCheckedGift:b}=(0,k.useBizProductContext)(),{freeLabel:p,count:r}=u||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${r} | ${p}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:p}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:t.price.amount,locale:s,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},V=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:s="us"}=(0,P.useAiuiContext)(),{setCheckedExchangePurchase:u}=(0,k.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:t.finalPrice?.amount||0,locale:s,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:t.price?.amount||0,locale:s,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{u?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var ee=Z;
+"use strict";var K=Object.create;var w=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},R=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of U(t))!Y.call(n,r)&&r!==o&&w(n,r,{get:()=>t[r],enumerable:!(i=Q(t,r))||i.enumerable});return n};var ee=(n,t,o)=>(o=n!=null?K(X(n)):{},R(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),te=n=>R(w({},"__esModule",{value:!0}),n);var oe={};Z(oe,{default:()=>le});module.exports=te(oe);var e=require("react/jsx-runtime"),a=require("../../../../../components"),h=require("../../../BizProductProvider"),N=require("react"),p=require("../../../utils"),C=require("../../../../AiuiProvider"),A=ee(require("decimal.js")),$=require("../../../utils/textFormat");const ae=()=>{const{locale:n="us",copyWriting:t}=(0,C.useAiuiContext)(),{product:o,variant:i,finalPrice:r,comparePrice:m,coupon:b,selectedOptions:u,selectedVariants:c,totalSavings:P,onAddToCart:B,onBuyNow:D,savingDetail:v,checkedBundle:O,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:E,setCheckedExchangePurchase:x,setCheckedBundle:k,setSavingDetail:M,addToCartLoading:J,buyNowLoading:H,profile:j}=(0,h.useBizProductContext)(),[y]=c,F=(0,N.useMemo)(()=>{const d=O?.variants.find(q=>q.variant.sku===y?.sku),W=new A.default(y?.price?.amount||0).minus(d?.price||y?.price?.amount).toNumber();let z=new A.default(y?.price?.amount||0);j?.email&&(z=z.minus(v?.member||0));const _=z.minus(v?.coupon).minus(W).toNumber();return Math.floor(_*100)/100},[y,O,j,v?.member,v?.coupon]);if(!i.availableForSale)return null;const{bundleVariant:G,giftVariant:L,exchangeVariant:S}=ne()||{},[s,g]=(0,N.useState)();return(0,N.useEffect)(()=>{g({bundle:l.bundle?.value?void 0:G,gift:l.gift?.value?void 0:L,exchange:l.exchange?.value?void 0:S})},[G,L,S,l]),(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[(0,e.jsxs)(a.GridItem,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[(0,e.jsx)(a.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368]  desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-[center_36%]"})})]}),(0,e.jsxs)(a.GridItem,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${u.color||u.colour||u.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:F,currencyCode:i.price.currencyCode,locale:n})}),F<i?.price?.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(I,{giftOperation:d=>{E?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),g?.({...s,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(V,{bundleOperation:d=>{k?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),g?.({...s,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(T,{exchangeOperation:d=>{x?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),g?.({...s,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(s?.bundle||s?.gift||s?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[s?.exchange&&(0,e.jsx)(T,{exchangeOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),g?.({...s,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!s?.exchange,exchange:s?.exchange}),s?.bundle&&(0,e.jsx)(V,{bundleOperation:d=>{E?.(void 0),x?.(void 0),M?.({...v,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),g?.({...s,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!s?.bundle,bundleListItem:s?.bundle}),s?.gift&&(0,e.jsx)(I,{giftOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),g?.({...s,gift:void 0})},canOperate:l?.gift?.canOperate,status:!s?.gift,gift:s?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${(0,$.replaceTemplate)(t?.totalPrice||"",{amount:(0,p.formatPrice)({amount:Math.floor(r*100)/100,currencyCode:i.price.currencyCode,locale:n})})}`}),P>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:m,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:J,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>B?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:H,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},ne=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:r,exchangePurchase:m,checkedExchangePurchase:b}=(0,h.useBizProductContext)();let u,c,P;const{bundleList:B}=n||{},{giftList:D=[]}=i||{},{giftList:v=[]}=m||{},O=B?.filter(x=>x.variants.slice(1,x.variants.length).every(k=>k.variant.availableForSale))||[],[l]=O;u=o||l;const[f]=D?.filter(x=>x.availableForSale);c=r||f;const[E]=v?.filter(x=>x.availableForSale);return P=b||E,{bundleVariant:u,giftVariant:c,exchangeVariant:P}},V=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{variant:m,setCheckedBundle:b}=(0,h.useBizProductContext)(),u=t?.variants.filter(c=>c.variant.sku!==m.sku);return(0,e.jsx)("div",{className:"",children:u?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-4 justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:c?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(a.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:c.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:c?.price||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})}),c.price<c.variant.price.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:c.variant.price.amount||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]},c.variant.id))})},I=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{freeGift:m,setCheckedGift:b}=(0,h.useBizProductContext)(),{freeLabel:u,count:c}=m||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${c} | ${u}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:u}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price.amount,locale:r,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},T=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{setCheckedExchangePurchase:m}=(0,h.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:t.finalPrice?.amount||0,locale:r,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price?.amount||0,locale:r,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{m?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var le=ae;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    selectedVariants,\n    totalSavings,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    checkedBundle,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n    setCheckedGift,\n    setCheckedExchangePurchase,\n    setCheckedBundle,\n    setSavingDetail,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const [currentBundleVariant] = checkedBundle?.variants || []\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    return new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(savingDetail?.coupon)\n      .minus(currentBundlePrice)\n      .toNumber()\n  }, [currentProductVariant, totalSavings, checkedBundle])\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n    exchange?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n                imgClassName=\"object-cover h-full\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold\"\n                      html={formatPrice({\n                        amount: summaryFinalPrice,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                    {totalSavings > 0 && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: variant?.price?.amount,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift?.value && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setCheckedGift?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        gift: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift?.value}\n                    canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle?.value && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setCheckedBundle?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        bundle: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n                    canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange?.value && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setCheckedExchangePurchase?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        exchange: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                    exchange={joinedRecommendBuyProducts?.exchange?.value}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle ||\n                initialRecommendBuyProducts?.gift ||\n                initialRecommendBuyProducts?.exchange) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.exchange && (\n                      <ProductExchangeSummary\n                        exchangeOperation={exchange => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: joinedRecommendBuyProducts?.gift?.value,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: exchange,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setCheckedGift?.(undefined)\n                          setCheckedExchangePurchase?.(undefined)\n                          setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n                          setJoinedRecommendBuyProducts?.({\n                            gift: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            bundle: {\n                              value: bundle,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: joinedRecommendBuyProducts?.exchange?.value,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: gift,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                        status={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale }) })}`}\n              />\n\n              {totalSavings > 0 && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePrice,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2 justify-end\">\n                <Button\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  loading={addToCartLoading}\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onAddToCart?.()}\n                >\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  loading={buyNowLoading}\n                  variant=\"primary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onBuyNow?.()}\n                >\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n    useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  let exchangeVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n  const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale)\n  exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n  return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleListItem,\n  canOperate,\n  status,\n}: {\n  bundleOperation: (bundle?: BundleListItem) => void\n  bundleListItem?: BundleListItem\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4 justify-between\" key={bundleVariant.variant.id}>\n            <div className=\"flex items-center gap-4\">\n              <Picture\n                source={bundleVariant?.variant?.image?.url}\n                className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n              />\n              <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n                <Text\n                  className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  html={bundleVariant.variant.product.title}\n                />\n              </div>\n            </div>\n            <div className=\"flex flex-col items-end gap-1 justify-center\">\n              {!!bundleListItem && (\n                <div className=\"flex items-center gap-1\">\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold\"\n                    html={formatPrice({\n                      amount: bundleVariant?.price || 0,\n                      locale,\n                      currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                    })}\n                  />\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                    html={formatPrice({\n                      amount: bundleVariant.variant.price.amount || 0,\n                      locale,\n                      currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                    })}\n                  />\n                </div>\n              )}\n              {canOperate && (\n                <Button\n                  size=\"icon\"\n                  variant=\"link\"\n                  onClick={() => {\n                    setCheckedBundle?.(status ? undefined : bundleListItem)\n                    bundleOperation?.(bundleListItem)\n                  }}\n                  className=\"shrink-0 size-auto underline\"\n                >\n                  {!!status ? 'Remove' : 'Add'}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  status,\n  canOperate,\n}: {\n  giftOperation: (gift?: ProductVariant) => void\n  gift?: ProductVariant\n  status?: boolean\n  canOperate?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel, count } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={gift?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x${count} | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!gift && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedGift?.(status ? undefined : gift)\n              giftOperation(gift)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductExchangeSummary = ({\n  exchangeOperation,\n  exchange,\n  canOperate,\n  status,\n}: {\n  exchangeOperation: (exchange?: ProductVariant) => void\n  exchange?: ProductVariant & { finalPrice?: ProductPrice }\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { setCheckedExchangePurchase } = useBizProductContext()\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={exchange?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={exchange?.product?.title}\n          />\n          <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!exchange && (\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-base desktop:text-2xl font-bold\"\n              html={formatPrice({\n                amount: exchange.finalPrice?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: exchange.price?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedExchangePurchase?.(status ? undefined : exchange)\n              exchangeOperation(exchange)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
-  "mappings": "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",
-  "names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_helpers", "import_decimal", "import_textFormat", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setCheckedGift", "setCheckedExchangePurchase", "setCheckedBundle", "setSavingDetail", "addToCartLoading", "buyNowLoading", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "currentBundlePrice", "Decimal", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "bundleVariants", "giftOperation", "freeLabel", "count", "exchangeOperation"]
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductSummary = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    selectedVariants,\n    totalSavings,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    checkedBundle,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n    setCheckedGift,\n    setCheckedExchangePurchase,\n    setCheckedBundle,\n    setSavingDetail,\n    addToCartLoading,\n    buyNowLoading,\n    profile,\n  } = useBizProductContext()\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n    if (!!profile?.email) {\n      currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n    }\n    const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n    return Math.floor(finalPrice * 100) / 100\n  }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n    exchange?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"lg-desktop:aspect-[644/368]  desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n                imgClassName=\"object-cover h-full object-[center_36%]\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold\"\n                      html={formatPrice({\n                        amount: summaryFinalPrice,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                    {summaryFinalPrice < variant?.price?.amount && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: variant?.price?.amount,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift?.value && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setCheckedGift?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        gift: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift?.value}\n                    canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle?.value && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setCheckedBundle?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        bundle: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n                    canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange?.value && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setCheckedExchangePurchase?.(undefined)\n                      setJoinedRecommendBuyProducts?.({\n                        ...joinedRecommendBuyProducts,\n                        exchange: {\n                          value: undefined,\n                          canOperate: true,\n                        },\n                      })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                    exchange={joinedRecommendBuyProducts?.exchange?.value}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle ||\n                initialRecommendBuyProducts?.gift ||\n                initialRecommendBuyProducts?.exchange) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.exchange && (\n                      <ProductExchangeSummary\n                        exchangeOperation={exchange => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: joinedRecommendBuyProducts?.gift?.value,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: exchange,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setCheckedGift?.(undefined)\n                          setCheckedExchangePurchase?.(undefined)\n                          setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n                          setJoinedRecommendBuyProducts?.({\n                            gift: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            bundle: {\n                              value: bundle,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setCheckedBundle?.(undefined)\n                          setJoinedRecommendBuyProducts?.({\n                            bundle: {\n                              value: undefined,\n                              canOperate: true,\n                            },\n                            exchange: {\n                              value: joinedRecommendBuyProducts?.exchange?.value,\n                              canOperate: true,\n                            },\n                            gift: {\n                              value: gift,\n                              canOperate: true,\n                            },\n                          })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n                        status={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n              />\n\n              {totalSavings > 0 && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePrice,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2 justify-end\">\n                <Button\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  loading={addToCartLoading}\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onAddToCart?.()}\n                >\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  loading={buyNowLoading}\n                  variant=\"primary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onBuyNow?.()}\n                >\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n    useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  let exchangeVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n  const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale)\n  exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n  return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleListItem,\n  canOperate,\n  status,\n}: {\n  bundleOperation: (bundle?: BundleListItem) => void\n  bundleListItem?: BundleListItem\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4 justify-between\" key={bundleVariant.variant.id}>\n            <div className=\"flex items-center gap-4\">\n              <Picture\n                source={bundleVariant?.variant?.image?.url}\n                className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n              />\n              <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n                <Text\n                  className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  html={bundleVariant.variant.product.title}\n                />\n              </div>\n            </div>\n            <div className=\"flex flex-col items-end gap-1 justify-center\">\n              {!!bundleListItem && (\n                <div className=\"flex items-center gap-1\">\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold\"\n                    html={formatPrice({\n                      amount: bundleVariant?.price || 0,\n                      locale,\n                      currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                    })}\n                  />\n                  {bundleVariant.price < bundleVariant.variant.price.amount && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: bundleVariant.variant.price.amount || 0,\n                        locale,\n                        currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n                      })}\n                    />\n                  )}\n                </div>\n              )}\n              {canOperate && (\n                <Button\n                  size=\"icon\"\n                  variant=\"link\"\n                  onClick={() => {\n                    setCheckedBundle?.(status ? undefined : bundleListItem)\n                    bundleOperation?.(bundleListItem)\n                  }}\n                  className=\"shrink-0 size-auto underline\"\n                >\n                  {!!status ? 'Remove' : 'Add'}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  status,\n  canOperate,\n}: {\n  giftOperation: (gift?: ProductVariant) => void\n  gift?: ProductVariant\n  status?: boolean\n  canOperate?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel, count } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={gift?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x${count} | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!gift && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedGift?.(status ? undefined : gift)\n              giftOperation(gift)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductExchangeSummary = ({\n  exchangeOperation,\n  exchange,\n  canOperate,\n  status,\n}: {\n  exchangeOperation: (exchange?: ProductVariant) => void\n  exchange?: ProductVariant & { finalPrice?: ProductPrice }\n  canOperate?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { setCheckedExchangePurchase } = useBizProductContext()\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={exchange?.image?.url}\n          className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={exchange?.product?.title}\n          />\n          <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!exchange && (\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-base desktop:text-2xl font-bold\"\n              html={formatPrice({\n                amount: exchange.finalPrice?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: exchange.price?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {canOperate && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedExchangePurchase?.(status ? undefined : exchange)\n              exchangeOperation(exchange)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
+  "mappings": "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",
+  "names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setCheckedGift", "setCheckedExchangePurchase", "setCheckedBundle", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "bundleVariants", "giftOperation", "freeLabel", "count", "exchangeOperation"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var T=Object.create;var m=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of B(t))!M.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(c=P(t,r))||c.enumerable});return e};var z=(e,t,o)=>(o=e!=null?T(F(e)):{},g(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),L=e=>g(m({},"__esModule",{value:!0}),e);var O={};A(O,{default:()=>G});module.exports=L(O);var a=require("react/jsx-runtime"),l=require("../../../../../components"),v=require("../../../../AiuiProvider/index.js"),f=require("../../../BizProductProvider.js"),s=require("react"),n=require("../../../utils"),C=z(require("decimal.js")),p=require("../../../utils/textFormat");const D=()=>{const{copyWriting:e,locale:t="us"}=(0,v.useAiuiContext)(),{variant:o,finalPrice:c,totalSavings:r,memberFunctionResult:x,isLogin:d,comparePrice:u,onAddToCart:y,onBuyNow:N,savingDetail:b,coupon:R,addToCartLoading:S,buyNowLoading:w}=(0,f.useBizProductContext)(),W=(0,s.useMemo)(()=>new C.default(u).minus(b.freeGift).toNumber(),[u,b]),i=Math.max(x?.withCouponMemberTotalSave??0,x?.withoutCouponMaxMemberTotalSave??0),h=(0,s.useMemo)(()=>(0,p.replaceTemplate)(e?.totalSavings||"",{amount:(0,n.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),[e?.totalSavings,r,o.price.currencyCode,t]),k=(0,s.useMemo)(()=>(0,p.replaceTemplate)(e?.memberSaving||"",{amount:(0,n.formatPrice)({amount:i,currencyCode:o.price.currencyCode,locale:t})}),[e?.memberSaving,i,o.price.currencyCode,t]);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4",children:[o.availableForSale?(0,a.jsxs)("div",{className:"flex items-center justify-between tablet:flex-col desktop:items-end",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.Text,{className:"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:c,currencyCode:o.price.currencyCode,locale:t})}),(r>0||i>0&&d)&&(0,a.jsx)(l.Text,{className:"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:u,currencyCode:o.price.currencyCode,locale:t})})]}),(r>0||i>0&&d)&&(0,a.jsx)(l.Text,{className:"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${i>0&&d?k:h}`})]}):(0,a.jsx)(l.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[(0,a.jsx)(l.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>y?.(),loading:S,children:e?.addToCart??"Add to Cart"}),(0,a.jsx)(l.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:w,className:"w-1/2 tablet:w-auto",onClick:()=>N?.(),children:e?.buyNow??"Buy Now"})]})]})};var G=D;
+"use strict";var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of w(t))!S.call(e,r)&&r!==o&&d(e,r,{get:()=>t[r],enumerable:!(m=N(t,r))||m.enumerable});return e};var P=e=>k(d({},"__esModule",{value:!0}),e);var A={};h(A,{default:()=>B});module.exports=P(A);var a=require("react/jsx-runtime"),l=require("../../../../../components"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),s=require("react"),n=require("../../../utils"),u=require("../../../utils/textFormat");const T=()=>{const{copyWriting:e,locale:t="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:m,totalSavings:r,memberFunctionResult:F,isLogin:c,comparePrice:b,onAddToCart:g,onBuyNow:f,savingDetail:i,coupon:z,addToCartLoading:v,buyNowLoading:y,profile:L}=(0,x.useBizProductContext)(),C=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.totalSavings||"",{amount:(0,n.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),[e?.totalSavings,r,o.price.currencyCode,t]),M=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.memberSaving||"",{amount:(0,n.formatPrice)({amount:i?.member,currencyCode:o.price.currencyCode,locale:t})}),[e?.memberSaving,i?.member,o.price.currencyCode,t]);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4 desktop:p-0 tablet:flex tablet:justify-end tablet:items-center tablet:gap-4",children:[o.availableForSale?(0,a.jsxs)("div",{className:"flex flex-col justify-between desktop:items-end",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.Text,{className:"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:Math.floor(m*100)/100,currencyCode:o.price.currencyCode,locale:t})}),(r>0||i?.member>0&&c)&&(0,a.jsx)(l.Text,{className:"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:b,currencyCode:o.price.currencyCode,locale:t})}),i?.member>0&&c&&(0,a.jsx)(l.Text,{className:"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded",html:e?.memberPrice||"Member Price"})]}),(r>0||i?.member>0&&c)&&(0,a.jsx)(l.Text,{className:"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${C}`})]}):(0,a.jsx)(l.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[(0,a.jsx)(l.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>g?.(),loading:v,children:e?.addToCart??"Add to Cart"}),(0,a.jsx)(l.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:y,className:"w-1/2 tablet:w-auto",onClick:()=>f?.(),children:e?.buyNow??"Buy Now"})]})]})};var B=T;
 //# 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 } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductActions = () => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    memberFunctionResult,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    coupon,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  const memberPriceSave = Math.max(\n    memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n    memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n  )\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({ amount: memberPriceSave, currencyCode: variant.price.currencyCode, locale }),\n    })\n  }, [copyWriting?.memberSaving, memberPriceSave, variant.price.currencyCode, locale])\n\n  return (\n    <div className=\"bg-white py-3 px-4 tablet:p-0 tablet:flex tablet:items-center tablet:gap-4\">\n      {variant.availableForSale ? (\n        <div className=\"flex items-center justify-between tablet:flex-col desktop:items-end\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n              html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n            />\n            {(totalSavings > 0 || memberPriceSave > 0 && isLogin ) && (\n              <Text\n                className=\"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n          </div>\n          {(totalSavings > 0 || (memberPriceSave > 0 && isLogin)) && (\n            <Text\n              className=\"text-brand-0 text-base !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\n              html={`${memberPriceSave > 0 && isLogin ? memberPriceSaveText : totalSavingsText}`}\n            />\n          )}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"w-1/2 tablet:w-auto\"\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=\"w-1/2 tablet:w-auto\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductActions\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAnDVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAoB,yBACpBC,EAAgC,qCAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAA8B,WAClC,IAAM,IAAI,EAAAC,QAAQR,CAAY,EAAE,MAAMG,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACH,EAAcG,CAAY,CAC7B,EAEMM,EAAkB,KAAK,IAC3BX,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAEMY,KAAmB,WAAQ,OACxB,mBAAgBjB,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,EAE1EiB,KAAsB,WAAQ,OAC3B,mBAAgBlB,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQgB,EAAiB,aAAcd,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CACnG,CAAC,EACA,CAACD,GAAa,aAAcgB,EAAiBd,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAEnF,SACE,QAAC,OAAI,UAAU,6EACZ,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,sEACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAAE,OAAQC,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,EAC5F,GACEG,EAAe,GAAKY,EAAkB,GAAKV,OAC3C,OAAC,QACC,UAAU,gGACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcL,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GAEJ,GACEG,EAAe,GAAMY,EAAkB,GAAKV,OAC5C,OAAC,QACC,UAAU,sFACV,KAAM,GAAGU,EAAkB,GAAKV,EAAUY,EAAsBD,CAAgB,GAClF,GAEJ,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMjB,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAC7B,QAASI,EAER,SAAAZ,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASW,EACT,UAAU,sBACV,QAAS,IAAMJ,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOX,EAAQU",
-  "names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_decimal", "import_textFormat", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "addToCartLoading", "buyNowLoading", "comparePriceRemovedFreeGift", "Decimal", "memberPriceSave", "totalSavingsText", "memberPriceSaveText"]
+  "sourcesContent": ["import { Text, Button } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductActions = () => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    memberFunctionResult,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    coupon,\n    addToCartLoading,\n    buyNowLoading,\n    profile,\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    <div className=\"bg-white py-3 px-4 desktop:p-0 tablet:flex tablet:justify-end tablet:items-center tablet:gap-4\">\n      {variant.availableForSale ? (\n        <div className=\"flex flex-col justify-between desktop:items-end\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\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=\"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            {savingDetail?.member > 0 && isLogin && (\n              <Text className=\"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded\" html={copyWriting?.memberPrice || 'Member Price'} />\n            )}\n          </div>\n          {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n            <Text\n              className=\"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\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=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"w-1/2 tablet:w-auto\"\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=\"w-1/2 tablet:w-auto\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductActions\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6CU,IAAAI,EAAA,6BA7CVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAgC,qCAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBf,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,EAE1Ee,KAAsB,WAAQ,OAC3B,mBAAgBhB,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAClB,OAAQU,GAAc,OACtB,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,CACH,CAAC,EACA,CAACD,GAAa,aAAcU,GAAc,OAAQR,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAExF,SACE,QAAC,OAAI,UAAU,iGACZ,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,kDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAChB,OAAQ,KAAK,MAAMC,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMM,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,gGACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcL,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDS,GAAc,OAAS,GAAKJ,MAC3B,OAAC,QAAK,UAAU,gEAAgE,KAAMN,GAAa,aAAe,eAAgB,GAEtI,GACEI,EAAe,GAAMM,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,wFACV,KAAM,GAAGS,CAAgB,GAC3B,GAEJ,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMf,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAC7B,QAASI,EAER,SAAAZ,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASW,EACT,UAAU,sBACV,QAAS,IAAMJ,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOV,EAAQS",
+  "names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "addToCartLoading", "buyNowLoading", "profile", "totalSavingsText", "memberPriceSaveText"]
 }

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

@@ -1,4 +1,3 @@
 import type { ScrollSpyNavProps } from './types.js';
-declare const MobileScrollSpyNav: ({ tabs, purchaseBarHeight, onSpyNavItemClick }: ScrollSpyNavProps) => import("react/jsx-runtime").JSX.Element;
-declare const DesktopScrollSpyNav: ({ tabs, onSpyNavItemClick }: ScrollSpyNavProps) => import("react/jsx-runtime").JSX.Element;
-export { MobileScrollSpyNav, DesktopScrollSpyNav };
+declare const ScrollSpyNav: ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollSpyNav;

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

@@ -1,2 +1,2 @@
-"use strict";var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var s in t)c(e,s,{get:t[s],enumerable:!0})},y=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of w(t))!N.call(e,l)&&l!==s&&c(e,l,{get:()=>t[l],enumerable:!(a=g(t,l))||a.enumerable});return e};var C=e=>y(c({},"__esModule",{value:!0}),e);var A={};k(A,{DesktopScrollSpyNav:()=>v,MobileScrollSpyNav:()=>u});module.exports=C(A);var o=require("react/jsx-runtime"),D=require("../../../../AiuiProvider/index.js"),p=require("../../../../../helpers/index.js"),n=require("react"),m=require("gsap"),f=require("../../../BizProductProvider.js");const E=e=>(0,o.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,o.jsx)("path",{d:"M3 4.5L6 7.5L9 4.5",stroke:"#1D1D1F",strokeLinecap:"round",strokeLinejoin:"round"})}),u=({tabs:e,purchaseBarHeight:t,onSpyNavItemClick:s})=>{const[a,l]=(0,n.useState)(!1),[r,b]=(0,n.useState)(e?.[0]),d=(0,n.useRef)(null),{renderRating:x}=(0,f.useBizProductContext)(),S=(0,n.useCallback)(i=>{b(i),s?.(i),l(!1)},[]),h=(0,n.useCallback)(()=>{l(!a),m.gsap.fromTo(d?.current,{height:0},{height:"auto",duration:.5,ease:"power2.inOut"})},[a]);return(0,o.jsxs)("div",{children:[(0,o.jsxs)("button",{className:"text-sm h-[28px] font-bold flex gap-1 items-center leading-[28px] px-[10px] border rounded-full border-black",onClick:h,children:[r?.label,(0,o.jsx)(E,{className:"size-3"})]}),(0,o.jsxs)("div",{className:(0,p.cn)("absolute top-full w-full flex flex-col z-[60] bg-black/60 left-0",{hidden:!a}),style:{height:`calc(100dvh - ${t}px)`},children:[(0,o.jsxs)("div",{ref:d,className:"border-t overflow-hidden border-[#E4E5E6] flex flex-col bg-white",children:[e?.map(i=>(0,o.jsx)("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",onClick:()=>S(i),children:i.label},i.id)),(0,o.jsx)("button",{className:"text-sm hover:bg-[#EAEAEC] p-4 text-left font-bold",children:x})]}),(0,o.jsx)("div",{className:"flex-1",onClick:()=>l(!1)})]})]})},v=({tabs:e,onSpyNavItemClick:t})=>{const[s,a]=(0,n.useState)(e?.[0]),l=(0,n.useCallback)(r=>{a(r),t?.(r)},[]);return(0,o.jsx)("div",{className:"flex gap-8",children:e?.map(r=>(0,o.jsxs)("button",{className:"text-sm relative py-[10px] font-bold",onClick:()=>l(r),children:[r.label,(0,o.jsx)("div",{className:(0,p.cn)("absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":s?.id===r.id})})]},r.id))})};
+"use strict";var I=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var i in r)I(e,i,{get:r[i],enumerable:!0})},M=(e,r,i,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of C(r))!N.call(e,n)&&n!==i&&I(e,n,{get:()=>r[n],enumerable:!(u=x(r,n))||u.enumerable});return e};var k=e=>M(I({},"__esModule",{value:!0}),e);var P={};B(P,{default:()=>L});module.exports=k(P);var y=require("react/jsx-runtime"),A=require("../../../../AiuiProvider/index.js"),w=require("../../../../../helpers/index.js"),o=require("react"),D=require("gsap"),$=require("../../../BizProductProvider.js");const H=(e,r)=>{const[i,u]=(0,o.useState)(null),n=(0,o.useRef)(null),f=(0,o.useRef)(new Map),d=(0,o.useRef)(!1),g=(0,o.useRef)(null);(0,o.useEffect)(()=>{g.current=i},[i]),(0,o.useEffect)(()=>{if(!e||e.length===0)return;n.current&&n.current.disconnect();const p=document.getElementById("purchase-bar"),t=p?p.clientHeight:100;f.current.clear();const l=[];if(e.forEach(c=>{const a=c.id||c.href?.replace("#",""),T=document.getElementById(a);T&&(f.current.set(a,c),l.push(T))}),l.length===0){u(e[0]);return}const m={root:null,rootMargin:`-${t}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},h=c=>{if(d.current)return;if((window.scrollY||document.documentElement.scrollTop)<t+50){const s=e[0];s&&g.current?.id!==s.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",s.label),u(s),r?.(s));return}const T=c.filter(s=>s.isIntersecting).sort((s,b)=>s.boundingClientRect.top-b.boundingClientRect.top);if(T.length>0){const b=T[0].target.id,v=f.current.get(b);v&&(u(v),r?.(v))}else{const s=[...c].sort((b,v)=>Math.abs(b.boundingClientRect.top)-Math.abs(v.boundingClientRect.top));if(s.length>0){const v=s[0].target.id,R=f.current.get(v);R&&(u(R),r?.(R))}}};n.current=new IntersectionObserver(h,m),l.forEach(c=>{n.current?.observe(c)});const S=()=>{if(d.current)return;if((window.scrollY||document.documentElement.scrollTop)<t+50){const a=e[0];a&&(u(a),r?.(a))}};return window.addEventListener("scroll",S,{passive:!0}),()=>{n.current&&n.current.disconnect(),window.removeEventListener("scroll",S)}},[e]),(0,o.useEffect)(()=>{!i&&e&&e.length>0&&u(e[0])},[e,i]);const E=(0,o.useCallback)(p=>{u(p);const t=p.id||p.href?.replace("#",""),l=document.getElementById(t);if(l){const m=document.getElementById("purchase-bar"),h=m?m.clientHeight:100;d.current=!0;const c=l.getBoundingClientRect().top+window.scrollY-h-10;window.scrollTo({top:c,behavior:"smooth"}),setTimeout(()=>{d.current=!1},1e3)}},[]);return{activeTab:i||e?.[0],setActiveTab:E}},O=({tabs:e,onSpyNavItemClick:r,className:i,renderRating:u})=>{const{activeTab:n,setActiveTab:f}=H(e),d=(0,o.useRef)(null),g=(0,o.useRef)(new Map),E=(0,o.useCallback)(t=>{f(t),r?.(t)},[r,f]);(0,o.useEffect)(()=>{if(!n||!d.current)return;const t=g.current.get(n.id);if(!t)return;const l=d.current,m=t.getBoundingClientRect(),h=l.getBoundingClientRect(),S=m.left+m.width/2-h.left,c=h.width/2,a=S-c;l.scrollTo({left:l.scrollLeft+a,behavior:"smooth"})},[n?.id]);const p=(0,o.useCallback)((t,l)=>{l?g.current.set(t,l):g.current.delete(t)},[]);return(0,y.jsxs)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,w.cn)("flex tablet:gap-8 gap-6 overflow-x-auto",i),children:[e?.map(t=>(0,y.jsxs)("button",{ref:l=>p(t.id,l),className:(0,w.cn)("text-sm  relative py-[10px] font-bold text-[#949494] desktop:text-[#1d1d1f] whitespace-nowrap flex-shrink-0",{"text-[#1d1d1f]":n?.id===t.id}),onClick:()=>E(t),children:[t.label,(0,y.jsx)("div",{className:(0,w.cn)("absolute hidden desktop:block bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":n?.id===t.id})})]},t.id)),u]})};var L=O;
 //# sourceMappingURL=index.js.map