@anker-in/headless-ui 1.1.9-alpha.1764674322345 → 1.1.9-alpha.1764744576825

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
   "mappings": "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",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/couponType.d.ts

@@ -0,0 +1,50 @@
+export type SellingPlans = {
+    id: string;
+    name: string;
+    options: {
+        name: string;
+        value: string;
+    }[];
+};
+export type ProductOption = {
+    __typename?: 'MultipleChoiceOption';
+    id: string;
+    displayName: string;
+    values: ProductOptionValues[];
+};
+export type ProductOptionValues = {
+    label: string;
+    hexColors?: string[];
+};
+export type SellingPlanAllocations = {
+    priceAdjustments: [];
+    sellingPlan: SellingPlans;
+}[];
+export type ProductVariant = {
+    id: string | number;
+    options: ProductOption[];
+    availableForSale?: boolean;
+    quantityAvailable: number;
+    metafields?: Record<string, any>;
+    sellingPlanAllocations?: SellingPlanAllocations;
+    price: number;
+    listPrice: number;
+    [key: string]: any;
+};
+export type VariantCoupon = {
+    title: string;
+    starts_at: string;
+    ends_at: string | null;
+    variant_shopify_id: number;
+    value_type: 'percentage' | 'fixed' | 'fixed_amount' | 'fix_discount_amount';
+    value: string;
+    currency: string;
+    fixed_value: string;
+    value_style: string;
+    variant_price4wscode: number;
+    discount_type: string;
+    amazon_deal: boolean;
+    cdi_id: number;
+    cdi_updated_at: string;
+    variant_price?: string;
+};

package/dist/cjs/biz-components/ShelfDisplay/couponType.js

@@ -0,0 +1,2 @@
+"use strict";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var p=(n,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of s(t))!o.call(n,e)&&e!==r&&a(n,e,{get:()=>t[e],enumerable:!(i=l(t,e))||i.enumerable});return n};var u=n=>p(a({},"__esModule",{value:!0}),n);var g={};module.exports=u(g);
+//# sourceMappingURL=couponType.js.map

package/dist/cjs/biz-components/ShelfDisplay/couponType.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ShelfDisplay/couponType.ts"],
+  "sourcesContent": ["export type SellingPlans = {\n  id: string\n  name: string\n  options: {\n    name: string\n    value: string\n  }[]\n}\n\nexport type ProductOption = {\n  __typename?: 'MultipleChoiceOption'\n  id: string\n  displayName: string\n  values: ProductOptionValues[]\n}\n\nexport type ProductOptionValues = {\n  label: string\n  hexColors?: string[]\n}\n\nexport type SellingPlanAllocations = {\n  priceAdjustments: []\n  sellingPlan: SellingPlans\n}[]\n\nexport type ProductVariant = {\n  id: string | number\n  options: ProductOption[]\n  availableForSale?: boolean\n  quantityAvailable: number\n  metafields?: Record<string, any>\n  sellingPlanAllocations?: SellingPlanAllocations\n  price: number\n  listPrice: number\n  [key: string]: any\n}\n\nexport type VariantCoupon = {\n  title: string\n  starts_at: string // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\n  ends_at: string | null // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\u6216 null\n  variant_shopify_id: number\n  value_type: 'percentage' | 'fixed' | 'fixed_amount' | 'fix_discount_amount' // \u5047\u8BBE value_type \u53EA\u6709 'percentage' \u548C 'fixed' \u4E24\u79CD\u53EF\u80FD\u503C\n  value: string // \u8D1F\u6570\u7684\u767E\u5206\u6BD4\u503C\n  currency: string\n  fixed_value: string // \u56FA\u5B9A\u503C\n  value_style: string // \u5E26\u6709\u8D27\u5E01\u7B26\u53F7\u7684\u503C\n  variant_price4wscode: number\n  discount_type: string // \u5047\u8BBE discount_type \u662F\u4E00\u4E2A\u5B57\u7B26\u4E32\n  amazon_deal: boolean\n  cdi_id: number\n  cdi_updated_at: string // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\n  variant_price?: string\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["couponType_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/ShelfDisplay/couponUtils.d.ts

@@ -0,0 +1,37 @@
+import type { ProductVariant, VariantCoupon } from './couponType';
+export declare enum CouponType {
+    hideChannel = "wsch",
+    appChannel = "wsap",
+    udcChannel = "wsuc"
+}
+export declare function atobID(id: any): any;
+export interface GetValidCustomCouponProps {
+    /** custom_data item */
+    customDataItem: {
+        udcGroups: number[];
+        whiteGroups: number[];
+        discount: VariantCoupon;
+    };
+    /** 人群分组，来自 get_user_in_group 接口 */
+    udcGroupIds?: number[];
+    udcWhiteGroupIds?: number[];
+}
+declare class CouponUtils {
+    /** 是否为隐藏渠道优惠券 */
+    static isHideChannelCoupon(couponTitle?: string): boolean;
+    /** 是否为 App 渠道优惠券 */
+    static isAppChannelCoupon(couponTitle?: string): boolean;
+    /** 是否为 UDC 渠道优惠券 */
+    static isUDCChannelCoupon(couponTitle?: string): boolean;
+    /** 检查优惠券是否在有效期内 */
+    static isCouponInValidPeriod(coupon: VariantCoupon): boolean;
+    /** 检查优惠券是否匹配指定的隐藏渠道 */
+    static getMatchChannelCoupons(activeCoupons: VariantCoupon[], channel?: string): VariantCoupon[];
+    /** 检查优惠券是否匹配变体ID */
+    static isCouponMatchVariant(coupon: VariantCoupon, variant: ProductVariant | undefined): boolean;
+    /** 验证是否有 coupons 或者 custom_coupons */
+    static validateVariantCoupon(variant: ProductVariant | undefined): boolean;
+    /** 获取 custom_data 中符合 UDC 人群分组的折扣 */
+    static getValidCustomCoupon({ customDataItem, udcGroupIds, udcWhiteGroupIds }: GetValidCustomCouponProps): boolean;
+}
+export { CouponUtils };

package/dist/cjs/biz-components/ShelfDisplay/couponUtils.js

@@ -0,0 +1,2 @@
+"use strict";var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var m=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},f=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of d(t))!h.call(e,s)&&s!==n&&i(e,s,{get:()=>t[s],enumerable:!(o=C(t,s))||o.enumerable});return e};var V=e=>f(i({},"__esModule",{value:!0}),e);var w={};m(w,{CouponType:()=>p,CouponUtils:()=>l,atobID:()=>c});module.exports=V(w);var p=(o=>(o.hideChannel="wsch",o.appChannel="wsap",o.udcChannel="wsuc",o))(p||{});function c(e){return e?typeof e=="string"&&e.includes("/")?e?.split("/")?.pop()?.split("?")?.shift():e:null}class l{static isHideChannelCoupon(t){return!!t?.toLowerCase().startsWith("wsch")}static isAppChannelCoupon(t){return!!t?.toLowerCase().startsWith("wsap")}static isUDCChannelCoupon(t){return!!t?.toLowerCase().startsWith("wsuc")}static isCouponInValidPeriod(t){const n=new Date().getTime(),o=t?.ends_at===null||t?.ends_at===void 0,s=new Date(t?.ends_at).getTime()>n,a=new Date(t?.starts_at).getTime()<=n;return(o||s)&&a}static getMatchChannelCoupons(t,n){if(!n||t.length===0)return[];const o=n.toLowerCase(),s=[];for(const a of t){const r=a?.title.toLowerCase();if(r===o)return[a];r.includes(o)&&s.push(a)}return s}static isCouponMatchVariant(t,n){return t?.variant_shopify_id===+c(n?.id)}static validateVariantCoupon(t){const n=t?.coupons||t?.metafields?.coupons||[],o=t?.custom_coupons||t?.metafields?.custom_coupons||[],s=Array.isArray(n)&&n.length>0,a=Array.isArray(o)&&o.length>0;return s||a}static getValidCustomCoupon({customDataItem:t,udcGroupIds:n,udcWhiteGroupIds:o}){const{udcGroups:s,whiteGroups:a}=t;return s?.some(u=>n?.includes(u))?!0:a?.some(u=>o?.includes(u))}}
+//# sourceMappingURL=couponUtils.js.map

package/dist/cjs/biz-components/ShelfDisplay/couponUtils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ShelfDisplay/couponUtils.ts"],
+  "sourcesContent": ["import type { ProductVariant, VariantCoupon } from './couponType'\n\nexport enum CouponType {\n  hideChannel = 'wsch',\n  appChannel = 'wsap',\n  udcChannel = 'wsuc',\n}\n\nexport function atobID(id: any) {\n  if (!id) {\n    return null\n  }\n  if (typeof id === 'string' && id.includes('/')) {\n    return id?.split('/')?.pop()?.split('?')?.shift()\n  }\n  return id\n}\n\nexport interface GetValidCustomCouponProps {\n  /** custom_data item */\n  customDataItem: {\n    udcGroups: number[]\n    whiteGroups: number[]\n    discount: VariantCoupon\n  }\n  /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n  udcGroupIds?: number[]\n  udcWhiteGroupIds?: number[]\n}\n\nclass CouponUtils {\n  /** \u662F\u5426\u4E3A\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238 */\n  static isHideChannelCoupon(couponTitle?: string): boolean {\n    return !!couponTitle?.toLowerCase().startsWith(CouponType.hideChannel)\n  }\n\n  /** \u662F\u5426\u4E3A App \u6E20\u9053\u4F18\u60E0\u5238 */\n  static isAppChannelCoupon(couponTitle?: string): boolean {\n    return !!couponTitle?.toLowerCase().startsWith(CouponType.appChannel)\n  }\n\n  /** \u662F\u5426\u4E3A UDC \u6E20\u9053\u4F18\u60E0\u5238 */\n  static isUDCChannelCoupon(couponTitle?: string): boolean {\n    return !!couponTitle?.toLowerCase().startsWith(CouponType.udcChannel)\n  }\n\n  /** \u68C0\u67E5\u4F18\u60E0\u5238\u662F\u5426\u5728\u6709\u6548\u671F\u5185 */\n  static isCouponInValidPeriod(coupon: VariantCoupon): boolean {\n    const now = new Date().getTime()\n    const hasNoEndDate = coupon?.ends_at === null || coupon?.ends_at === undefined\n    const isNotExpired = new Date(coupon?.ends_at as string).getTime() > now\n    const hasStarted = new Date(coupon?.starts_at).getTime() <= now\n\n    return (hasNoEndDate || isNotExpired) && hasStarted\n  }\n\n  /** \u68C0\u67E5\u4F18\u60E0\u5238\u662F\u5426\u5339\u914D\u6307\u5B9A\u7684\u9690\u85CF\u6E20\u9053 */\n  static getMatchChannelCoupons(activeCoupons: VariantCoupon[], channel?: string): VariantCoupon[] {\n    if (!channel || activeCoupons.length === 0) {\n      return []\n    }\n\n    const lowerChannel = channel.toLowerCase()\n    const result: VariantCoupon[] = []\n\n    for (const coupon of activeCoupons) {\n      const couponTitle = coupon?.title.toLowerCase()\n\n      // \u5B8C\u5168\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\uFF0C\u627E\u5230\u5C31\u7ACB\u5373\u8FD4\u56DE\n      if (couponTitle === lowerChannel) {\n        return [coupon]\n      }\n\n      // \u6536\u96C6\u90E8\u5206\u5339\u914D\u7684\u4F18\u60E0\u5238\uFF08\u539F\u903B\u8F91\uFF1AWSCH****\uFF09\n      if (couponTitle.includes(lowerChannel)) {\n        result.push(coupon)\n      }\n    }\n\n    return result\n  }\n\n  /** \u68C0\u67E5\u4F18\u60E0\u5238\u662F\u5426\u5339\u914D\u53D8\u4F53ID */\n  static isCouponMatchVariant(coupon: VariantCoupon, variant: ProductVariant | undefined): boolean {\n    return coupon?.variant_shopify_id === +atobID(variant?.id)\n  }\n\n  /** \u9A8C\u8BC1\u662F\u5426\u6709 coupons \u6216\u8005 custom_coupons */\n  static validateVariantCoupon(variant: ProductVariant | undefined): boolean {\n    const coupons = variant?.coupons || variant?.metafields?.coupons || []\n    const customCoupons = variant?.custom_coupons || variant?.metafields?.custom_coupons || []\n    const hasValidCoupons = Array.isArray(coupons) && coupons.length > 0\n    const hasValidCustomCoupons = Array.isArray(customCoupons) && customCoupons.length > 0\n\n    return hasValidCoupons || hasValidCustomCoupons\n  }\n\n  /** \u83B7\u53D6 custom_data \u4E2D\u7B26\u5408 UDC \u4EBA\u7FA4\u5206\u7EC4\u7684\u6298\u6263 */\n  static getValidCustomCoupon({ customDataItem, udcGroupIds, udcWhiteGroupIds }: GetValidCustomCouponProps): boolean {\n    const { udcGroups, whiteGroups } = customDataItem\n\n    // \u5148\u68C0\u67E5 udcGroups \u5728\u63A5\u53E3\u91CC\u6709\u6CA1\u6709\n    const hasUDCGroupMatch = udcGroups?.some(id => udcGroupIds?.includes(id))\n\n    if (hasUDCGroupMatch) {\n      return true\n    }\n\n    // \u6CA1\u6709\u7684\u8BDD\u518D\u68C0\u67E5 whiteGroups\n    return whiteGroups?.some(id => udcWhiteGroupIds?.includes(id))\n  }\n}\n\nexport { CouponUtils }\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,gBAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAL,GAEO,IAAKE,OACVA,EAAA,YAAc,OACdA,EAAA,WAAa,OACbA,EAAA,WAAa,OAHHA,OAAA,IAML,SAASE,EAAOE,EAAS,CAC9B,OAAKA,EAGD,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EACpCA,GAAI,MAAM,GAAG,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAE3CA,EALE,IAMX,CAcA,MAAMH,CAAY,CAEhB,OAAO,oBAAoBI,EAA+B,CACxD,MAAO,CAAC,CAACA,GAAa,YAAY,EAAE,WAAW,MAAsB,CACvE,CAGA,OAAO,mBAAmBA,EAA+B,CACvD,MAAO,CAAC,CAACA,GAAa,YAAY,EAAE,WAAW,MAAqB,CACtE,CAGA,OAAO,mBAAmBA,EAA+B,CACvD,MAAO,CAAC,CAACA,GAAa,YAAY,EAAE,WAAW,MAAqB,CACtE,CAGA,OAAO,sBAAsBC,EAAgC,CAC3D,MAAMC,EAAM,IAAI,KAAK,EAAE,QAAQ,EACzBC,EAAeF,GAAQ,UAAY,MAAQA,GAAQ,UAAY,OAC/DG,EAAe,IAAI,KAAKH,GAAQ,OAAiB,EAAE,QAAQ,EAAIC,EAC/DG,EAAa,IAAI,KAAKJ,GAAQ,SAAS,EAAE,QAAQ,GAAKC,EAE5D,OAAQC,GAAgBC,IAAiBC,CAC3C,CAGA,OAAO,uBAAuBC,EAAgCC,EAAmC,CAC/F,GAAI,CAACA,GAAWD,EAAc,SAAW,EACvC,MAAO,CAAC,EAGV,MAAME,EAAeD,EAAQ,YAAY,EACnCE,EAA0B,CAAC,EAEjC,UAAWR,KAAUK,EAAe,CAClC,MAAMN,EAAcC,GAAQ,MAAM,YAAY,EAG9C,GAAID,IAAgBQ,EAClB,MAAO,CAACP,CAAM,EAIZD,EAAY,SAASQ,CAAY,GACnCC,EAAO,KAAKR,CAAM,CAEtB,CAEA,OAAOQ,CACT,CAGA,OAAO,qBAAqBR,EAAuBS,EAA8C,CAC/F,OAAOT,GAAQ,qBAAuB,CAACJ,EAAOa,GAAS,EAAE,CAC3D,CAGA,OAAO,sBAAsBA,EAA8C,CACzE,MAAMC,EAAUD,GAAS,SAAWA,GAAS,YAAY,SAAW,CAAC,EAC/DE,EAAgBF,GAAS,gBAAkBA,GAAS,YAAY,gBAAkB,CAAC,EACnFG,EAAkB,MAAM,QAAQF,CAAO,GAAKA,EAAQ,OAAS,EAC7DG,EAAwB,MAAM,QAAQF,CAAa,GAAKA,EAAc,OAAS,EAErF,OAAOC,GAAmBC,CAC5B,CAGA,OAAO,qBAAqB,CAAE,eAAAC,EAAgB,YAAAC,EAAa,iBAAAC,CAAiB,EAAuC,CACjH,KAAM,CAAE,UAAAC,EAAW,YAAAC,CAAY,EAAIJ,EAKnC,OAFyBG,GAAW,KAAKnB,GAAMiB,GAAa,SAASjB,CAAE,CAAC,EAG/D,GAIFoB,GAAa,KAAKpB,GAAMkB,GAAkB,SAASlB,CAAE,CAAC,CAC/D,CACF",
+  "names": ["couponUtils_exports", "__export", "CouponType", "CouponUtils", "atobID", "__toCommonJS", "id", "couponTitle", "coupon", "now", "hasNoEndDate", "isNotExpired", "hasStarted", "activeCoupons", "channel", "lowerChannel", "result", "variant", "coupons", "customCoupons", "hasValidCoupons", "hasValidCustomCoupons", "customDataItem", "udcGroupIds", "udcWhiteGroupIds", "udcGroups", "whiteGroups"]
+}

package/dist/cjs/biz-components/ShelfDisplay/handleCoupon.d.ts

@@ -0,0 +1,28 @@
+import type { ProductVariant, VariantCoupon } from './couponType';
+interface GetCouponFromVariantProps {
+    /** 变体 */
+    variant: ProductVariant | undefined;
+    /** 隐藏渠道 */
+    channel?: string;
+    /** 是否在app中 */
+    inApp?: boolean;
+    /** UDC人群分组 */
+    udcGroupIds?: number[];
+    /** UDC白名单人群分组 */
+    udcWhiteGroupIds?: number[];
+    /** 目标代码 */
+    targetCode?: string;
+}
+export interface GetValidCustomCouponProps {
+    /** custom_data item */
+    customDataItem: {
+        udcGroups: number[];
+        whiteGroups: number[];
+        discount: VariantCoupon;
+    };
+    /** 人群分组，来自 get_user_in_group 接口 */
+    udcGroupIds?: number[];
+    udcWhiteGroupIds?: number[];
+}
+export declare function getCouponFromVariant({ variant, channel, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, }: GetCouponFromVariantProps): VariantCoupon | undefined;
+export {};

package/dist/cjs/biz-components/ShelfDisplay/handleCoupon.js

@@ -0,0 +1,2 @@
+"use strict";var C=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var g=(n,t)=>{for(var i in t)C(n,i,{get:t[i],enumerable:!0})},b=(n,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of P(t))!I.call(n,u)&&u!==i&&C(n,u,{get:()=>t[u],enumerable:!(s=G(t,u))||s.enumerable});return n};var D=n=>b(C({},"__esModule",{value:!0}),n);var U={};g(U,{getCouponFromVariant:()=>M});module.exports=D(U);var e=require("./couponUtils");function M({variant:n,channel:t,inApp:i,udcGroupIds:s,udcWhiteGroupIds:u,targetCode:c}){if(!e.CouponUtils.validateVariantCoupon(n))return;const d=n?.coupons||n.metafields?.coupons||[],f=(n?.custom_coupons||n.metafields?.custom_coupons||[])?.filter(o=>s||u?e.CouponUtils.getValidCustomCoupon({customDataItem:o,udcGroupIds:s,udcWhiteGroupIds:u}):!0)?.map(o=>o?.discount?.title),l=d?.find(o=>{const r=e.CouponUtils.isCouponInValidPeriod(o),a=e.CouponUtils.isCouponMatchVariant(o,n);return f?.includes(o.title)&&r&&a});if(i&&l)return l;const p=d.filter(o=>{const r=e.CouponUtils.isCouponInValidPeriod(o),a=e.CouponUtils.isCouponMatchVariant(o,n),h=e.CouponUtils.isUDCChannelCoupon(o.title);return r&&a&&!h}),m=e.CouponUtils.getMatchChannelCoupons(p,t);if(m.length>0)return m[0];const V=c?p.filter(o=>o.title?.toLocaleUpperCase()===c?.toLocaleUpperCase()):void 0;return(V||p.filter(o=>{const r=e.CouponUtils.isHideChannelCoupon(o.title),a=e.CouponUtils.isAppChannelCoupon(o.title);return i?!r:!r&&!a}))[0]}
+//# sourceMappingURL=handleCoupon.js.map

package/dist/cjs/biz-components/ShelfDisplay/handleCoupon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ShelfDisplay/handleCoupon.ts"],
+  "sourcesContent": ["/* eslint-disable import/extensions */\nimport { CouponUtils } from './couponUtils'\n\nimport type { ProductVariant, VariantCoupon } from './couponType'\n\ninterface GetCouponFromVariantProps {\n  /** \u53D8\u4F53 */\n  variant: ProductVariant | undefined\n  /** \u9690\u85CF\u6E20\u9053 */\n  channel?: string\n  /** \u662F\u5426\u5728app\u4E2D */\n  inApp?: boolean\n  /** UDC\u4EBA\u7FA4\u5206\u7EC4 */\n  udcGroupIds?: number[]\n  /** UDC\u767D\u540D\u5355\u4EBA\u7FA4\u5206\u7EC4 */\n  udcWhiteGroupIds?: number[]\n  /** \u76EE\u6807\u4EE3\u7801 */\n  targetCode?: string\n}\n\nexport interface GetValidCustomCouponProps {\n  /** custom_data item */\n  customDataItem: {\n    udcGroups: number[]\n    whiteGroups: number[]\n    discount: VariantCoupon\n  }\n  /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n  udcGroupIds?: number[]\n  udcWhiteGroupIds?: number[]\n}\n\nexport function getCouponFromVariant({\n  variant,\n  channel,\n  inApp,\n  udcGroupIds,\n  udcWhiteGroupIds,\n  targetCode,\n}: GetCouponFromVariantProps): VariantCoupon | undefined {\n  // \u9A8C\u8BC1\u8F93\u5165\u53C2\u6570\n  if (!CouponUtils.validateVariantCoupon(variant)) {\n    return undefined\n  }\n  const coupons: any = variant?.coupons || variant!.metafields?.coupons || []\n  const customCoupons: any = variant?.custom_coupons || variant!.metafields?.custom_coupons || []\n\n  // udc_groups \u4EBA\u7FA4\u5206\u7EC4\u4F18\u60E0\u5238\uFF0C\u627E\u51FA\u6240\u6709\u5339\u914D\u7684\u6298\u6263\u7801\n  const udcGroupCouponTitleList: string[] | undefined = customCoupons\n    ?.filter((item: GetValidCustomCouponProps['customDataItem']) => {\n      if (udcGroupIds || udcWhiteGroupIds) {\n        return CouponUtils.getValidCustomCoupon({\n          customDataItem: item,\n          udcGroupIds,\n          udcWhiteGroupIds,\n        })\n      }\n      return true\n    })\n    ?.map((item: GetValidCustomCouponProps['customDataItem']) => item?.discount?.title)\n\n  // custom_data \u4E2D\u7684 title \u53EA\u662F\u8868\u660E\u4ED6\u547D\u4E2D\u4E86\u8FD9\u4E2A udc \u6298\u6263\uFF0C\u6700\u7EC8\u4EE5 coupons \u7684\u6570\u636E\u4E3A\u51C6\n  // \u547D\u4E2D\u7684\u6240\u6709\u6298\u6263\u7801\u9010\u4E00\u9A8C\u8BC1\uFF0C\u627E\u5230\u6700\u5148\u5339\u914D\u7684\u6298\u6263\u7801\uFF0C\u56E0\u4E3A coupons \u4E2D\u6298\u6263\u5927\u7684\u9760\u524D\n  const udcGroupCoupon = coupons?.find((item: VariantCoupon) => {\n    const isInValidPeriod = CouponUtils.isCouponInValidPeriod(item)\n    const isMatchVariant = CouponUtils.isCouponMatchVariant(item, variant)\n    return udcGroupCouponTitleList?.includes(item.title) && isInValidPeriod && isMatchVariant\n  })\n\n  // \u627E\u5230 UDC \u6298\u6263\u5C31\u76F4\u63A5\u7528\n  // TODO UDC \u6298\u6263\u76EE\u524D\u7EA6\u5B9A\u4EC5\u5728 app \u4F7F\u7528\n  if (inApp && udcGroupCoupon) {\n    return udcGroupCoupon\n  }\n\n  // \u8FC7\u6EE4\u51FA\u6240\u6709\u6709\u6548\u7684\u4F18\u60E0\u5238\n  const activeCoupons = coupons.filter((coupon: VariantCoupon) => {\n    const isInValidPeriod = CouponUtils.isCouponInValidPeriod(coupon)\n    const isMatchVariant = CouponUtils.isCouponMatchVariant(coupon, variant)\n    const isUDCChannel = CouponUtils.isUDCChannelCoupon(coupon.title)\n\n    return isInValidPeriod && isMatchVariant && !isUDCChannel\n  })\n\n  // \u8FC7\u6EE4\u51FA\u9690\u85CF\u6E20\u9053\u7684\u4F18\u60E0\u5238\n  const matchChannelCoupons = CouponUtils.getMatchChannelCoupons(activeCoupons, channel)\n\n  // \u5982\u679C\u6709\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\u5219\u4F18\u5148\u4F7F\u7528\n  if (matchChannelCoupons.length > 0) {\n    return matchChannelCoupons[0]\n  }\n\n  // \u5982\u679C\u6709\u76EE\u6807\u4EE3\u7801\u5219\u8FC7\u6EE4\u51FA\u76EE\u6807\u4EE3\u7801\u7684\u4F18\u60E0\u5238\n  const targetCoupons = targetCode\n    ? activeCoupons.filter(\n        (coupon: VariantCoupon) => coupon.title?.toLocaleUpperCase() === targetCode?.toLocaleUpperCase()\n      )\n    : undefined\n\n  const finalCoupons = targetCoupons\n    ? targetCoupons\n    : activeCoupons.filter((coupon: VariantCoupon) => {\n        const isHideChannelCoupon = CouponUtils.isHideChannelCoupon(coupon.title)\n        const isAppChannelCoupon = CouponUtils.isAppChannelCoupon(coupon.title)\n\n        // app \u4E0B\u53EA\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\n        if (inApp) {\n          return !isHideChannelCoupon\n        }\n\n        // \u5B98\u7F51\u4E0B\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u548C\u975E app \u6E20\u9053\u4F18\u60E0\u5238\n        return !isHideChannelCoupon && !isAppChannelCoupon\n      })\n\n  return finalCoupons[0]\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0BAAAE,IAAA,eAAAC,EAAAH,GACA,IAAAI,EAA4B,yBA+BrB,SAASF,EAAqB,CACnC,QAAAG,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,CACF,EAAyD,CAEvD,GAAI,CAAC,cAAY,sBAAsBL,CAAO,EAC5C,OAEF,MAAMM,EAAeN,GAAS,SAAWA,EAAS,YAAY,SAAW,CAAC,EAIpEO,GAHqBP,GAAS,gBAAkBA,EAAS,YAAY,gBAAkB,CAAC,IAI1F,OAAQQ,GACJL,GAAeC,EACV,cAAY,qBAAqB,CACtC,eAAgBI,EAChB,YAAAL,EACA,iBAAAC,CACF,CAAC,EAEI,EACR,GACC,IAAKI,GAAsDA,GAAM,UAAU,KAAK,EAI9EC,EAAiBH,GAAS,KAAME,GAAwB,CAC5D,MAAME,EAAkB,cAAY,sBAAsBF,CAAI,EACxDG,EAAiB,cAAY,qBAAqBH,EAAMR,CAAO,EACrE,OAAOO,GAAyB,SAASC,EAAK,KAAK,GAAKE,GAAmBC,CAC7E,CAAC,EAID,GAAIT,GAASO,EACX,OAAOA,EAIT,MAAMG,EAAgBN,EAAQ,OAAQO,GAA0B,CAC9D,MAAMH,EAAkB,cAAY,sBAAsBG,CAAM,EAC1DF,EAAiB,cAAY,qBAAqBE,EAAQb,CAAO,EACjEc,EAAe,cAAY,mBAAmBD,EAAO,KAAK,EAEhE,OAAOH,GAAmBC,GAAkB,CAACG,CAC/C,CAAC,EAGKC,EAAsB,cAAY,uBAAuBH,EAAeX,CAAO,EAGrF,GAAIc,EAAoB,OAAS,EAC/B,OAAOA,EAAoB,CAAC,EAI9B,MAAMC,EAAgBX,EAClBO,EAAc,OACXC,GAA0BA,EAAO,OAAO,kBAAkB,IAAMR,GAAY,kBAAkB,CACjG,EACA,OAiBJ,OAfqBW,GAEjBJ,EAAc,OAAQC,GAA0B,CAC9C,MAAMI,EAAsB,cAAY,oBAAoBJ,EAAO,KAAK,EAClEK,EAAqB,cAAY,mBAAmBL,EAAO,KAAK,EAGtE,OAAIX,EACK,CAACe,EAIH,CAACA,GAAuB,CAACC,CAClC,CAAC,GAEe,CAAC,CACvB",
+  "names": ["handleCoupon_exports", "__export", "getCouponFromVariant", "__toCommonJS", "import_couponUtils", "variant", "channel", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "coupons", "udcGroupCouponTitleList", "item", "udcGroupCoupon", "isInValidPeriod", "isMatchVariant", "activeCoupons", "coupon", "isUDCChannel", "matchChannelCoupons", "targetCoupons", "isHideChannelCoupon", "isAppChannelCoupon"]
+}

package/dist/cjs/biz-components/ShelfDisplay/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var ae=Object.create;var w=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(e,s)=>{for(var n in s)w(e,n,{get:s[n],enumerable:!0})},V=(e,s,n,f)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of ie(s))!oe.call(e,l)&&l!==n&&w(e,l,{get:()=>s[l],enumerable:!(f=ne(s,l))||f.enumerable});return e};var g=(e,s,n)=>(n=e!=null?ae(re(e)):{},V(s||!e||!e.__esModule?w(n,"default",{value:e,enumerable:!0}):n,e)),me=e=>V(w({},"__esModule",{value:!0}),e);var de={};le(de,{default:()=>ue});module.exports=me(de);var o=require("react/jsx-runtime"),a=g(require("react")),L=require("../../helpers/utils.js"),N=g(require("./tabSwitch.js")),A=g(require("../Title/index.js")),$=g(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),O=require("react-responsive"),z=require("../../hooks/useRollout.js"),_=require("./shelfDisplayItem.js");const ce="image",pe="product_shelf",fe=a.default.forwardRef(({key:e,data:s,event:n,buildData:f,breakpoints:l,className:Q="",recommendedData:c,target:W="_self",metafields:j,isDisplayGudgments:R=!1,isDisplayBackImage:F=!1},G)=>{const{productsTab:u=[],productsCard:J=[],title:I,isShowTab:v=!0,tabShape:K="square",isShowTag:U=!1,isShowOriginalPrice:X=!0,isShowRecommendedCard:Y=!1,...Z}=s,[M,P]=(0,a.useState)(""),[m,b]=(0,a.useState)([]),x=(0,a.useRef)(!1),S=(0,a.useRef)(!1),H=(0,a.useRef)(null),ee=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),[te,B]=(0,z.useRollout)({threshold:0}),d=m?.length<=1&&R,p=!ee&&m?.length<=2&&R,y=t=>{switch(t){case 1440:return p?m?.length:4;case 1024:return p?m?.length:3;default:return p?m?.length:2.3}},C=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((t,k)=>{const r=t?.variants?.find(i=>i?.sku===t?.sku)||t?.variants?.[0];return{item_id:t?.sku||r?.sku,item_name:t?.name,item_variant:r?.name,price:r?.price,index:k+1}})}})},T=(t,k)=>{if(k){const h=c?.map?.(r=>({...r,isShowRecommended:!0}));b(h?.length?h||[]:[])}else if(Array.isArray(t)){const r=t?.map?.(i=>{const E=f?.products?.find(se=>se?.handle===i?.handle);if(E)return{sku:i.sku,isShowRecommended:!1,custom_name:i.custom_name,custom_description:i.custom_description,custom_image:i.custom_image,custom_theme:i.custom_theme,...E}})?.filter(i=>i);b(r?.length?r||[]:[])}else b([])};return(0,a.useImperativeHandle)(G,()=>H.current),(0,a.useEffect)(()=>{B&&c?.length&&!x.current&&(x.current=!0,C())},[B,c]),(0,a.useEffect)(()=>{if(!S.current){if(!S.current&&c?.length&&(S.current=!0),v){P(u?.[0]?.tab||""),T(u?.[0]?.data||[],u?.[0]?.isShowRecommendedTab);return}T(J,Y)}},[c]),(0,o.jsxs)("div",{ref:H,className:(0,L.cn)("shelf-display-wrap w-full",Q,{"aiui-dark":s?.theme==="dark"}),children:[I&&(0,o.jsx)(A.default,{data:{title:I}}),v&&(0,o.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,o.jsx)(N.default,{value:M,tabs:u,tabShape:K,onTabClick:t=>{if(P(t?.tab),T(t?.data||[],t?.isShowRecommendedTab),!t?.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ce,component_name:pe,component_title:s?.title,component_position:1,navigation:t?.tab}});return}C()}})}),(0,o.jsx)("div",{ref:te,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)($.default,{data:{list:m,configuration:{...Z,event:n,isShowTag:U,isShowOriginalPrice:X,target:W,metafields:j,itemLength:m?.length,isDisplayBackImage:F}},id:`ShelfDisplay${e}${M}`,className:`${v?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:p?"flex-1":"",Slide:p?_.ShelfDisplayHorizontalItem:_.ShelfDisplayWrapItem,breakpoints:l||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:d?1:1.2},768:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:y()},1024:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:y(1024)},1440:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:y(1440)}}})})]})});var ue=(0,q.withLayout)(fe);
+"use strict";"use client";var re=Object.create;var w=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)w(e,a,{get:t[a],enumerable:!0})},L=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of le(t))!ce.call(e,l)&&l!==a&&w(e,l,{get:()=>t[l],enumerable:!(p=oe(t,l))||p.enumerable});return e};var g=(e,t,a)=>(a=e!=null?re(me(e)):{},L(t||!e||!e.__esModule?w(a,"default",{value:e,enumerable:!0}):a,e)),pe=e=>L(w({},"__esModule",{value:!0}),e);var be={};fe(be,{default:()=>_e});module.exports=pe(be);var o=require("react/jsx-runtime"),n=g(require("react")),N=require("../../helpers/utils.js"),z=g(require("./tabSwitch.js")),A=g(require("../Title/index.js")),$=g(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),I=require("../../shared/track.js"),O=require("react-responsive"),K=require("../../hooks/useRollout.js"),_=require("./shelfDisplayItem.js");const de="image",ue="product_shelf",he=e=>e==null?"default":String(e).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,ge=n.default.forwardRef(({key:e,data:t,event:a,buildData:p,breakpoints:l,className:Q="",recommendedData:c,target:W="_self",metafields:Z,isDisplayGudgments:R=!1,isDisplayBackImage:j=!1},F)=>{const{productsTab:d=[],productsCard:G=[],title:D,isShowTab:b=!0,tabShape:J="square",isShowTag:U=!1,isShowOriginalPrice:X=!0,isShowRecommendedCard:Y=!1,...ee}=t,[M,P]=(0,n.useState)(""),[m,y]=(0,n.useState)([]),x=(0,n.useRef)(!1),S=(0,n.useRef)(!1),C=(0,n.useRef)(null),te=(0,n.useRef)(we()),se=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),[ne,H]=(0,K.useRollout)({threshold:0}),u=m?.length<=1&&R,f=!se&&m?.length<=2&&R,v=s=>{switch(s){case 1440:return f?m?.length:4;case 1024:return f?m?.length:3;default:return f?m?.length:2.3}},B=()=>{(0,I.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((s,T)=>{const r=s?.variants?.find(i=>i?.sku===s?.sku)||s?.variants?.[0];return{item_id:s?.sku||r?.sku,item_name:s?.name,item_variant:r?.name,price:r?.price,index:T+1}})}})},k=(s,T)=>{if(T){const h=c?.map?.(r=>({...r,isShowRecommended:!0}));y(h?.length?h||[]:[])}else if(Array.isArray(s)){const r=s?.map?.(i=>{const V=p?.products?.find(ie=>ie?.handle===i?.handle);if(V)return{sku:i.sku,isShowRecommended:!1,custom_name:i.custom_name,custom_description:i.custom_description,custom_image:i.custom_image,custom_theme:i.custom_theme,...V}})?.filter(i=>i);y(r?.length?r||[]:[])}else y([])};(0,n.useImperativeHandle)(F,()=>C.current),(0,n.useEffect)(()=>{H&&c?.length&&!x.current&&(x.current=!0,B())},[H,c]),(0,n.useEffect)(()=>{if(!S.current){if(!S.current&&c?.length&&(S.current=!0),b){P(d?.[0]?.tab||""),k(d?.[0]?.data||[],d?.[0]?.isShowRecommendedTab);return}k(G,Y)}},[c]);const ae=he(M),E=`${te.current}-${ae}`;return(0,o.jsxs)("div",{ref:C,className:(0,N.cn)("shelf-display-wrap w-full",Q,{"aiui-dark":t?.theme==="dark"}),children:[D&&(0,o.jsx)(A.default,{data:{title:D}}),b&&(0,o.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,o.jsx)(z.default,{value:M,tabs:d,tabShape:J,onTabClick:s=>{if(P(s?.tab),k(s?.data||[],s?.isShowRecommendedTab),!s?.isShowRecommendedTab){(0,I.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:ue,component_title:t?.title,component_position:1,navigation:s?.tab}});return}B()}})}),(0,o.jsx)("div",{ref:ne,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)($.default,{data:{list:m,configuration:{...ee,event:a,isShowTag:U,isShowOriginalPrice:X,target:W,metafields:Z,itemLength:m?.length,isDisplayBackImage:j}},id:E,className:`${b?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:f?"flex-1":"",Slide:f?_.ShelfDisplayHorizontalItem:_.ShelfDisplayWrapItem,breakpoints:l||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:v()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:v(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:v(1440)}}},E)})]})});var _e=(0,q.withLayout)(ge);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ShelfDisplay/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "Title", "TabSwitch", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "safeTabKey", "swiperInstanceId", "Title", "TabSwitch", "SwiperBox"]
 }

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

@@ -1,10 +1,10 @@
-"use strict";var Z=Object.create;var P=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ae=(e,t)=>{for(var a in t)P(e,a,{get:t[a],enumerable:!0})},X=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of te(t))!le.call(e,r)&&r!==a&&P(e,r,{get:()=>t[r],enumerable:!(p=ee(t,r))||p.enumerable});return e};var A=(e,t,a)=>(a=e!=null?Z(se(e)):{},X(t||!e||!e.__esModule?P(a,"default",{value:e,enumerable:!0}):a,e)),oe=e=>X(P({},"__esModule",{value:!0}),e);var re={};ae(re,{ShelfDisplayHorizontalItem:()=>ne,ShelfDisplayWrapItem:()=>ie,getProductImage:()=>Q});module.exports=oe(re);var s=require("react/jsx-runtime"),R=require("../AiuiProvider/index.js"),M=require("./shelfDisplay.js"),z=A(require("../../components/picture.js")),H=A(require("../../components/badge.js")),x=require("../../helpers/utils.js"),V=require("../../components/text.js"),N=A(require("../../components/button.js")),q=require("../../shared/track.js"),G=require("../../shared/trackUrlRef.js"),J=require("../../components/heading.js"),K=require("../../hooks/useExposure.js"),u=require("react");const j="image",O="product_shelf",Y=999999999e-2,Q=e=>{const t=e?.sku,a=e?.variants,p=a?.find(T=>T?.sku===t),r=p?.image?.url||a?.[0]?.image?.url||"",k=p?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:r,altText:k}},ie=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:p,metafields:r,isTopTag:k=!1,isShowTag:T,isShowOriginalPrice:h}=t||{},{locale:b="us",copyWriting:_}=(0,R.useAiuiContext)(),{discounts:L,discountsCopy:B}=r||{},D=(0,u.useRef)(null),[C,i]=(0,u.useState)([]),[I,E]=(0,u.useState)(""),$=(l,g,d)=>t?.event?.primaryButton?.(l,g+1,d),S=(l,g,d)=>t?.event?.secondaryButton?.(l,g+1,d),n=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},U=!n?.availableForSale&&n?.price?.amount===Y,f=n?.coupons?.[0],{price:F,basePrice:W,discount:c}=(0,M.formatVariantPrice)({locale:b,amount:h&&f?f.variant_price4wscode:n.price,baseAmount:h&&f?n.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:y,altText:w}=Q(e),v=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,u.useEffect)(()=>{let l=[];if(c){const d=`${c}${L?.off||B?.off||""}`;E(d),l.push(d)}const g=e?.tags?.filter?.(d=>d?.startsWith?.("CLtag"))?.map?.(d=>d?.replace?.("CLtag:",""))?.slice?.(0,c?1:2);i(l.concat(g))},[e?.tags,c]),(0,K.useExposure)(D,{componentType:j,componentName:O,componentTitle:v,componentDescription:o,position:t?.index+1});const m=()=>(0,s.jsxs)(s.Fragment,{children:[T&&C?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((l,g)=>(0,s.jsx)(H.default,{className:"shelf-items-tag",children:l},g))}):null,v?(0,s.jsx)(J.Heading,{as:"h3",title:v||"",size:2,className:"shelf-display-product-title line-clamp-2",html:v||""}):null,o?(0,s.jsx)(V.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:U?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:_?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&F||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&W||""})]})}),(0,s.jsxs)("div",{className:(0,x.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(N.default,{variant:"secondary",onClick:()=>S(e,t?.index,t),className:`
+"use strict";var re=Object.create;var F=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var i in t)F(e,i,{get:t[i],enumerable:!0})},ie=(e,t,i,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of ce(t))!de.call(e,c)&&c!==i&&F(e,c,{get:()=>t[c],enumerable:!(m=pe(t,c))||m.enumerable});return e};var Q=(e,t,i)=>(i=e!=null?re(me(e)):{},ie(t||!e||!e.__esModule?F(i,"default",{value:e,enumerable:!0}):i,e)),xe=e=>ie(F({},"__esModule",{value:!0}),e);var ve={};ue(ve,{ShelfDisplayHorizontalItem:()=>he,ShelfDisplayWrapItem:()=>fe,getProductImage:()=>ae});module.exports=xe(ve);var s=require("react/jsx-runtime"),X=require("../AiuiProvider/index.js"),Y=require("./shelfDisplay.js"),M=Q(require("../../components/picture.js")),R=Q(require("../../components/badge.js")),f=require("../../helpers/utils.js"),Z=require("../../components/text.js"),j=Q(require("../../components/button.js")),ee=require("../../shared/track.js"),te=require("../../shared/trackUrlRef.js"),se=require("../../components/heading.js"),le=require("./handleCoupon.js"),oe=require("../../hooks/useExposure.js"),a=require("react");const A="image",G="product_shelf",ne=999999999e-2,ae=e=>{const t=e?.sku,i=e?.variants,m=i?.find(y=>y?.sku===t),c=m?.image?.url||i?.[0]?.image?.url||"",b=m?.image?.altText||i?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:c,altText:b}},fe=({data:e,configuration:t})=>{const{isDisplayBackImage:i=!1,itemShape:m,metafields:c,isTopTag:b=!1,isShowTag:y,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:O,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=(0,X.useAiuiContext)(),{discounts:U,discountsCopy:I}=c||{},z=(0,a.useRef)(null),[H,r]=(0,a.useState)([]),[L,V]=(0,a.useState)(""),q=(l,x,u)=>t?.event?.primaryButton?.(l,x+1,u),D=(l,x,u)=>t?.event?.secondaryButton?.(l,x+1,u),n=(0,a.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku&&l.find(x=>x?.sku===e?.sku)||l[0]},[e?.sku,e?.variants]),W=!n?.availableForSale&&n?.price?.amount===ne,P=(0,a.useMemo)(()=>(0,le.getCouponFromVariant)({variant:n,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[n,_,S,N,B,C]),$=!!(h&&P),E=e?.price?.currencyCode||"USD",w=(0,a.useMemo)(()=>(0,Y.formatVariantPrice)({locale:v,amount:$?P?.variant_price4wscode:n?.price,baseAmount:$?n?.price:0,currencyCode:E}),[E,v,$,P?.variant_price4wscode,n]),{price:J,basePrice:K,discount:d}=w,{imageUrl:k,altText:T}=ae(e),g=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,a.useEffect)(()=>{let l=[];if(d){const u=`${d}${U?.off||I?.off||""}`;V(u),l.push(u)}const x=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);r(l.concat(x))},[e?.tags,d,U?.off,I?.off]),(0,oe.useExposure)(z,{componentType:A,componentName:G,componentTitle:g,componentDescription:o,position:t?.index+1});const p=()=>(0,s.jsxs)(s.Fragment,{children:[y&&H?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((l,x)=>(0,s.jsx)(R.default,{className:"shelf-items-tag",children:l},x))}):null,g?(0,s.jsx)(se.Heading,{as:"h3",title:g||"",size:2,className:"shelf-display-product-title line-clamp-2",html:g||""}):null,o?(0,s.jsx)(Z.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:W?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&J||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&K||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(N.default,{variant:"primary",onClick:()=>$(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>q(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:D,className:(0,x.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",p==="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"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(z.default,{source:y,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:m()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[I&&k&&(0,s.jsx)(H.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:I||""}),(0,s.jsx)("div",{className:(0,x.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":v,target:t?.target,href:(0,G.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}`,`${j}_${O}`),onClick:()=>{(0,q.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(z.default,{source:y,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m()]})},e?.id||e?.handle)},ne=({data:e,configuration:t})=>{const{itemShape:a,itemLength:p,metafields:r}=t||{},{discounts:k,discountsCopy:T}=r||{},{locale:h="us",copyWriting:b}=(0,R.useAiuiContext)(),[_,L]=(0,u.useState)([]),B=(0,u.useRef)(null),D=(o,m,l)=>t?.event?.primaryButton?.(o,m+1,l),C=(o,m,l)=>t?.event?.secondaryButton?.(o,m+1,l),i=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},I=!i?.availableForSale&&i?.price?.amount===Y,E=t?.isShowTag,$=t?.isShowOriginalPrice,S=i?.coupons?.[0],{price:n,basePrice:U,discount:f}=(0,M.formatVariantPrice)({locale:h,amount:$&&S?S.variant_price4wscode:i.price,baseAmount:$&&S?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:F,altText:W}=Q(e),c=e?.custom_name||e?.title,y=e?.custom_description||e?.description;(0,K.useExposure)(B,{componentType:j,componentName:O,componentTitle:c,componentDescription:y,position:t?.index+1});const w=()=>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"},v=()=>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";return(0,u.useEffect)(()=>{let o=[];if(f){const l=`${f}${k?.off||T?.off||""}`;o.push(l)}const m=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,f?1:2);L(o.concat(m))},[e?.tags,f]),(0,s.jsx)("div",{ref:B,className:(0,x.cn)(w().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,x.cn)(v(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,x.cn)(w().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":c,target:t?.target,href:(0,G.trackUrlRef)(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${j}_${O}`),onClick:()=>{(0,q.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:(0,s.jsx)(z.default,{source:F,alt:W,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,x.cn)("flex flex-col items-start justify-center",w().boxItem),children:[E&&_?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:_?.map?.((o,m)=>(0,s.jsx)(H.default,{className:"shelf-items-tag",children:o},m))}):null,c?(0,s.jsx)(J.Heading,{as:"h3",title:c||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:c||""}):null,y?(0,s.jsx)(V.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:y||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:I?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&U||""})]})}),(0,s.jsxs)("div",{className:(0,x.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(N.default,{variant:"secondary",onClick:()=>C(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",m==="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"),children:i?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(M.default,{source:k,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:p()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&b&&(0,s.jsx)(R.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),(0,s.jsx)("div",{className:(0,f.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":g,target:t?.target,href:(0,te.trackUrlRef)(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{(0,ee.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(M.default,{source:k,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),p()]})},e?.id||e?.handle)},he=({data:e,configuration:t})=>{const{itemShape:i,itemLength:m,metafields:c}=t||{},{discounts:b,discountsCopy:y}=c||{},{locale:h="us",copyWriting:v,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=(0,X.useAiuiContext)(),[C,U]=(0,a.useState)([]),I=(0,a.useRef)(null),z=(o,p,l)=>t?.event?.primaryButton?.(o,p+1,l),H=(o,p,l)=>t?.event?.secondaryButton?.(o,p+1,l),r=(0,a.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(p=>p?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!r?.availableForSale&&r?.price?.amount===ne,V=t?.isShowTag,q=t?.isShowOriginalPrice,D=(0,a.useMemo)(()=>(0,le.getCouponFromVariant)({variant:r,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[r,O,_,S,N,B]),n=!!(q&&D),W=e?.price?.currencyCode||"USD",P=(0,a.useMemo)(()=>(0,Y.formatVariantPrice)({locale:h,amount:n?D?.variant_price4wscode:r?.price,baseAmount:n?r?.price:0,currencyCode:W}),[W,h,n,D?.variant_price4wscode,r]),{price:$,basePrice:E,discount:w}=P,{imageUrl:J,altText:K}=ae(e),d=e?.custom_name||e?.title,k=e?.custom_description||e?.description;(0,oe.useExposure)(I,{componentType:A,componentName:G,componentTitle:d,componentDescription:k,position:t?.index+1});const T=()=>m>=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"},g=()=>m>=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";return(0,a.useEffect)(()=>{let o=[];if(w){const l=`${w}${b?.off||y?.off||""}`;o.push(l)}const p=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,w?1:2);U(o.concat(p))},[e?.tags,w,b?.off,y?.off]),(0,s.jsx)("div",{ref:I,className:(0,f.cn)(T().wrap,i==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,f.cn)(g(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(T().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":d,target:t?.target,href:(0,te.trackUrlRef)(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{(0,ee.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(M.default,{source:J,alt:K,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,f.cn)("flex flex-col items-start justify-center",T().boxItem),children:[V&&C?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((o,p)=>(0,s.jsx)(R.default,{className:"shelf-items-tag",children:o},p))}):null,d?(0,s.jsx)(se.Heading,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:d||""}):null,k?(0,s.jsx)(Z.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:k||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:L?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&$||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&E||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(N.default,{variant:"primary",onClick:()=>D(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
             `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
 //# sourceMappingURL=shelfDisplayItem.js.map