@anker-in/headless-ui 1.3.18 → 1.3.19

package/dist/esm/biz-components/SceneShelfV3/ProductCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SceneShelfV3/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n  | 'stockTrack'\n  | 'stockBar'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u6807\u7B7E */}\n            {product?.priceLabel && availableForSale && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                  classNames?.productPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className=\"flex items-baseline gap-2\">\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                          {product.originalPrice}\n                        </Heading>\n                      )}\n                    </>\n                  ) : (\n                    <Heading size={2} className=\"text-info-tertiary\">\n                      {copy?.outOfStockLabel ?? 'Sold Out'}\n                    </Heading>\n                  )}\n                </div>\n              </div>\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'priceWrapper'\n  | 'originalPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\n        try {\n          switch (buttonFun) {\n            case 'buyNow':\n              await onShopNow?.(product)\n              break\n            case 'addCart':\n              await onAddToCart?.(product)\n              break\n            case 'learnMore':\n              await onLearnMore?.(product.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className={cn('flex items-baseline gap-2', classNames?.priceWrapper)}>\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading\n                          size={2}\n                          className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n                          as=\"h6\"\n                        >\n                          {product.originalPrice}\n                        </Heading>\n                      )}\n                    </>\n                  ) : (\n                    <Heading size={2} className=\"text-info-tertiary\">\n                      {copy?.outOfStockLabel ?? 'Sold Out'}\n                    </Heading>\n                  )}\n                </div>\n              </div>\n\n              {product?.priceLabel && availableForSale && (\n                <Text\n                  size={4}\n                  className={cn(\n                    'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                    classNames?.productPriceLabel\n                  )}\n                >\n                  {product.priceLabel}\n                </Text>\n              )}\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
+  "mappings": "aA6Nc,OAsDM,YAAAA,EAtDN,OAAAC,EA2BF,QAAAC,MA3BE,oBA3Nd,UAAYC,MAAW,QACvB,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAS,UAAAC,EAAQ,SAAAC,EAAO,QAAAC,EAAM,eAAAC,EAAa,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BAEzE,OAAS,eAAAC,MAAmB,8BAG5B,OAAS,WAAAC,MAAe,wBACxB,OAAS,kBAAAC,MAAsB,2BA4GxB,MAAMC,EAAcb,EAAM,WAC/B,CACE,CACE,QAAAc,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,KAAAC,EACA,oBAAAC,EACA,MAAAC,EAAQ,QACR,OAAAC,EAAS,KACT,MAAAC,EAAQ,EACR,QAAAC,CACF,EACAC,IACG,CACH,KAAM,CAACC,EAAgBC,CAAiB,EAAIlC,EAAM,SAAS,EAAK,EAC1D,CAACmC,EAAkBC,CAAmB,EAAIpC,EAAM,SAAS,EAAK,EAC9D,CAAE,aAAAqC,CAAa,EAAIzB,EAAe,EAElC0B,EAAYD,GAAc,UAE1BE,EAAmB,CAACzB,EAAQ,QAE5B0B,EAAoBxC,EAAM,YAC9B,MAAOyC,EAAgCC,IAAyC,CAC9E,GAAI,CAACD,EAAW,OAChB,MAAME,EAAaD,IAAe,UAAYR,EAAoBE,EAClEO,EAAW,EAAI,EACf,GAAI,CACF,OAAQF,EAAW,CACjB,IAAK,SACH,MAAMvB,IAAYJ,CAAO,EACzB,MACF,IAAK,UACH,MAAMK,IAAcL,CAAO,EAC3B,MACF,IAAK,YACH,MAAMG,IAAcH,EAAQ,IAAI,EAChC,KACJ,CACF,QAAE,CACA6B,EAAW,EAAK,CAClB,CACF,EACA,CAAC7B,EAASI,EAAWC,EAAaF,CAAW,CAC/C,EAEM2B,EAAc5C,EAAM,QACxB,IAAME,EAAiBQ,EAAYI,EAAQ,KAAMwB,EAAY,uBAAsC,EAAGT,CAAM,EAC5G,CAACf,EAAQ,KAAMwB,EAAWT,CAAM,CAClC,EAEMgB,EAAiB7C,EAAM,YAAY,IAAM,CAC7C2B,IAAsBb,CAAO,EAC7BH,EAAQ,CACN,MAAO,WACP,WAAY,cACZ,eAAgB,yBAChB,WAAY2B,EACZ,MAAO,CACL,CACE,QAASxB,EAAQ,IACjB,UAAWA,EAAQ,MACnB,aAAcA,EAAQ,GACtB,MAAOA,EAAQ,aACf,MAAOgB,CACT,CACF,EACA,SAAUC,EACV,SAAUD,CACZ,CAAC,CACH,EAAG,CAACH,EAAqBb,EAASwB,EAAWR,EAAOC,CAAO,CAAC,EAE5D,OACEjC,EAACO,EAAA,CACC,IAAK2B,EACL,UAAW/B,EACT,uFACAc,EACAK,GAAY,YACZ,CACE,kCAAmCQ,IAAU,MAC/C,CACF,EAEA,SAAA7B,EAACO,EAAA,CAAY,UAAU,gEACrB,UAAAR,EAAC,OAAI,UAAU,oGACb,SAAAA,EAAC,KACC,QAAS+C,EACR,GAAI,CAAClB,GAAuB,CAC3B,KAAMiB,CACR,EACA,IAAI,aAEJ,SAAA9C,EAACS,EAAA,CACC,OAAQO,EAAQ,SAChB,IAAKA,EAAQ,SACb,UAAU,yCACV,aAAa,+BACf,EACF,EACF,EAGAhB,EAAC,OAAI,UAAU,+CACZ,SAAAkB,GACCF,EAAQ,MAAM,IAAI,CAACgC,EAAKhB,IACtBhC,EAACM,EAAA,CAEC,KAAK,KACL,QAAS0C,EAAI,SAAW,UACxB,UAAW7C,EAAG6C,EAAI,UAAY,cAAgB,OAAS,EAAE,EACzD,gBAAiBA,EAAI,gBAEpB,SAAAA,EAAI,OANAhB,CAOP,CACD,EACL,EAGA/B,EAAC,OAAI,UAAU,mDACb,UAAAA,EAAC,OAAI,UAAU,OACb,UAAAD,EAACW,EAAA,CACC,GAAG,KACH,KAAM,EACN,UAAWR,EACT,wEACAmB,GAAY,YACd,EACA,KAAMN,EAAQ,aAAeA,EAAQ,MACvC,GACEA,GAAS,oBAAsBA,GAAS,cACxChB,EAACU,EAAA,CACC,KAAM,EACN,UAAWP,EACT,0FACAmB,GAAY,kBACd,EACA,KAAMN,EAAQ,oBAAsBA,EAAQ,YAC9C,GAEJ,EAGAf,EAAC,OACC,UAAAD,EAAC,OAAI,UAAWG,EAAG,OAAQmB,GAAY,YAAY,EACjD,SAAAtB,EAAC,OAAI,UAAWG,EAAG,4BAA6BmB,GAAY,YAAY,EACrE,SAAAmB,EACCxC,EAAAF,EAAA,CACE,UAAAC,EAACW,EAAA,CAAQ,KAAM,EAAG,UAAU,oBAAoB,GAAG,KAChD,SAAAK,EAAQ,aACX,EACCW,GAAqBX,EAAQ,eAC5BhB,EAACW,EAAA,CACC,KAAM,EACN,UAAWR,EAAG,kCAAmCmB,GAAY,aAAa,EAC1E,GAAG,KAEF,SAAAN,EAAQ,cACX,GAEJ,EAEAhB,EAACW,EAAA,CAAQ,KAAM,EAAG,UAAU,qBACzB,SAAAiB,GAAM,iBAAmB,WAC5B,EAEJ,EACF,EAECZ,GAAS,YAAcyB,GACtBzC,EAACU,EAAA,CACC,KAAM,EACN,UAAWP,EACT,+EACAmB,GAAY,iBACd,EAEC,SAAAN,EAAQ,WACX,EAIFf,EAAC,OACC,UAAWE,EACT,oFACAmB,GAAY,WACd,EAEC,UAAAC,GACCvB,EAACK,EAAA,CACC,QAAQ,YACR,KAAK,OACL,UAAWF,EACT,6DACAmB,GAAY,eACd,EACA,QAAS,IAAM,CACboB,EAAkBlB,EAAoB,WAAW,EACjDX,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY2B,GAAa,YACzB,eAAgB,OAChB,eAAgB,sBAChB,gBAAiBxB,EAAQ,aAAeA,EAAQ,MAChD,sBAAuBA,EAAQ,oBAAsB,GACrD,YAAaO,EACb,IAAKP,EAAQ,KAAO,GACpB,SAAUgB,CACZ,CACF,CAAC,CACH,EACA,SAAUhB,EAAQ,SAAWQ,IAAuB,YACpD,QAASa,EAER,SAAAd,EACH,EAEDE,GACCzB,EAACK,EAAA,CACC,QAAQ,UACR,KAAK,OACL,UAAWF,EACT,6DACAmB,GAAY,aACd,EACA,QAAS,IAAM,CACboB,EAAkBhB,EAAkB,SAAS,EAC7Cb,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY2B,GAAa,YACzB,eAAgB,OAChB,eAAgB,sBAChB,gBAAiBxB,EAAQ,aAAeA,EAAQ,MAChD,sBAAuBA,EAAQ,oBAAsB,GACrD,YAAaS,EACb,IAAKT,EAAQ,KAAO,GACpB,SAAUgB,CACZ,CACF,CAAC,CACH,EACA,SAAUhB,EAAQ,SAAWU,IAAqB,YAClD,QAASS,EAER,SAAAV,EACH,GAEJ,GACF,GACF,GACF,EACF,CAEJ,CACF,EAEAV,EAAY,YAAc,2BAE1B,IAAOkC,GAAQlC",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "getLocalizedPath", "Button", "Badge", "Card", "CardContent", "Picture", "Text", "Heading", "trackUrlRef", "gaTrack", "useAiuiContext", "ProductCard", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "theme", "locale", "index", "tabName", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "trackingData", "pageGroup", "availableForSale", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "trackedHref", "onProductClick", "tag", "ProductCard_default"]
 }

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

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

package/dist/esm/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 { Tabs, TabsList, TabsTrigger } from '../../components/tabs.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      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\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                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  custom_bg_image: item?.custom_bg_image || '',\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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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                onAddCart,\n                onBuyNow,\n                onLearnMore,\n                formatPrice,\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\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "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", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.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      renderOriginalPrice,\n      renderPriceLabel,\n      renderPrice,\n      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\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                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  custom_bg_image: item?.custom_bg_image || '',\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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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                renderOriginalPrice,\n                renderPriceLabel,\n                renderPrice,\n                onAddCart,\n                onBuyNow,\n                onLearnMore,\n                formatPrice,\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\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "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", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts

@@ -114,5 +114,39 @@ export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement>
     onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void;
     /** 自定义价格格式化函数，未传则使用默认格式化逻辑 */
     formatPrice?: FormattedPriceFunc;
+    /**
+     * 原价区域渲染函数，用于在原价位置展示自定义内容（如折扣信息）。
+     * 不传时使用默认的原价渲染（划线价）。
+     * @param item - 当前产品数据
+     * @param priceInfo - 格式化后的价格信息
+     */
+    renderOriginalPrice?: (item: ShelfDisplayItem, priceInfo: {
+        price: string;
+        basePrice: string | undefined;
+        discount: string | null;
+        discountAmount: string | undefined;
+    }) => React.ReactNode;
+    /**
+     * 价格标签渲染函数，在价格下方展示自定义内容。
+     * 不传时不展示。
+     * @param item - 当前产品数据
+     * @param variant - 当前匹配的变体数据
+     */
+    renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode;
+    /**
+     * 价格区域渲染函数，用于完全自定义价格区域（包括最终价格、原价、售罄状态等）。
+     * 不传时使用默认的价格渲染逻辑。
+     * @param item - 当前产品数据
+     * @param priceInfo - 格式化后的价格信息及上下文
+     */
+    renderPrice?: (item: ShelfDisplayItem, priceInfo: {
+        price: string;
+        basePrice: string | undefined;
+        discount: string | null;
+        discountAmount: string | undefined;
+        variant: any;
+        coupon: any;
+        isSoldOut: boolean;
+    }) => React.ReactNode;
 }
 export {};

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

@@ -1,2 +1,2 @@
-import h from"decimal.js";import{PRICE_SYMBOL as p,formatPrice as m,languageTerritory as D}from"../../helpers/index.js";function v({amount:t,baseAmount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:c,minimumFractionDigits:g,removeTrailingZeros:u,customFormatPrice:r}){if(typeof Intl>"u")return{price:`${p[e]}${t}`,basePrice:`${p[e]}${n}`,discount:`${p[e]}${n-t||0}`};const s=n>t;let y=null;const d=D(e);if(d){const i=new Intl.NumberFormat(d,{style:"percent"});y=s?i.format((n-t)/n):null}let l;if(s){const i=new h(n).sub(t||0).toNumber();l=r?r({amount:i,locale:e}):m({amount:i,currencyDisplay:o,currencyCode:a||"USD",locale:e,maximumFractionDigits:2})}const b=r?r({amount:t,locale:e}):m({amount:t,currencyCode:a,currencyDisplay:o,locale:e,removeTrailingZeros:u}),f=s?r?r({amount:n,locale:e}):m({amount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:c,minimumFractionDigits:g,removeTrailingZeros:u}):void 0;return{price:b,basePrice:f,discount:y,discountAmount:l}}export{v as formatVariantPrice};
+import h from"decimal.js";import{PRICE_SYMBOL as p,formatPrice as d,languageTerritory as D}from"../../helpers/index.js";function T({amount:t,baseAmount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:y,minimumFractionDigits:g,removeTrailingZeros:u,customFormatPrice:i}){if(typeof Intl>"u")return{price:`${p[e]}${t}`,basePrice:`${p[e]}${n}`,discount:`${p[e]}${n-t||0}`};const s=n>t;let c=null;const m=D(e);if(m){const r=new Intl.NumberFormat(m,{style:"percent"});c=s?r.format((n-t)/n):null}let l;if(s){const r=new h(n).sub(t||0).toNumber();l=i?i({amount:r,locale:e}):d({amount:r,currencyDisplay:o,currencyCode:a||"USD",locale:e,maximumFractionDigits:2})}const f=i?i({amount:t,locale:e}):d({amount:t,currencyCode:a,currencyDisplay:o,locale:e,removeTrailingZeros:u}),b=s?i?i({amount:n,locale:e}):d({amount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:y,minimumFractionDigits:g,removeTrailingZeros:u}):void 0;return{price:f,basePrice:b,discount:c,discountAmount:l}}export{T as formatVariantPrice};
 //# sourceMappingURL=shelfDisplay.js.map

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n  amount: number\n  isDigits?: boolean\n  withOutSymbol?: boolean\n  locale?: string\n  forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n  customFormatPrice,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n  customFormatPrice?: FormattedPriceFunc\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = customFormatPrice\n      ? customFormatPrice({ amount: savePriceAmount, locale })\n      : formatPrice({\n          amount: savePriceAmount,\n          currencyDisplay,\n          currencyCode: currencyCode || 'USD',\n          locale,\n          maximumFractionDigits: 2,\n        })\n  }\n\n  const price = customFormatPrice\n    ? customFormatPrice({ amount, locale })\n    : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? customFormatPrice\n      ? customFormatPrice({ amount: baseAmount, locale })\n      : formatPrice({\n          amount: baseAmount,\n          currencyCode,\n          currencyDisplay,\n          locale,\n          maximumFractionDigits,\n          minimumFractionDigits,\n          removeTrailingZeros,\n        })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n  custom_bg_image?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /**\n   * \u6309\u94AE\u4E8B\u4EF6\n   * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n   */\n  event?: EventType\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n  formatPrice?: FormattedPriceFunc\n}\n"],
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n  amount: number\n  isDigits?: boolean\n  withOutSymbol?: boolean\n  locale?: string\n  forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n  customFormatPrice,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n  customFormatPrice?: FormattedPriceFunc\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = customFormatPrice\n      ? customFormatPrice({ amount: savePriceAmount, locale })\n      : formatPrice({\n          amount: savePriceAmount,\n          currencyDisplay,\n          currencyCode: currencyCode || 'USD',\n          locale,\n          maximumFractionDigits: 2,\n        })\n  }\n\n  const price = customFormatPrice\n    ? customFormatPrice({ amount, locale })\n    : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? customFormatPrice\n      ? customFormatPrice({ amount: baseAmount, locale })\n      : formatPrice({\n          amount: baseAmount,\n          currencyCode,\n          currencyDisplay,\n          locale,\n          maximumFractionDigits,\n          minimumFractionDigits,\n          removeTrailingZeros,\n        })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n  custom_bg_image?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /**\n   * \u6309\u94AE\u4E8B\u4EF6\n   * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n   */\n  event?: EventType\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n  formatPrice?: FormattedPriceFunc\n  /**\n   * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n   */\n  renderOriginalPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n    }\n  ) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n   * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n   */\n  renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n   */\n  renderPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n      variant: any\n      coupon: any\n      isSoldOut: boolean\n    }\n  ) => React.ReactNode\n}\n"],
   "mappings": "AAAA,OAAOA,MAAa,aAGpB,OAAS,gBAAAC,EAAc,eAAAC,EAAa,qBAAAC,MAAyB,yBAUtD,SAASC,EAAmB,CACjC,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACF,EAUG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGZ,EAAaQ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAGJ,EAAaQ,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAGL,EAAaQ,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcR,EAAaD,EACjC,IAAIU,EAAW,KACf,MAAMC,EAAgBb,EAAkBM,CAAM,EAC9C,GAAIO,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQX,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIY,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAInB,EAAQM,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBL,EACbA,EAAkB,CAAE,OAAQM,EAAiB,OAAAV,CAAO,CAAC,EACrDP,EAAY,CACV,OAAQiB,EACR,gBAAAX,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACP,CAEA,MAAMW,EAAQP,EACVA,EAAkB,CAAE,OAAAR,EAAQ,OAAAI,CAAO,CAAC,EACpCP,EAAY,CAAE,OAAAG,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAChFS,EAAYP,EACdD,EACEA,EAAkB,CAAE,OAAQP,EAAY,OAAAG,CAAO,CAAC,EAChDP,EAAY,CACV,OAAQI,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACH,OAEJ,MAAO,CAAE,MAAAQ,EAAO,UAAAC,EAAW,SAAAN,EAAU,eAAAG,CAAe,CACtD",
   "names": ["Decimal", "PRICE_SYMBOL", "formatPrice", "languageTerritory", "formatVariantPrice", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "customFormatPrice", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
 }

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

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