@anker-in/headless-ui 1.3.24 → 1.3.25

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n  sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: MultiLayoutGraphicBlockProps['data']\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n *  - slidesPerView=1, loop=true, each Item occupies full-width slide\n *  - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n *  - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n *  - Video pause/play on slide change\n *  - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n  ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carouselConfig\n\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n    const showDots = carousel?.showDots ?? true\n    const autoplaySeconds = carousel?.autoplaySeconds\n    const size = carousel?.size ?? 'base'\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n    // Slide container refs for imperative video pause via querySelectorAll\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n    // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n    useEffect(() => {\n      const swiper = swiperRef.current\n      if (!swiper || !paginationEl) return\n      if (swiper.pagination) {\n        swiper.pagination.el = paginationEl\n        swiper.pagination.init()\n        swiper.pagination.render()\n        swiper.pagination.update()\n      }\n    }, [paginationEl])\n\n    const activeTheme = items[activeIndex]?.theme ?? 'light'\n    const isDark = activeTheme === 'dark'\n\n    useEffect(() => {\n      const handleVisibilityChange = () => {\n        const swiper = swiperRef.current\n        if (!swiper) return\n\n        if (document.visibilityState === 'hidden') {\n          swiper.autoplay?.stop()\n        } else {\n          swiper.autoplay?.start()\n          const currentIndex = swiper.realIndex ?? 0\n          slideContainerRefs.current.forEach((cRef, i) => {\n            if (!cRef.current) return\n            cRef.current.querySelectorAll('video').forEach(v => {\n              if (i !== currentIndex) v.pause()\n            })\n          })\n        }\n      }\n      document.addEventListener('visibilitychange', handleVisibilityChange)\n      return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n    }, [])\n\n    const swiperModules =\n      autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds != null && autoplaySeconds > 0\n        ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n        : false\n\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      const activeContainer = slideContainerRefs.current[newIndex]\n      if (activeContainer?.current) {\n        activeContainer.current.querySelectorAll('video').forEach(v => {\n          if (v.paused) {\n            const p = v.play()\n            p?.catch(() => {})\n          }\n        })\n      }\n      setActiveIndex(newIndex)\n    }, [])\n\n    const { locale } = useAiuiContext()\n    const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n    const { sectionTitle, shape } = data\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          'multilayout-graphic-block-carousel group relative w-full',\n          'laptop:overflow-hidden',\n          'laptop:block flex flex-col',\n          currentSizeClasses,\n          { 'aiui-dark': isDark },\n          className\n        )}\n        {...rest}\n      >\n        {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n        <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n          <Swiper\n            className=\"laptop:h-full h-[400px]\"\n            onSwiper={s => (swiperRef.current = s)}\n            onSlideChange={handleSlideChange}\n            modules={swiperModules}\n            slidesPerView={1}\n            loop={true}\n            initialSlide={0}\n            allowTouchMove={true}\n            autoplay={autoplayConfig}\n            pagination={\n              showDots\n                ? {\n                    clickable: true,\n                    el: paginationEl,\n                    renderBullet: (_index: number, className: string) =>\n                      `<span class=\"${className} banner-dot\"></span>`,\n                  }\n                : false\n            }\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"h-full\">\n                <div\n                  ref={slideContainerRefs.current[index]}\n                  className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n                    'aiui-dark': item.theme === 'dark',\n                    'rounded-2xl': shape === 'rounded',\n                  })}\n                >\n                  {/* Block link overlay */}\n                  {(item.blockLink || item.secondaryButton?.link) && (\n                    <a\n                      className=\"absolute inset-0 z-10\"\n                      href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n                      aria-hidden=\"true\"\n                      tabIndex={-1}\n                    />\n                  )}\n\n                  {/* Background media */}\n                  <div className=\"absolute inset-0\">\n                    {isVideo(item.imageUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageUrl?.url}\n                        alt={item.imageUrl?.alt || ''}\n                        className=\"tablet:block hidden h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                    {isVideo(item.imageMobileUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageMobileUrl?.url || item.imageUrl?.url}\n                        alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n                        className=\"tablet:hidden block h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                  </div>\n\n                  {/* Text content */}\n                  <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n                    <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n                      <div className=\"flex flex-col gap-1\">\n                        <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n                        <Text\n                          className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n                          html={item.description}\n                        />\n                      </div>\n                      <div className=\"lg-desktop:gap-3 flex gap-2\">\n                        {item.secondaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-left\"\n                            variant=\"secondary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n                            onClick={onSecondaryButtonClick}\n                          >\n                            {item.secondaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                        {item.primaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-right\"\n                            variant=\"primary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n                            onClick={onPrimaryButtonClick}\n                          >\n                            {item.primaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {/* Arrow navigation */}\n          {showArrowControls && (\n            <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slidePrev()}\n                aria-label=\"Previous slide\"\n              >\n                <ChevronLeft />\n              </button>\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slideNext()}\n                aria-label=\"Next slide\"\n              >\n                <ChevronRight />\n              </button>\n            </div>\n          )}\n\n          {/* Pagination dots */}\n          {showDots && (\n            <div\n              ref={setPaginationEl}\n              className={cn(\n                'multilayout-carousel-pagination swiper-pagination',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n                '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n                '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n                'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n                'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n                { 'aiui-dark': isDark }\n              )}\n            />\n          )}\n        </div>\n      </section>\n    )\n  }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n  sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: MultiLayoutGraphicBlockProps['data']\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n *  - slidesPerView=1, loop=true, each Item occupies full-width slide\n *  - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n *  - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n *  - Video pause/play on slide change\n *  - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n  ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carouselConfig\n\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n    const showDots = carousel?.showDots ?? true\n    const autoplaySeconds = carousel?.autoplaySeconds\n    const size = carousel?.size ?? 'base'\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n    // Slide container refs for imperative video pause via querySelectorAll\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n    // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n    useEffect(() => {\n      const swiper = swiperRef.current\n      if (!swiper || !paginationEl) return\n      if (swiper.pagination) {\n        swiper.pagination.el = paginationEl\n        swiper.pagination.init()\n        swiper.pagination.render()\n        swiper.pagination.update()\n      }\n    }, [paginationEl])\n\n    const activeTheme = items[activeIndex]?.theme ?? 'light'\n    const isDark = activeTheme === 'dark'\n\n    useEffect(() => {\n      const handleVisibilityChange = () => {\n        const swiper = swiperRef.current\n        if (!swiper) return\n\n        if (document.visibilityState === 'hidden') {\n          swiper.autoplay?.stop()\n        } else {\n          swiper.autoplay?.start()\n          const currentIndex = swiper.realIndex ?? 0\n          slideContainerRefs.current.forEach((cRef, i) => {\n            if (!cRef.current) return\n            cRef.current.querySelectorAll('video').forEach(v => {\n              if (i !== currentIndex) v.pause()\n            })\n          })\n        }\n      }\n      document.addEventListener('visibilitychange', handleVisibilityChange)\n      return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n    }, [])\n\n    const swiperModules =\n      autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds != null && autoplaySeconds > 0\n        ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n        : false\n\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      const activeContainer = slideContainerRefs.current[newIndex]\n      if (activeContainer?.current) {\n        activeContainer.current.querySelectorAll('video').forEach(v => {\n          if (v.paused) {\n            const p = v.play()\n            p?.catch(() => {})\n          }\n        })\n      }\n      setActiveIndex(newIndex)\n    }, [])\n\n    const { locale } = useAiuiContext()\n    const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n    const { sectionTitle, shape } = data\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          'multilayout-graphic-block-carousel group relative w-full',\n          'laptop:overflow-hidden',\n          'laptop:block flex flex-col',\n          currentSizeClasses,\n          { 'aiui-dark': isDark },\n          className\n        )}\n        {...rest}\n      >\n        {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n        <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n          <Swiper\n            className=\"laptop:h-full h-[400px]\"\n            onSwiper={s => (swiperRef.current = s)}\n            onSlideChange={handleSlideChange}\n            modules={swiperModules}\n            slidesPerView={1}\n            loop={true}\n            initialSlide={0}\n            allowTouchMove={true}\n            autoplay={autoplayConfig}\n            pagination={\n              showDots\n                ? {\n                    clickable: true,\n                    el: paginationEl,\n                    renderBullet: (_index: number, className: string) =>\n                      `<span class=\"${className} banner-dot\"></span>`,\n                  }\n                : false\n            }\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"h-full\">\n                <div\n                  ref={slideContainerRefs.current[index]}\n                  className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n                    'aiui-dark': item.theme === 'dark',\n                    'rounded-box': true,\n                  })}\n                >\n                  {/* Block link overlay */}\n                  {(item.blockLink || item.secondaryButton?.link) && (\n                    <a\n                      className=\"absolute inset-0 z-10\"\n                      href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n                      aria-hidden=\"true\"\n                      tabIndex={-1}\n                    />\n                  )}\n\n                  {/* Background media */}\n                  <div className=\"absolute inset-0\">\n                    {isVideo(item.imageUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageUrl?.url}\n                        alt={item.imageUrl?.alt || ''}\n                        className=\"tablet:block hidden h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                    {isVideo(item.imageMobileUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageMobileUrl?.url || item.imageUrl?.url}\n                        alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n                        className=\"tablet:hidden block h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                  </div>\n\n                  {/* Text content */}\n                  <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n                    <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n                      <div className=\"flex flex-col gap-1\">\n                        <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n                        <Text\n                          className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n                          html={item.description}\n                        />\n                      </div>\n                      <div className=\"lg-desktop:gap-3 flex gap-2\">\n                        {item.secondaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-left\"\n                            variant=\"secondary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n                            onClick={onSecondaryButtonClick}\n                          >\n                            {item.secondaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                        {item.primaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-right\"\n                            variant=\"primary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n                            onClick={onPrimaryButtonClick}\n                          >\n                            {item.primaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {/* Arrow navigation */}\n          {showArrowControls && (\n            <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slidePrev()}\n                aria-label=\"Previous slide\"\n              >\n                <ChevronLeft />\n              </button>\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slideNext()}\n                aria-label=\"Next slide\"\n              >\n                <ChevronRight />\n              </button>\n            </div>\n          )}\n\n          {/* Pagination dots */}\n          {showDots && (\n            <div\n              ref={setPaginationEl}\n              className={cn(\n                'multilayout-carousel-pagination swiper-pagination',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n                '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n                '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n                'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n                'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n                { 'aiui-dark': isDark }\n              )}\n            />\n          )}\n        </div>\n      </section>\n    )\n  }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useRef", "useCallback", "useState", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "cn", "getLocalizedPath", "Title", "Button", "Heading", "Picture", "Text", "isVideo", "useAiuiContext", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "shape", "s", "_index", "item", "index", "MultiLayoutGraphicBlockCarousel_default"]
 }

package/dist/esm/biz-components/SearchPage/index.js

@@ -1,2 +1,2 @@
-import{Fragment as C,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as T,Tabs as q,TabsList as J,TabsTrigger as Q,TabsContent as z,Text as h,Picture as P,Link as X,Button as S,DropdownMenu as Y,DropdownMenuTrigger as Z,DropdownMenuContent as V,DropdownMenuItem as ee,LoadingDots as E}from"../../components/index.js";import{DownArrow as te}from"../HeaderNavigation/icons/index.js";import{useMemo as u,useRef as se,useState as D}from"react";import{cn as y,atobID as ae,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{formatVariantPrice as le}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as v}from"./types.js";import{getLocalizedPath as w}from"../../helpers/utils.js";import{replaceTemplate as oe}from"../Listing/utils/textFormat.js";const K=({product:t,onSecondaryButton:i,onPrimaryButton:a,searchValue:p,variantData:m,shopNowLoadingProductId:b})=>{const o=u(()=>m||t?.variants?.[0],[t,m]),{locale:g="us",copyWriting:d}=M(),N=b===t?.id,x=u(()=>w(`/products/${t?.handle}?variant=${ae(o?.id)}?ref=search_result_${p?.toLowerCase()}`,g),[t?.handle,o?.id,p,g]),_=o?.coupons?.[0],{price:L,basePrice:n}=le({locale:g,amount:_?_.variant_price4wscode:o?.price?.amount??o?.price,baseAmount:_?o?.price?.amount??o?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),I=u(()=>t?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden",children:t?.type==="advertising"&&t?.advertisingLink?l(X,{href:w(t?.advertisingLink,g),className:"h-full",children:[e(P,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(h,{html:t?.advertisingTitle,className:y("desktop:text-base text-sm font-bold leading-[1.2]",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&e(T,{size:3,html:t?.advertisingSubtitle,className:y("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):l("a",{href:x,className:"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(P,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${o?.image?.url||t?.images?.[0]?.url}}`,alt:t?.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:I?.map((r,B)=>e(h,{as:"p",html:r,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"},B))}),e(h,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",p||"")}),e(h,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t?.description,p||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:o?.availableForSale?l(C,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:o?.availableForSale&&L||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:o?.availableForSale&&n||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:d?.soldOutText||"Sold Out"})}),l("div",{className:y("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[d?.learnMoreText&&e(S,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",onClick:r=>{r.preventDefault(),r.stopPropagation(),i?.()},children:d?.learnMoreText}),d?.shopNowText&&e(S,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!o?.availableForSale,loading:N,onClick:r=>{r.preventDefault(),r.stopPropagation(),a?.()},children:d?.shopNowText})]})]})]})]})})},ie=({blog:t,searchValue:i})=>{const{copyWriting:a,locale:p="us"}=M(),m=u(()=>w(`/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,p),[t,p]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden",children:e(P,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(T,{size:3,html:k(t?.title,i)}),e(h,{html:k(t?.content,i),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(S,{as:"a",href:m,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},re=({searchValue:t,page:i})=>{const{copyWriting:a,locale:p="us"}=M(),m=u(()=>w(`/${i?.handle}`,p),[i,p]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(T,{size:3,html:k(i?.name,t)}),e(h,{as:"p",html:k(i?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(S,{as:"a",href:m,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},A=({url:t,label:i})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(P,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(h,{html:i,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),O=({products:t,title:i,buildProps:a,onSecondaryButton:p,onPrimaryButton:m})=>{const{products:b}=a||{};return console.log(b,"buildProducts"),l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(T,{size:4,weight:"bold",html:i}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((o,g)=>{const d=b?.find(x=>x.handle===o.handle);if(!d)return null;const N=d?.variants?.find(x=>x.sku===o.sku);return e(K,{product:d,variantData:N,onSecondaryButton:()=>p?.(),onPrimaryButton:()=>m?.()},o.sku+g)})})]})},ne=({searchResult:t,searchValue:i,data:a,onSecondaryButton:p,onPrimaryButton:m,onChangeSort:b,loading:o,shopNowLoadingProductId:g,searchResultCount:d,onChangeTab:N,buildProps:x,className:_,...L})=>{const[n,I]=D(a?.tabs?.[0]),r=se(!1),[B,W]=D(!1),[R,j]=D({[v.PRODUCTS]:a?.tabs?.find(s=>s.tabType===v.PRODUCTS)?.sortKeys?.[0],[v.BLOGS]:a?.tabs?.find(s=>s.tabType===v.BLOGS)?.sortKeys?.[0],[v.PAGES]:a?.tabs?.find(s=>s.tabType===v.PAGES)?.sortKeys?.[0]}),f=u(()=>t?.products||[],[t]),$=u(()=>t?.blogs||[],[t]),G=u(()=>t?.pages||[],[t]),F=u(()=>Object.values(d||{}).reduce((s,c)=>s+c,0),[d]),U=u(()=>{const s={advertisingBgImg:`${n?.advertisingBgImg?.url}, ${n?.advertisingMobBgImg?.url} 768`,advertisingTitle:n?.advertisingTitle,advertisingSubtitle:n?.advertisingSubtitle,advertisingLink:n?.advertisingLink,advertisingTheme:n?.advertisingTheme,type:"advertising"};return!r.current&&f?.length&&(f?.length>=8?(f?.splice(7,0,s),r.current=!0):(f?.push(s),r.current=!0)),f},[n,f]);return l("div",{...L,className:y("ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",_),children:[e(T,{size:4,weight:"bold",html:oe(a?.title,{totalCount:F?.toString(),inputValue:`"${i}"`})}),e("div",{className:"mt-6",children:l(q,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(J,{children:a?.tabs?.map(s=>l(Q,{onClick:()=>{I(s),r.current=!1;const c=s?.sortKeys?.[0];c&&(j(H=>({...H,[s?.tabType]:c})),b?.(s?.tabType,c)),N?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",d?.[s.tabType],")"]},s.id))}),l(Y,{onOpenChange:W,children:[e(Z,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none",children:[n?.sortLabel," ",R?.[n?.tabType]?.label," ",e(te,{className:y("inline-block size-4",{"rotate-180":B})})]})}),e(V,{align:"start",sideOffset:8,className:"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none",children:n?.sortKeys?.map(s=>e(ee,{className:y("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none",{"bg-[#EAEAEC]":R?.[n?.tabType]?.value===s.value}),onClick:()=>{r.current=!1,b?.(n?.tabType,s),j(c=>({...c,[n?.tabType]:s}))},children:s.label},s.id))})]})]}),l(z,{value:v.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:U?.map((s,c)=>e(K,{searchValue:i,product:s,shopNowLoadingProductId:g,onSecondaryButton:()=>p?.(s),onPrimaryButton:()=>m?.(s)},(s.id||"")+c))}),o?e("div",{className:"mt-6 flex w-full justify-center",children:e(E,{})}):!f?.length&&l(C,{children:[e(A,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(O,{products:a?.recommendProducts||[],buildProps:x,title:a?.recommendProductsTitle,shopNowLoadingProductId:g})]})]}),e(z,{value:v.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[$?.map(s=>e(ie,{blog:s,searchValue:i},s.id)),o?e("div",{className:"mt-6 flex justify-center",children:e(E,{})}):!$?.length&&l(C,{children:[e(A,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(O,{products:a?.recommendProducts||[],buildProps:x,title:a?.recommendProductsTitle})]})]})}),l(z,{value:v.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:G?.map((s,c)=>e(re,{page:s,searchValue:i},(s.global_id||s.id)+c))}),o?e("div",{className:"mt-6 flex justify-center",children:e(E,{})}):!G?.length&&l(C,{children:[e(A,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(O,{products:a?.recommendProducts||[],buildProps:x,title:a?.recommendProductsTitle,shopNowLoadingProductId:g})]})]})]})})]})};var fe=ne;export{fe as default};
+import{Fragment as I,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as T,Tabs as H,TabsList as q,TabsTrigger as J,TabsContent as E,Text as h,Picture as w,Link as Q,Button as C,DropdownMenu as X,DropdownMenuTrigger as Y,DropdownMenuContent as Z,DropdownMenuItem as V,LoadingDots as A}from"../../components/index.js";import{DownArrow as ee}from"../HeaderNavigation/icons/index.js";import{useMemo as u,useState as M}from"react";import{cn as y,atobID as te,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as O}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as x}from"./types.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{replaceTemplate as ae}from"../Listing/utils/textFormat.js";const W=({product:t,onSecondaryButton:i,onPrimaryButton:a,searchValue:n,variantData:m,shopNowLoadingProductId:b})=>{const o=u(()=>m||t?.variants?.[0],[t,m]),{locale:g="us",copyWriting:p,currencyCode:N}=O(),v=b===t?.id,B=u(()=>L(`/products/${t?.handle}?variant=${te(o?.id)}?ref=search_result_${n?.toLowerCase()}`,g),[t?.handle,o?.id,n,g]),_=o?.coupons?.[0],{price:r,basePrice:D}=se({locale:N==="CAD"?"us":g||"us",amount:_?_.variant_price4wscode:o?.price?.amount??o?.price,baseAmount:_?o?.price?.amount??o?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),z=u(()=>t?.tags?.filter?.(d=>d?.startsWith?.("CLtag"))?.map?.(d=>d?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden",children:t?.type==="advertising"&&t?.advertisingLink?l(Q,{href:L(t?.advertisingLink,g),className:"h-full",children:[e(w,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(h,{html:t?.advertisingTitle,className:y("desktop:text-base text-sm font-bold leading-[1.2]",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&e(T,{size:3,html:t?.advertisingSubtitle,className:y("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):l("a",{href:B,className:"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(w,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:o?.image?.url||t?.images?.[0]?.url,alt:t?.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:z?.map((d,P)=>e(h,{as:"p",html:d,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] border-brand-0 h-full rounded-full border-[1.6px] px-[6px] text-sm font-bold !leading-[22px]"},P))}),e(h,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",n||"")}),e(h,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t?.description,n||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:o?.availableForSale?l(I,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:o?.availableForSale&&r||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:o?.availableForSale&&D||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:p?.soldOutText||"Sold Out"})}),l("div",{className:y("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[p?.learnMoreText&&e(C,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",onClick:d=>{d.preventDefault(),d.stopPropagation(),i?.()},children:p?.learnMoreText}),p?.shopNowText&&e(C,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!o?.availableForSale,loading:v,onClick:d=>{d.preventDefault(),d.stopPropagation(),a?.()},children:p?.shopNowText})]})]})]})]})})},le=({blog:t,searchValue:i})=>{const{copyWriting:a,locale:n="us"}=O(),m=u(()=>L(`/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,n),[t,n]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden",children:e(w,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(T,{size:3,html:k(t?.title,i)}),e(h,{html:k(t?.content,i),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(C,{as:"a",href:m,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},oe=({searchValue:t,page:i})=>{const{copyWriting:a,locale:n="us"}=O(),m=u(()=>L(`/${i?.handle}`,n),[i,n]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(T,{size:3,html:k(i?.name,t)}),e(h,{as:"p",html:k(i?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(C,{as:"a",href:m,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},j=({url:t,label:i})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(w,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(h,{html:i,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),R=({products:t,title:i,buildProps:a,onSecondaryButton:n,onPrimaryButton:m})=>{const{products:b}=a||{};return console.log(b,"buildProducts"),l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(T,{size:4,weight:"bold",html:i}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((o,g)=>{const p=b?.find(v=>v.handle===o.handle);if(!p)return null;const N=p?.variants?.find(v=>v.sku===o.sku);return e(W,{product:p,variantData:N,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>m?.()},o.sku+g)})})]})},ie=({searchResult:t,searchValue:i,data:a,onSecondaryButton:n,onPrimaryButton:m,onChangeSort:b,loading:o,shopNowLoadingProductId:g,searchResultCount:p,onChangeTab:N,buildProps:v,className:B,..._})=>{const[r,D]=M(a?.tabs?.[0]),[z,d]=M(!1),[P,$]=M({[x.PRODUCTS]:a?.tabs?.find(s=>s.tabType===x.PRODUCTS)?.sortKeys?.[0],[x.BLOGS]:a?.tabs?.find(s=>s.tabType===x.BLOGS)?.sortKeys?.[0],[x.PAGES]:a?.tabs?.find(s=>s.tabType===x.PAGES)?.sortKeys?.[0]}),S=u(()=>t?.products||[],[t]),G=u(()=>t?.blogs||[],[t]),K=u(()=>t?.pages||[],[t]),F=u(()=>Object.values(p||{}).reduce((s,c)=>s+c,0),[p]),U=u(()=>{const s={advertisingBgImg:`${r?.advertisingBgImg?.url}, ${r?.advertisingMobBgImg?.url} 768`,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,advertisingTheme:r?.advertisingTheme,type:"advertising"};if(!!r?.advertisingBgImg?.url||!!r?.advertisingTitle||!!r?.advertisingLink){const f=[...S||[]];return f.length>=8?f.splice(7,0,s):f.length>0&&f.push(s),f}else return S},[r,S]);return l("div",{..._,className:y("ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",B),children:[e(T,{size:4,weight:"bold",html:ae(a?.title,{totalCount:F?.toString(),inputValue:`"${i}"`})}),e("div",{className:"mt-6",children:l(H,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(q,{children:a?.tabs?.map(s=>l(J,{onClick:()=>{D(s);const c=s?.sortKeys?.[0];c&&($(f=>({...f,[s?.tabType]:c})),b?.(s?.tabType,c)),N?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",p?.[s.tabType],")"]},s.id))}),l(X,{onOpenChange:d,children:[e(Y,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none",children:[r?.sortLabel," ",P?.[r?.tabType]?.label," ",e(ee,{className:y("inline-block size-4",{"rotate-180":z})})]})}),e(Z,{align:"start",sideOffset:8,className:"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none",children:r?.sortKeys?.map(s=>e(V,{className:y("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none",{"bg-[#EAEAEC]":P?.[r?.tabType]?.value===s.value}),onClick:()=>{b?.(r?.tabType,s),$(c=>({...c,[r?.tabType]:s}))},children:s.label},s.id))})]})]}),l(E,{value:x.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:U?.map((s,c)=>e(W,{searchValue:i,product:s,shopNowLoadingProductId:g,onSecondaryButton:()=>n?.(s),onPrimaryButton:()=>m?.(s)},(s.id||"")+c))}),o?e("div",{className:"mt-6 flex w-full justify-center",children:e(A,{})}):!S?.length&&l(I,{children:[e(j,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(R,{products:a?.recommendProducts||[],buildProps:v,title:a?.recommendProductsTitle,shopNowLoadingProductId:g})]})]}),e(E,{value:x.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[G?.map(s=>e(le,{blog:s,searchValue:i},s.id)),o?e("div",{className:"mt-6 flex justify-center",children:e(A,{})}):!G?.length&&l(I,{children:[e(j,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(R,{products:a?.recommendProducts||[],buildProps:v,title:a?.recommendProductsTitle})]})]})}),l(E,{value:x.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:K?.map((s,c)=>e(oe,{page:s,searchValue:i},(s.global_id||s.id)+c))}),o?e("div",{className:"mt-6 flex justify-center",children:e(A,{})}):!K?.length&&l(I,{children:[e(j,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(R,{products:a?.recommendProducts||[],buildProps:v,title:a?.recommendProductsTitle,shopNowLoadingProductId:g})]})]})]})})]})};var xe=ie;export{xe as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SearchPage/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
-  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n  shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n  const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n  const listingLink = useMemo(() => {\n    return getLocalizedPath(\n      `/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`,\n      locale\n    )\n  }, [product?.handle, variant?.id, searchValue, locale])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : (variant?.price?.amount ?? variant?.price),\n    baseAmount: coupon ? (variant?.price?.amount ?? variant?.price) : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden\">\n      {product?.type === 'advertising' && product?.advertisingLink ? (\n        <Link href={getLocalizedPath(product?.advertisingLink, locale)} className=\"h-full\">\n          <Picture\n            source={`${product?.advertisingBgImg}`}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text\n              html={product?.advertisingTitle}\n              className={cn('desktop:text-base text-sm font-bold leading-[1.2]', {\n                'text-white': product?.advertisingTheme === 'light',\n                'text-info-primary': product?.advertisingTheme === 'dark',\n              })}\n            />\n            {product?.advertisingSubtitle && (\n              <Heading\n                size={3}\n                html={product?.advertisingSubtitle}\n                className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n                  'text-white': product?.advertisingTheme === 'light',\n                  'text-info-primary': product?.advertisingTheme === 'dark',\n                })}\n              />\n            )}\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product?.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product?.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    onClick={e => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                      onSecondaryButton?.()\n                    }}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    loading={isCurrentProductLoading}\n                    onClick={e => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                      onPrimaryButton?.()\n                    }}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n\n  const articleLink = useMemo(\n    () => getLocalizedPath(`/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`, locale),\n    [blog, locale]\n  )\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => getLocalizedPath(`/${page?.handle}`, locale), [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  console.log(buildProducts, 'buildProducts')\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          if (!buildProduct) return null\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.sku + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  shopNowLoadingProductId,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n  className,\n  ...rest\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      advertisingTheme: currentTab?.advertisingTheme,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16',\n        className\n      )}\n    >\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={replaceTemplate(data?.title, {\n          totalCount: totalCount?.toString(),\n          inputValue: `\"${searchValue}\"`,\n        })}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    isInsertAdvertising.current = false\n                    // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n                    const defaultSortKey = tab?.sortKeys?.[0]\n                    if (defaultSortKey) {\n                      setCurrentSortKey((prev: any) => ({\n                        ...prev,\n                        [tab?.tabType]: defaultSortKey,\n                      }))\n                      onChangeSort?.(tab?.tabType, defaultSortKey)\n                    }\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"start\"\n                sideOffset={8}\n                className=\"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none\"\n              >\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={(product.id || '') + index}\n                  product={product}\n                  shopNowLoadingProductId={shopNowLoadingProductId}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                    shopNowLoadingProductId={shopNowLoadingProductId}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                    shopNowLoadingProductId={shopNowLoadingProductId}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "getLocalizedPath", "replaceTemplate", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "className", "rest", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "defaultSortKey", "prev", "sortKey", "SearchPage_default"]
+  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n  shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting, currencyCode } = useAiuiContext()\n\n  // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n  const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n  const listingLink = useMemo(() => {\n    return getLocalizedPath(\n      `/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`,\n      locale\n    )\n  }, [product?.handle, variant?.id, searchValue, locale])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n    amount: coupon ? coupon.variant_price4wscode : (variant?.price?.amount ?? variant?.price),\n    baseAmount: coupon ? (variant?.price?.amount ?? variant?.price) : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden\">\n      {product?.type === 'advertising' && product?.advertisingLink ? (\n        <Link href={getLocalizedPath(product?.advertisingLink, locale)} className=\"h-full\">\n          <Picture\n            source={`${product?.advertisingBgImg}`}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n            <Text\n              html={product?.advertisingTitle}\n              className={cn('desktop:text-base text-sm font-bold leading-[1.2]', {\n                'text-white': product?.advertisingTheme === 'light',\n                'text-info-primary': product?.advertisingTheme === 'dark',\n              })}\n            />\n            {product?.advertisingSubtitle && (\n              <Heading\n                size={3}\n                html={product?.advertisingSubtitle}\n                className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n                  'text-white': product?.advertisingTheme === 'light',\n                  'text-info-primary': product?.advertisingTheme === 'dark',\n                })}\n              />\n            )}\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n              source={variant?.image?.url || product?.images?.[0]?.url}\n              alt={product?.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n                {tags?.map((tag: string, index: number) => (\n                  <Text\n                    key={index}\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] border-brand-0 h-full rounded-full border-[1.6px] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n                html={highlightSearchWord(product?.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    onClick={e => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                      onSecondaryButton?.()\n                    }}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"laptop:w-auto w-full\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    loading={isCurrentProductLoading}\n                    onClick={e => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                      onPrimaryButton?.()\n                    }}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n\n  const articleLink = useMemo(\n    () => getLocalizedPath(`/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`, locale),\n    [blog, locale]\n  )\n\n  return (\n    <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n      <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n        <div className=\"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n          />\n          <div className=\"desktop:mt-6 mt-4\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => getLocalizedPath(`/${page?.handle}`, locale), [page, locale])\n  return (\n    <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  console.log(buildProducts, 'buildProducts')\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          if (!buildProduct) return null\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.sku + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  shopNowLoadingProductId,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n  className,\n  ...rest\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      advertisingTheme: currentTab?.advertisingTheme,\n      type: 'advertising',\n    }\n    // \u5E7F\u544A\u4F4D\u6838\u5FC3\u5B57\u6BB5\u5168\u4E3A\u7A7A\u65F6\uFF0C\u4E0D\u63D2\u5165\u5E7F\u544A\u6570\u636E\n    const hasAdvertisingData =\n      !!currentTab?.advertisingBgImg?.url || !!currentTab?.advertisingTitle || !!currentTab?.advertisingLink\n\n    if (hasAdvertisingData) {\n      const result = [...(searchProductsResult || [])]\n      if (result.length >= 8) {\n        result.splice(7, 0, advertisingData)\n      } else if (result.length > 0) {\n        result.push(advertisingData)\n      }\n      return result\n    } else {\n      return searchProductsResult\n    }\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16',\n        className\n      )}\n    >\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={replaceTemplate(data?.title, {\n          totalCount: totalCount?.toString(),\n          inputValue: `\"${searchValue}\"`,\n        })}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n                    const defaultSortKey = tab?.sortKeys?.[0]\n                    if (defaultSortKey) {\n                      setCurrentSortKey((prev: any) => ({\n                        ...prev,\n                        [tab?.tabType]: defaultSortKey,\n                      }))\n                      onChangeSort?.(tab?.tabType, defaultSortKey)\n                    }\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('inline-block size-4', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"start\"\n                sideOffset={8}\n                className=\"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none\"\n              >\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none',\n                        {\n                          'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={(product.id || '') + index}\n                  product={product}\n                  shopNowLoadingProductId={shopNowLoadingProductId}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex w-full justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                    shopNowLoadingProductId={shopNowLoadingProductId}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"mt-6 flex justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"mt-6 flex justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                    shopNowLoadingProductId={shopNowLoadingProductId}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "getLocalizedPath", "replaceTemplate", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "currencyCode", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "className", "rest", "currentTab", "setCurrentTab", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "result", "defaultSortKey", "prev", "sortKey", "SearchPage_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js

@@ -1,2 +1,2 @@
-import{Fragment as ge,jsx as i,jsxs as b}from"react/jsx-runtime";import{useAiuiContext as ve}from"../AiuiProvider/index.js";import{formatVariantPrice as be}from"./shelfDisplay.js";import he from"../../components/picture.js";import xe from"../../components/badge.js";import{cn as v}from"../../helpers/utils.js";import{Text as ke}from"../../components/text.js";import ie from"../../components/button.js";import{gaTrack as we}from"../../shared/track.js";import{trackUrlRef as _e}from"../../shared/trackUrlRef.js";import{Heading as Se}from"../../components/heading.js";import{useExposure as Ne}from"../../hooks/useExposure.js";import{useRef as Te,useEffect as Be,useMemo as oe,useState as P}from"react";const ne="image",le="product_shelf",ae=999999999e-2,Ce=e=>{const t=e?.sku,_=e?.variants,S=_?.find(L=>L?.sku===t),W=S?.image?.url||_?.[0]?.image?.url||"",U=S?.image?.altText||_?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:W,altText:U}},ze=({data:e,configuration:t})=>{const{isDisplayBackImage:_=!1,itemShape:S,metafields:W,isTopTag:U=!1,isShowTag:L,isShowOriginalPrice:Q,isShowShortTitle:ce=!1,formatPrice:$,renderOriginalPrice:z,renderPriceLabel:X,renderPrice:y}=t||{},{locale:N="es",copyWriting:me,currencyDisplay:Y}=ve(),{discounts:Z,discountsCopy:H}=W||{},E=Te(null),[R,ee]=P([]),[V,pe]=P(""),[te,c]=P(!1),[q,se]=P(!1),D=(s,r,o,l)=>{const{primaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.primaryButton?.(s,r+1,o,l)},de=(s,r,o,l)=>{const{secondaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.secondaryButton?.(s,r+1,o,l)},m=oe(()=>{const s=e?.variants||[];if(s.length)return e?.sku?s?.find?.(r=>r?.sku===e?.sku)||s[0]:s?.[0]},[e?.sku,e?.variants]),u=m?.id?.split?.("/")||[],G=u?.[u?.length-1],T=!m?.availableForSale||m?.price?.amount===ae||m?.price===ae,h=m?.coupons?.[0],B=!!(Q&&h),C=e?.price?.currencyCode||"USD",k=oe(()=>be({locale:N,amount:B?h?.variant_price4wscode:m?.price,baseAmount:B?m?.price:0,currencyCode:C,currencyDisplay:Y,customFormatPrice:$}),[C,N,B,h?.variant_price4wscode,m,$]),{price:x,basePrice:I,discount:w,discountAmount:f}=k,{imageUrl:A,altText:F}=Ce(e),M=e?.custom_name||e?.title,J=ce&&m?.metafields?.infos?.page_short_title||M,j=e?.custom_description||e?.description,ue=()=>{if(h?.value_type==="fixed_amount"){const s=f||"",r=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,o,l,p]=r;let d=l;return l.endsWith(".00")?d=l.replace(/\.00$/,""):l.endsWith(",00")&&(d=l.replace(/,00$/,"")),`${o}${d}${p}`}return s}return w||""};Be(()=>{let s=[];if(w||f){const o=`${ue()} ${Z?.off||H?.off||""}`;pe(o),s.push(o)}const r=e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,w?1:2);ee(s.concat(r))},[e?.tags,w,f,Z?.off,H?.off]),Ne(E,{componentType:ne,componentName:le,componentTitle:M,componentDescription:j,position:t?.index+1});const fe=async()=>{if(!te&&!e?.custom_primary_link){c(!0);try{await D(e,t?.index,t,h)}finally{c(!1)}}},O=async()=>{if(!q&&!e?.custom_secondary_link){se(!0);try{await de(e,t?.index,t,h)}finally{se(!1)}}},re=()=>b(ge,{children:[L&&R?.length>0?i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:R?.map?.((s,r)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:s},r))}):null,J?i(Se,{as:"h3",title:J||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary line-clamp-2 h-12",html:J||""}):null,i(ke,{size:2,className:"lg-desktop:text-lg desktop:h-[24px] lg-desktop:h-[28px] desktop:text-base shelf-display-product-description text-info-primary line-clamp-1 h-[20px] text-sm",html:j||""}),i("div",{className:"mb-2 mt-4 flex items-center",children:y?y(e,{price:x,basePrice:I,discount:w,discountAmount:f,variant:m,coupon:h,isSoldOut:T}):T?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:me?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:m?.availableForSale&&x||""}),z?z(e,{price:x,basePrice:I,discount:w,discountAmount:f}):I&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:m?.availableForSale&&I||""})]})}),!y&&X?.(e,m),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:T&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:O,loading:q,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:T&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:fe,loading:te,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]}),n=e?.custom_bg_image,a=e?.custom_theme;return i("div",{ref:E,className:v("box-border w-full cursor-pointer overflow-hidden duration-300",S==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item",n?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":a==="dark"}),style:n?{backgroundImage:`url(${n})`}:void 0,children:_?i("div",{className:"absolute inset-0 box-border overflow-hidden",children:b("div",{className:"relative inset-0 size-full",children:[i(he,{source:A,alt:F,className:v("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":n})}),i("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):b("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[V&&U&&i(xe,{className:"shelf-prices-tag absolute left-4 top-4 z-10",variant:"fill",children:V||""}),i("div",{className:v("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden",{"opacity-0":n}),children:i("a",{"aria-label":M,target:t?.target,href:_e(`${N==="us"||!N?"":`/${N}`}/products/${e?.handle}?variant=${G}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||m?.sku,item_name:e?.name,item_variant:m?.name,price:m?.price,index:t?.index+1}]}})},children:i(he,{source:A,alt:F,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},He=({data:e,configuration:t})=>{const{itemShape:_,itemLength:S,metafields:W,isShowShortTitle:U,formatPrice:L,renderOriginalPrice:Q,renderPriceLabel:ce,renderPrice:$}=t||{},{discounts:z,discountsCopy:X}=W||{},{locale:y="us",copyWriting:N,currencyDisplay:me}=ve(),[Y,Z]=P([]),H=Te(null),[E,R]=P(!1),[ee,V]=P(!1),pe=(n,a,s,r)=>{const{primaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.primaryButton?.(n,a+1,s,r)},te=(n,a,s,r)=>{const{secondaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.secondaryButton?.(n,a+1,s,r)},c=oe(()=>{const n=e?.variants||[];if(n.length)return e?.sku&&n.find(a=>a?.sku===e?.sku)||n[0]},[e?.sku,e?.variants]),q=c?.id?.split?.("/")||[],se=q?.[q?.length-1],D=!c?.availableForSale||c?.price?.amount===ae||c?.price===ae,de=t?.isShowTag,m=t?.isShowOriginalPrice,u=c?.coupons?.[0],G=!!(m&&u),T=e?.price?.currencyCode||"USD",h=oe(()=>be({locale:y,amount:G?u?.variant_price4wscode:c?.price,baseAmount:G?c?.price:0,currencyCode:T,currencyDisplay:me,customFormatPrice:L}),[T,y,G,u?.variant_price4wscode,c,L]),{price:B,basePrice:C,discount:k,discountAmount:x}=h,{imageUrl:I,altText:w}=Ce(e),f=e?.custom_name||e?.title,A=U&&c?.metafields?.infos?.page_short_title||f,F=e?.custom_description||e?.description;Ne(H,{componentType:ne,componentName:le,componentTitle:f,componentDescription:F,position:t?.index+1});const M=async()=>{if(!E&&!e?.custom_primary_link){R(!0);try{await pe(e,t?.index,t,u)}finally{R(!1)}}},J=async()=>{if(!ee&&!e?.custom_secondary_link){V(!0);try{await te(e,t?.index,t,u)}finally{V(!1)}}},j=()=>S>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>S>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",fe=()=>{if(u?.value_type==="fixed_amount"){const n=x||"",a=n.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(a){const[,s,r,o]=a;let l=r;return r.endsWith(".00")?l=r.replace(/\.00$/,""):r.endsWith(",00")&&(l=r.replace(/,00$/,"")),`${s}${l}${o}`}return n}return k||""};Be(()=>{let n=[];if(k||x){const s=`${fe()} ${z?.off||X?.off||""}`;n.push(s)}const a=e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);Z(n.concat(a))},[e?.tags,k,x,z?.off,X?.off]);const O=e?.custom_bg_image,re=e?.custom_theme;return i("div",{ref:H,className:v(j().wrap,_==="round"?"rounded-2xl":"rounded-none","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",O?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":re==="dark"}),style:O?{backgroundImage:`url(${O})`}:void 0,children:b("div",{className:v(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[i("div",{className:v(j().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":O}),children:i("a",{"aria-label":f,target:t?.target,href:_e(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${se}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||c?.sku,item_name:e?.name,item_variant:c?.name,price:c?.price,index:t?.index+1}]}})},children:i(he,{source:I,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b("div",{className:v("flex flex-col items-start justify-center",j().boxItem),children:[de&&i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Y?.length>0&&Y?.map?.((n,a)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:n},a))}),A?i(Se,{as:"h3",title:A||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:A||""}):null,F?i(ke,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:F||""}):null,i("div",{className:"mb-2 mt-5 flex items-center",children:$?$(e,{price:B,basePrice:C,discount:k,discountAmount:x,variant:c,coupon:u,isSoldOut:D}):D?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:N?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:c?.availableForSale&&B||""}),Q?Q(e,{price:B,basePrice:C,discount:k,discountAmount:x}):C&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:c?.availableForSale&&C||""})]})}),!$&&ce?.(e,c),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:D&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:J,loading:ee,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:D&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:M,loading:E,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{He as ShelfDisplayHorizontalItem,ze as ShelfDisplayWrapItem,Ce as getProductImage};
+import{Fragment as ge,jsx as i,jsxs as b}from"react/jsx-runtime";import{useAiuiContext as ve}from"../AiuiProvider/index.js";import{formatVariantPrice as be}from"./shelfDisplay.js";import he from"../../components/picture.js";import xe from"../../components/badge.js";import{cn as v}from"../../helpers/utils.js";import{Text as ke}from"../../components/text.js";import ie from"../../components/button.js";import{gaTrack as we}from"../../shared/track.js";import{trackUrlRef as _e}from"../../shared/trackUrlRef.js";import{Heading as Se}from"../../components/heading.js";import{useExposure as Ne}from"../../hooks/useExposure.js";import{useRef as Te,useEffect as Be,useMemo as oe,useState as B}from"react";const ne="image",le="product_shelf",ae=999999999e-2,Ce=e=>{const t=e?.sku,C=e?.variants,P=C?.find(L=>L?.sku===t),W=P?.image?.url||C?.[0]?.image?.url||"",U=P?.image?.altText||C?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:W,altText:U}},ze=({data:e,configuration:t})=>{const{isDisplayBackImage:C=!1,itemShape:P,metafields:W,isTopTag:U=!1,isShowTag:L,isShowOriginalPrice:Q,isShowShortTitle:ce=!1,formatPrice:$,renderOriginalPrice:z,renderPriceLabel:X,renderPrice:y}=t||{},{locale:_="es",copyWriting:me,currencyDisplay:Y}=ve(),{discounts:Z,discountsCopy:H}=W||{},E=Te(null),[R,ee]=B([]),[V,pe]=B(""),[te,c]=B(!1),[q,se]=B(!1),D=(s,r,o,l)=>{const{primaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.primaryButton?.(s,r+1,o,l)},de=(s,r,o,l)=>{const{secondaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.secondaryButton?.(s,r+1,o,l)},m=oe(()=>{const s=e?.variants||[];if(s.length)return e?.sku?s?.find?.(r=>r?.sku===e?.sku)||s[0]:s?.[0]},[e?.sku,e?.variants]),u=m?.id?.split?.("/")||[],G=u?.[u?.length-1],S=!m?.availableForSale||m?.price?.amount===ae||m?.price===ae,h=m?.coupons?.[0],N=!!(Q&&h),T=e?.price?.currencyCode||"USD",k=oe(()=>be({locale:_,amount:N?h?.variant_price4wscode:m?.price,baseAmount:N?m?.price:0,currencyCode:T,currencyDisplay:Y,customFormatPrice:$}),[T,_,N,h?.variant_price4wscode,m,$]),{price:x,basePrice:I,discount:w,discountAmount:f}=k,{imageUrl:A,altText:F}=Ce(e),M=e?.custom_name||e?.title,J=ce&&m?.metafields?.infos?.page_short_title||M,j=e?.custom_description||e?.description,ue=()=>{if(h?.value_type==="fixed_amount"){const s=f||"",r=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,o,l,p]=r;let d=l;return l.endsWith(".00")?d=l.replace(/\.00$/,""):l.endsWith(",00")&&(d=l.replace(/,00$/,"")),`${o}${d}${p}`}return s}return w||""};Be(()=>{let s=[];if(w||f){const o=`${ue()} ${Z?.off||H?.off||""}`;pe(o),s.push(o)}const r=e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,w?1:2);ee(s.concat(r))},[e?.tags,w,f,Z?.off,H?.off]),Ne(E,{componentType:ne,componentName:le,componentTitle:M,componentDescription:j,position:t?.index+1});const fe=async()=>{if(!te&&!e?.custom_primary_link){c(!0);try{await D(e,t?.index,t,h)}finally{c(!1)}}},O=async()=>{if(!q&&!e?.custom_secondary_link){se(!0);try{await de(e,t?.index,t,h)}finally{se(!1)}}},re=()=>b(ge,{children:[L&&R?.length>0?i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:R?.map?.((s,r)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:s},r))}):null,J?i(Se,{as:"h3",title:J||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary line-clamp-2 h-12",html:J||""}):null,i(ke,{size:2,className:"lg-desktop:text-lg desktop:h-[24px] lg-desktop:h-[28px] desktop:text-base shelf-display-product-description text-info-primary line-clamp-1 h-[20px] text-sm",html:j||""}),i("div",{className:"mb-2 mt-4 flex items-center",children:y?y(e,{price:x,basePrice:I,discount:w,discountAmount:f,variant:m,coupon:h,isSoldOut:S}):S?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:me?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:m?.availableForSale&&x||""}),z?z(e,{price:x,basePrice:I,discount:w,discountAmount:f}):I&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:m?.availableForSale&&I||""})]})}),!y&&X?.(e,m),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:S&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:O,loading:q,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:S&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:fe,loading:te,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]}),n=e?.custom_bg_image,a=e?.custom_theme;return i("div",{ref:E,className:v("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item",n?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":a==="dark"}),style:n?{backgroundImage:`url(${n})`}:void 0,children:C?i("div",{className:"absolute inset-0 box-border overflow-hidden",children:b("div",{className:"relative inset-0 size-full",children:[i(he,{source:A,alt:F,className:v("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":n})}),i("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):b("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[V&&U&&i(xe,{className:"shelf-prices-tag absolute left-4 top-4 z-10",variant:"fill",children:V||""}),i("div",{className:v("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden",{"opacity-0":n}),children:i("a",{"aria-label":M,target:t?.target,href:_e(`${_==="us"||!_?"":`/${_}`}/products/${e?.handle}?variant=${G}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||m?.sku,item_name:e?.name,item_variant:m?.name,price:m?.price,index:t?.index+1}]}})},children:i(he,{source:A,alt:F,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},He=({data:e,configuration:t})=>{const{itemShape:C,itemLength:P,metafields:W,isShowShortTitle:U,formatPrice:L,renderOriginalPrice:Q,renderPriceLabel:ce,renderPrice:$}=t||{},{discounts:z,discountsCopy:X}=W||{},{locale:y="us",copyWriting:_,currencyDisplay:me}=ve(),[Y,Z]=B([]),H=Te(null),[E,R]=B(!1),[ee,V]=B(!1),pe=(n,a,s,r)=>{const{primaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.primaryButton?.(n,a+1,s,r)},te=(n,a,s,r)=>{const{secondaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.secondaryButton?.(n,a+1,s,r)},c=oe(()=>{const n=e?.variants||[];if(n.length)return e?.sku&&n.find(a=>a?.sku===e?.sku)||n[0]},[e?.sku,e?.variants]),q=c?.id?.split?.("/")||[],se=q?.[q?.length-1],D=!c?.availableForSale||c?.price?.amount===ae||c?.price===ae,de=t?.isShowTag,m=t?.isShowOriginalPrice,u=c?.coupons?.[0],G=!!(m&&u),S=e?.price?.currencyCode||"USD",h=oe(()=>be({locale:y,amount:G?u?.variant_price4wscode:c?.price,baseAmount:G?c?.price:0,currencyCode:S,currencyDisplay:me,customFormatPrice:L}),[S,y,G,u?.variant_price4wscode,c,L]),{price:N,basePrice:T,discount:k,discountAmount:x}=h,{imageUrl:I,altText:w}=Ce(e),f=e?.custom_name||e?.title,A=U&&c?.metafields?.infos?.page_short_title||f,F=e?.custom_description||e?.description;Ne(H,{componentType:ne,componentName:le,componentTitle:f,componentDescription:F,position:t?.index+1});const M=async()=>{if(!E&&!e?.custom_primary_link){R(!0);try{await pe(e,t?.index,t,u)}finally{R(!1)}}},J=async()=>{if(!ee&&!e?.custom_secondary_link){V(!0);try{await te(e,t?.index,t,u)}finally{V(!1)}}},j=()=>P>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>P>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",fe=()=>{if(u?.value_type==="fixed_amount"){const n=x||"",a=n.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(a){const[,s,r,o]=a;let l=r;return r.endsWith(".00")?l=r.replace(/\.00$/,""):r.endsWith(",00")&&(l=r.replace(/,00$/,"")),`${s}${l}${o}`}return n}return k||""};Be(()=>{let n=[];if(k||x){const s=`${fe()} ${z?.off||X?.off||""}`;n.push(s)}const a=e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);Z(n.concat(a))},[e?.tags,k,x,z?.off,X?.off]);const O=e?.custom_bg_image,re=e?.custom_theme;return i("div",{ref:H,className:v(j().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",O?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":re==="dark"}),style:O?{backgroundImage:`url(${O})`}:void 0,children:b("div",{className:v(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[i("div",{className:v(j().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":O}),children:i("a",{"aria-label":f,target:t?.target,href:_e(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${se}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||c?.sku,item_name:e?.name,item_variant:c?.name,price:c?.price,index:t?.index+1}]}})},children:i(he,{source:I,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b("div",{className:v("flex flex-col items-start justify-center",j().boxItem),children:[de&&i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Y?.length>0&&Y?.map?.((n,a)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:n},a))}),A?i(Se,{as:"h3",title:A||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:A||""}):null,F?i(ke,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:F||""}):null,i("div",{className:"mb-2 mt-5 flex items-center",children:$?$(e,{price:N,basePrice:T,discount:k,discountAmount:x,variant:c,coupon:u,isSoldOut:D}):D?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:_?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:c?.availableForSale&&N||""}),Q?Q(e,{price:N,basePrice:T,discount:k,discountAmount:x}):T&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:c?.availableForSale&&T||""})]})}),!$&&ce?.(e,c),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:D&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:J,loading:ee,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:D&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:M,loading:E,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{He as ShelfDisplayHorizontalItem,ze as ShelfDisplayWrapItem,Ce as getProductImage};
 //# sourceMappingURL=shelfDisplayItem.js.map