@anker-in/headless-ui 1.3.61 → 1.3.62

package/dist/cjs/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 interface SocialEndorsementItem {\n  /** \u56FE\u6807\uFF1A\u56FE\u7247 URL \u5B57\u7B26\u4E32\uFF0C\u6216 SVG React \u8282\u70B9 */\n  icon: string | React.ReactNode\n  /** \u65E0\u969C\u788D\u6807\u7B7E */\n  label?: 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  /** \u662F\u5426\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u22651025px \u751F\u6548\uFF0C\u4E00\u884C 3 \u4E2A\uFF0C\u22651440px \u4E00\u884C 4 \u4E2A\uFF0C\u22641024px \u4ECD\u4E3A\u8F6E\u64AD\uFF09 */\n  isTile?: boolean\n  /** \u5E73\u94FA\u5E03\u5C40\u4E0B\u6700\u591A\u5C55\u793A\u7684\u884C\u6570\uFF0C\u8D85\u8FC7\u8BE5\u884C\u6570\u65F6\u6298\u53E0\u6536\u8D77\uFF0C\u9700\u70B9\u51FB\u300C\u5C55\u5F00\u300D\u67E5\u770B\u66F4\u591A\u3002\u672A\u8BBE\u7F6E\u5219\u4E0D\u6298\u53E0 */\n  tileMaxRows?: number\n  /** \u5E73\u94FA\u5E03\u5C40\u6298\u53E0\u65F6\u300C\u5C55\u5F00\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show more' */\n  tileExpandText?: string\n  /** \u5E73\u94FA\u5E03\u5C40\u5C55\u5F00\u540E\u300C\u6536\u8D77\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show less' */\n  tileCollapseText?: string\n  /** shelf-prices-tag\uFF08\u6298\u6263\u4EF7\u683C\u6807\u7B7E\uFF09\u662F\u5426\u663E\u793A\uFF0C\u9ED8\u8BA4 false\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  isShowPricesTag?: boolean\n  /** shelf-prices-tag \u6587\u6848\u989C\u8272\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Design Token CSS \u53D8\u91CF\uFF0C\u5982 var(--info-primary-color)\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagTextColor?: string\n  /** shelf-prices-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagBgColor?: string\n  /** shelf-items-tag\uFF08\u81EA\u5B9A\u4E49\u6807\u7B7E\uFF09\u6587\u6848\u989C\u8272\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagTextColor?: string\n  /** shelf-items-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagBgColor?: string\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  /** \u5143\u6570\u636E\uFF1A\u6298\u6263\u6587\u6848\uFF08discounts.off / discountsCopy.off\uFF09\u53CA\u793E\u5A92\u80CC\u4E66\u56FE\u6807\uFF08socialEndorsements: SocialEndorsementItem[]\uFF09 */\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"],
+  "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 interface SocialEndorsementItem {\n  /** \u56FE\u6807\uFF1A\u56FE\u7247 URL \u5B57\u7B26\u4E32\uFF0C\u6216 SVG React \u8282\u70B9 */\n  icon: string | React.ReactNode\n  /** \u65E0\u969C\u788D\u6807\u7B7E */\n  label?: 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  /** \u662F\u5426\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u22651025px \u751F\u6548\uFF0C\u4E00\u884C 3 \u4E2A\uFF0C\u22651440px \u4E00\u884C 4 \u4E2A\uFF0C\u22641024px \u4ECD\u4E3A\u8F6E\u64AD\uFF09 */\n  isTile?: boolean\n  /** \u5E73\u94FA\u5E03\u5C40\u4E0B\u6700\u591A\u5C55\u793A\u7684\u884C\u6570\uFF0C\u8D85\u8FC7\u8BE5\u884C\u6570\u65F6\u6298\u53E0\u6536\u8D77\uFF0C\u9700\u70B9\u51FB\u300C\u5C55\u5F00\u300D\u67E5\u770B\u66F4\u591A\u3002\u672A\u8BBE\u7F6E\u5219\u4E0D\u6298\u53E0 */\n  tileMaxRows?: number\n  /** \u5E73\u94FA\u5E03\u5C40\u6298\u53E0\u65F6\u300C\u5C55\u5F00\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show more' */\n  tileExpandText?: string\n  /** \u5E73\u94FA\u5E03\u5C40\u5C55\u5F00\u540E\u300C\u6536\u8D77\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show less' */\n  tileCollapseText?: string\n  /** shelf-prices-tag\uFF08\u6298\u6263\u4EF7\u683C\u6807\u7B7E\uFF09\u662F\u5426\u663E\u793A\uFF0C\u9ED8\u8BA4 false\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  isShowPricesTag?: boolean\n  /** shelf-prices-tag \u6587\u6848\u989C\u8272\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Design Token CSS \u53D8\u91CF\uFF0C\u5982 var(--info-primary-color)\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagTextColor?: string\n  /** shelf-prices-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagBgColor?: string\n  /** shelf-items-tag\uFF08\u81EA\u5B9A\u4E49\u6807\u7B7E\uFF09\u6587\u6848\u989C\u8272\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagTextColor?: string\n  /** shelf-items-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagBgColor?: string\n}\n\n/**\n * \u4EF7\u683C\u6E32\u67D3\u4E0A\u4E0B\u6587\uFF1ArenderOriginalPrice / renderPrice \u7B49\u6E32\u67D3\u51FD\u6570\u5171\u4EAB\u7684\u683C\u5F0F\u5316\u4EF7\u683C\u4FE1\u606F\u3002\n * \u540E\u7EED\u5982\u9700\u5411\u6E32\u67D3\u51FD\u6570\u629B\u51FA\u66F4\u591A\u53C2\u6570\uFF0C\u76F4\u63A5\u5728\u672C\u7C7B\u578B\u4E2D\u8FFD\u52A0\u5B57\u6BB5\u5373\u53EF\uFF08\u5411\u540E\u517C\u5BB9\uFF09\u3002\n */\nexport interface ShelfDisplayPriceInfo {\n  price: string\n  basePrice: string | undefined\n  discount: string | null\n  discountAmount: string | undefined\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u6765\u6E90 data.isShowOriginalPrice\uFF0C\u9ED8\u8BA4 true\uFF09 */\n  isShowOriginalPrice: boolean\n}\n\n/** renderPrice \u5B8C\u6574\u4E0A\u4E0B\u6587\uFF1A\u5728\u4EF7\u683C\u4FE1\u606F\u57FA\u7840\u4E0A\u8FFD\u52A0\u53D8\u4F53 / \u4F18\u60E0\u5238 / \u552E\u7F44\u72B6\u6001\u3002 */\nexport interface ShelfDisplayPriceRenderInfo extends ShelfDisplayPriceInfo {\n  variant: any\n  coupon: any\n  isSoldOut: boolean\n}\n\n/**\n * renderPriceLabel \u4E0A\u4E0B\u6587\uFF1A\u7528\u4E8E\u5411\u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\u629B\u51FA\u914D\u7F6E\u4FE1\u606F\u3002\n * \u540E\u7EED\u6269\u5C55\u65F6\u5728\u6B64\u8FFD\u52A0\u5B57\u6BB5\u5373\u53EF\uFF08\u5411\u540E\u517C\u5BB9\uFF09\u3002\n */\nexport interface ShelfDisplayPriceLabelContext {\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u6765\u6E90 data.isShowOriginalPrice\uFF0C\u9ED8\u8BA4 true\uFF09 */\n  isShowOriginalPrice: boolean\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  /** \u5143\u6570\u636E\uFF1A\u6298\u6263\u6587\u6848\uFF08discounts.off / discountsCopy.off\uFF09\u53CA\u793E\u5A92\u80CC\u4E66\u56FE\u6807\uFF08socialEndorsements: SocialEndorsementItem[]\uFF09 */\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\uFF08\u542B isShowOriginalPrice\uFF09\n   */\n  renderOriginalPrice?: (item: ShelfDisplayItem, priceInfo: ShelfDisplayPriceInfo) => 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   * @param context - \u6E32\u67D3\u4E0A\u4E0B\u6587\uFF08\u542B isShowOriginalPrice\uFF0C\u540E\u7EED\u53EF\u6269\u5C55\u66F4\u591A\u5B57\u6BB5\uFF09\n   */\n  renderPriceLabel?: (item: ShelfDisplayItem, variant: any, context?: ShelfDisplayPriceLabelContext) => 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\uFF08\u542B isShowOriginalPrice\uFF09\n   */\n  renderPrice?: (item: ShelfDisplayItem, priceInfo: ShelfDisplayPriceRenderInfo) => React.ReactNode\n}\n"],
   "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoB,yBAGpBC,EAA6D,kCAUtD,SAASH,EAAmB,CACjC,OAAAI,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,GAAG,eAAaJ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAG,eAAaI,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAG,eAAaG,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcR,EAAaD,EACjC,IAAIU,EAAW,KACf,MAAMC,KAAgB,qBAAkBP,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,IAAI,EAAAC,QAAQd,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBL,EACbA,EAAkB,CAAE,OAAQM,EAAiB,OAAAV,CAAO,CAAC,KACrD,eAAY,CACV,OAAQU,EACR,gBAAAX,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACP,CAEA,MAAMY,EAAQR,EACVA,EAAkB,CAAE,OAAAR,EAAQ,OAAAI,CAAO,CAAC,KACpC,eAAY,CAAE,OAAAJ,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAChFU,EAAYR,EACdD,EACEA,EAAkB,CAAE,OAAQP,EAAY,OAAAG,CAAO,CAAC,KAChD,eAAY,CACV,OAAQH,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACH,OAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,SAAAP,EAAU,eAAAG,CAAe,CACtD",
   "names": ["shelfDisplay_exports", "__export", "formatVariantPrice", "__toCommonJS", "import_decimal", "import_helpers", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "customFormatPrice", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType, SocialEndorsementItem } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState, type CSSProperties } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n  const sku = data?.sku\n  const skuArray = data?.variants\n  const findSku = skuArray?.find((item: any) => item?.sku === sku)\n  const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n  return {\n    imageUrl,\n    altText,\n  }\n}\n\nconst ShelfDisplaySocialEndorsements = ({ items }: { items?: SocialEndorsementItem[] }) => {\n  if (!items?.length) {\n    return null\n  }\n  return (\n    <div className=\"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1\">\n      {items.map((item, index) =>\n        typeof item.icon === 'string' ? (\n          <img\n            key={index}\n            src={item.icon}\n            alt={item.label || ''}\n            loading=\"lazy\"\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 object-contain\"\n          />\n        ) : (\n          <Text\n            key={index}\n            aria-label={item.label}\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full\"\n          >\n            {item.icon}\n          </Text>\n        )\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n    isShowShortTitle = false,\n    isShowPricesTag = false,\n    pricesTagTextColor,\n    pricesTagBgColor,\n    itemsTagTextColor,\n    itemsTagBgColor,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: coupon ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: coupon ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, coupon, currencyDisplay, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      // handleTags.push(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount && isShowPricesTag ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, isShowPricesTag, discounts?.off, discountsCopy?.off])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const bottomContent = () => {\n    return (\n      <div className=\"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4\">\n        <div className=\"shelf-display-product-content-title-desc\">\n          {currentDisplayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={currentDisplayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title text-info-primary mb-1 line-clamp-2\"\n              html={currentDisplayTitle || ''}\n            />\n          ) : null}\n          <Text\n            size={2}\n            className={cn(\n              'lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]'\n            )}\n            html={displayDescription || ''}\n          />\n        </div>\n        <div className=\"shelf-display-product-content-price-button\">\n          <div className=\"mb-2 flex items-center\">\n            {renderPrice ? (\n              renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n            ) : isSoldOut ? (\n              <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                {renderOriginalPrice\n                  ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n                  : basePrice &&\n                    isShowOriginalPrice && (\n                      <div className=\"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through\">\n                        {variant?.availableForSale ? basePrice || '' : ''}\n                      </div>\n                    )}\n              </>\n            )}\n          </div>\n          {!renderPrice && renderPriceLabel?.(data, variant)}\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton && !isSoldOut ? (\n              <Button\n                disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                variant=\"secondary\"\n                href={data?.custom_secondary_link}\n                as={data?.custom_secondary_link ? 'a' : 'button'}\n                onClick={handleSecondaryClick}\n                loading={secondaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                variant=\"primary\"\n                href={data?.custom_primary_link}\n                as={data?.custom_primary_link ? 'a' : 'button'}\n                onClick={handlePrimaryClick}\n                loading={primaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const pricesTagStyle: CSSProperties = {\n    ...(pricesTagTextColor ? { color: pricesTagTextColor } : {}),\n    ...(pricesTagBgColor ? { backgroundColor: pricesTagBgColor, backgroundImage: 'none' } : {}),\n    ...(pricesTagTextColor || pricesTagBgColor ? { outline: 'none' } : {}),\n  }\n  const itemsTagStyle: CSSProperties = {\n    ...(itemsTagTextColor ? { color: itemsTagTextColor } : {}),\n    ...(itemsTagBgColor ? { backgroundColor: itemsTagBgColor, backgroundImage: 'none' } : {}),\n    ...(itemsTagTextColor || itemsTagBgColor ? { outlineColor: itemsTagTextColor } : {}),\n  }\n\n  const TagsComp = () => {\n    return (\n      <div className=\"lg-desktop:h-[28px] lg-desktop:flex-[28] box-border flex h-6 flex-[24] flex-wrap gap-1 overflow-hidden\">\n        {isShowPricesTag && currentPriceTag && (\n          <Badge className=\"shelf-prices-tag\" variant=\"fill\" style={pricesTagStyle}>\n            {currentPriceTag || ''}\n          </Badge>\n        )}\n        {isShowTag &&\n          showTags?.length > 0 &&\n          showTags?.map?.((item: any, index: number) => (\n            <Badge key={index} className=\"shelf-items-tag\" variant=\"outline\" style={itemsTagStyle}>\n              {item}\n            </Badge>\n          ))}\n      </div>\n    )\n  }\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'box-border w-full cursor-pointer overflow-hidden duration-300',\n        'rounded-box',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative',\n        'md-tablet:h-[422px] shelf-display-item',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <TagsComp />\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className={cn('flex h-full justify-center object-cover [&_img]:w-auto', {\n                'opacity-0': custom_bg_image,\n              })}\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4\">\n          {/* {currentPriceTag && isTopTag && (\n            <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\" variant=\"fill\">\n              {currentPriceTag || ''}\n            </Badge>\n          )} */}\n          <TagsComp />\n          <div\n            className={cn(\n              'shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden',\n              {\n                'opacity-0': custom_bg_image,\n              }\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n            <ShelfDisplaySocialEndorsements items={data?.socialEndorsements} />\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    itemShape,\n    itemLength,\n    metafields,\n    isShowShortTitle,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { discounts, discountsCopy } = metafields || {}\n  const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants[0]\n    }\n    return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          '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]',\n        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',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        '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]',\n      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',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        'rounded-box',\n        'shelf-display-item',\n        'duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-container-secondary-1 tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div\n          className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden', {\n            'opacity-0': custom_bg_image,\n          })}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n          {isShowTag && (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.length > 0 &&\n                showTags?.map?.((item: any, index: number) => (\n                  <Badge key={index} className=\"shelf-items-tag\" variant=\"fill\">\n                    {item}\n                  </Badge>\n                ))}\n            </div>\n          )}\n          {currentDisplayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={currentDisplayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]\"\n              html={currentDisplayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              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\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {renderPrice ? (\n              renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n            ) : isSoldOut ? (\n              <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                {renderOriginalPrice\n                  ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n                  : basePrice && (\n                      <div className=\"origin-price tablet:text-xl text-info-quaternary ml-1 text-lg font-bold line-through\">\n                        {variant?.availableForSale ? basePrice || '' : ''}\n                      </div>\n                    )}\n              </>\n            )}\n          </div>\n          {!renderPrice && renderPriceLabel?.(data, variant)}\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton && !isSoldOut ? (\n              <Button\n                disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                variant=\"secondary\"\n                href={data?.custom_secondary_link}\n                as={data?.custom_secondary_link ? 'a' : 'button'}\n                onClick={handleSecondaryClick}\n                loading={secondaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                variant=\"primary\"\n                href={data?.custom_primary_link}\n                as={data?.custom_primary_link ? 'a' : 'button'}\n                onClick={handlePrimaryClick}\n                loading={primaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType, SocialEndorsementItem } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState, type CSSProperties } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n  const sku = data?.sku\n  const skuArray = data?.variants\n  const findSku = skuArray?.find((item: any) => item?.sku === sku)\n  const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n  return {\n    imageUrl,\n    altText,\n  }\n}\n\nconst ShelfDisplaySocialEndorsements = ({ items }: { items?: SocialEndorsementItem[] }) => {\n  if (!items?.length) {\n    return null\n  }\n  return (\n    <div className=\"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1\">\n      {items.map((item, index) =>\n        typeof item.icon === 'string' ? (\n          <img\n            key={index}\n            src={item.icon}\n            alt={item.label || ''}\n            loading=\"lazy\"\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 object-contain\"\n          />\n        ) : (\n          <Text\n            key={index}\n            aria-label={item.label}\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full\"\n          >\n            {item.icon}\n          </Text>\n        )\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n    isShowShortTitle = false,\n    isShowPricesTag = false,\n    pricesTagTextColor,\n    pricesTagBgColor,\n    itemsTagTextColor,\n    itemsTagBgColor,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: coupon ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: coupon ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, coupon, currencyDisplay, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      // handleTags.push(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount && isShowPricesTag ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, isShowPricesTag, discounts?.off, discountsCopy?.off])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const bottomContent = () => {\n    return (\n      <div className=\"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4\">\n        <div className=\"shelf-display-product-content-title-desc\">\n          {currentDisplayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={currentDisplayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title text-info-primary mb-1 line-clamp-2\"\n              html={currentDisplayTitle || ''}\n            />\n          ) : null}\n          <Text\n            size={2}\n            className={cn(\n              'lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]'\n            )}\n            html={displayDescription || ''}\n          />\n        </div>\n        <div className=\"shelf-display-product-content-price-button\">\n          <div className=\"mb-2 flex items-center\">\n            {renderPrice ? (\n              renderPrice(data, {\n                price,\n                basePrice,\n                discount,\n                discountAmount,\n                variant,\n                coupon,\n                isSoldOut,\n                isShowOriginalPrice,\n              })\n            ) : isSoldOut ? (\n              <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                {renderOriginalPrice\n                  ? renderOriginalPrice(data, {\n                      price,\n                      basePrice,\n                      discount,\n                      discountAmount,\n                      isShowOriginalPrice,\n                    })\n                  : basePrice &&\n                    isShowOriginalPrice && (\n                      <div className=\"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through\">\n                        {variant?.availableForSale ? basePrice || '' : ''}\n                      </div>\n                    )}\n              </>\n            )}\n          </div>\n          {!renderPrice && renderPriceLabel?.(data, variant, { isShowOriginalPrice })}\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton && !isSoldOut ? (\n              <Button\n                disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                variant=\"secondary\"\n                href={data?.custom_secondary_link}\n                as={data?.custom_secondary_link ? 'a' : 'button'}\n                onClick={handleSecondaryClick}\n                loading={secondaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                variant=\"primary\"\n                href={data?.custom_primary_link}\n                as={data?.custom_primary_link ? 'a' : 'button'}\n                onClick={handlePrimaryClick}\n                loading={primaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const pricesTagStyle: CSSProperties = {\n    ...(pricesTagTextColor ? { color: pricesTagTextColor } : {}),\n    ...(pricesTagBgColor ? { backgroundColor: pricesTagBgColor, backgroundImage: 'none' } : {}),\n    ...(pricesTagTextColor || pricesTagBgColor ? { outline: 'none' } : {}),\n  }\n  const itemsTagStyle: CSSProperties = {\n    ...(itemsTagTextColor ? { color: itemsTagTextColor } : {}),\n    ...(itemsTagBgColor ? { backgroundColor: itemsTagBgColor, backgroundImage: 'none' } : {}),\n    ...(itemsTagTextColor || itemsTagBgColor ? { outlineColor: itemsTagTextColor } : {}),\n  }\n\n  const TagsComp = () => {\n    return (\n      <div className=\"lg-desktop:h-[28px] lg-desktop:flex-[28] box-border flex h-6 flex-[24] flex-wrap gap-1 overflow-hidden\">\n        {isShowPricesTag && currentPriceTag && (\n          <Badge className=\"shelf-prices-tag\" variant=\"fill\" style={pricesTagStyle}>\n            {currentPriceTag || ''}\n          </Badge>\n        )}\n        {isShowTag &&\n          showTags?.length > 0 &&\n          showTags?.map?.((item: any, index: number) => (\n            <Badge key={index} className=\"shelf-items-tag\" variant=\"outline\" style={itemsTagStyle}>\n              {item}\n            </Badge>\n          ))}\n      </div>\n    )\n  }\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'box-border w-full cursor-pointer overflow-hidden duration-300',\n        'rounded-box',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative',\n        'md-tablet:h-[422px] shelf-display-item',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <TagsComp />\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className={cn('flex h-full justify-center object-cover [&_img]:w-auto', {\n                'opacity-0': custom_bg_image,\n              })}\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4\">\n          {/* {currentPriceTag && isTopTag && (\n            <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\" variant=\"fill\">\n              {currentPriceTag || ''}\n            </Badge>\n          )} */}\n          <TagsComp />\n          <div\n            className={cn(\n              'shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden',\n              {\n                'opacity-0': custom_bg_image,\n              }\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n            <ShelfDisplaySocialEndorsements items={data?.socialEndorsements} />\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    itemShape,\n    itemLength,\n    metafields,\n    isShowShortTitle,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { discounts, discountsCopy } = metafields || {}\n  const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants[0]\n    }\n    return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          '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]',\n        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',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        '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]',\n      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',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        'rounded-box',\n        'shelf-display-item',\n        'duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-container-secondary-1 tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div\n          className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden', {\n            'opacity-0': custom_bg_image,\n          })}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n          {isShowTag && (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.length > 0 &&\n                showTags?.map?.((item: any, index: number) => (\n                  <Badge key={index} className=\"shelf-items-tag\" variant=\"fill\">\n                    {item}\n                  </Badge>\n                ))}\n            </div>\n          )}\n          {currentDisplayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={currentDisplayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]\"\n              html={currentDisplayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              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\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {renderPrice ? (\n              renderPrice(data, {\n                price,\n                basePrice,\n                discount,\n                discountAmount,\n                variant,\n                coupon,\n                isSoldOut,\n                isShowOriginalPrice,\n              })\n            ) : isSoldOut ? (\n              <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                {renderOriginalPrice\n                  ? renderOriginalPrice(data, {\n                      price,\n                      basePrice,\n                      discount,\n                      discountAmount,\n                      isShowOriginalPrice,\n                    })\n                  : basePrice && (\n                      <div className=\"origin-price tablet:text-xl text-info-quaternary ml-1 text-lg font-bold line-through\">\n                        {variant?.availableForSale ? basePrice || '' : ''}\n                      </div>\n                    )}\n              </>\n            )}\n          </div>\n          {!renderPrice && renderPriceLabel?.(data, variant, { isShowOriginalPrice })}\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton && !isSoldOut ? (\n              <Button\n                disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                variant=\"secondary\"\n                href={data?.custom_secondary_link}\n                as={data?.custom_secondary_link ? 'a' : 'button'}\n                onClick={handleSecondaryClick}\n                loading={secondaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                variant=\"primary\"\n                href={data?.custom_primary_link}\n                as={data?.custom_primary_link ? 'a' : 'button'}\n                onClick={handlePrimaryClick}\n                loading={primaryLoading}\n                className={configuration.direction === 'vertical' ? 'w-full' : ''}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplaySocialEndorsements", "items", "index", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "isShowShortTitle", "isShowPricesTag", "pricesTagTextColor", "pricesTagBgColor", "itemsTagTextColor", "itemsTagBgColor", "formatPrice", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "onPrimaryButton", "params", "coupon", "primaryFun", "onAddCart", "onBuyNow", "onLearnMore", "event", "onSecondaryButton", "secondaryFun", "variant", "variants", "variantArr", "variantId", "isSoldOut", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "currentDisplayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "handlePrimaryClick", "handleSecondaryClick", "bottomContent", "Button", "pricesTagStyle", "itemsTagStyle", "TagsComp", "Badge", "custom_bg_image", "custom_theme", "Picture", "itemLength", "shouldUseCouponPrice", "showSizeClass", "handleWrapClass"]
 }

package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js

@@ -1,2 +1,2 @@
-"use strict";var Le=Object.create;var w=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ee=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var Fe=(e,t)=>{for(var a in t)w(e,a,{get:t[a],enumerable:!0})},te=(e,t,a,C)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of Ie(t))!Ae.call(e,d)&&d!==a&&w(e,d,{get:()=>t[d],enumerable:!(C=$e(t,d))||C.enumerable});return e};var E=(e,t,a)=>(a=e!=null?Le(Ee(e)):{},te(t||!e||!e.__esModule?w(a,"default",{value:e,enumerable:!0}):a,e)),Me=e=>te(w({},"__esModule",{value:!0}),e);var je={};Fe(je,{ShelfDisplayHorizontalCardItem:()=>Oe});module.exports=Me(je);var o=require("react/jsx-runtime"),ie=require("../AiuiProvider/index.js"),le=require("../ShelfDisplay/shelfDisplay.js"),ne=require("../ShelfDisplay/shelfDisplayItem.js"),ae=E(require("../../components/picture.js")),A=E(require("../../components/badge.js")),x=require("../../helpers/utils.js"),F=require("../../components/text.js"),M=E(require("../../components/button.js")),ce=require("../../shared/track.js"),pe=require("../../shared/trackUrlRef.js"),me=require("../../components/heading.js"),de=require("../../hooks/useExposure.js"),c=require("react");const oe="image",se="product_shelf",re=999999999e-2,He=({items:e})=>e?.length?(0,o.jsx)("div",{className:"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center",children:e.map((t,a)=>typeof t.icon=="string"?(0,o.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},a):(0,o.jsx)(F.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},a))}):null,Oe=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:C,metafields:d,isTopTag:Ue=!1,isShowTag:fe,isShowOriginalPrice:ue,isShowShortTitle:ge=!1,isShowPricesTag:N=!1,pricesTagTextColor:P,pricesTagBgColor:B,itemsTagTextColor:b,itemsTagBgColor:z,formatPrice:H,renderOriginalPrice:O,renderPriceLabel:ye,renderPrice:D}=t||{},{locale:g="es",copyWriting:he,currencyDisplay:j}=(0,ie.useAiuiContext)(),{discounts:U,discountsCopy:W}=d||{},R=(0,c.useRef)(null),[q,ve]=(0,c.useState)([]),[V,ke]=(0,c.useState)(""),[G,J]=(0,c.useState)(!1),[K,Q]=(0,c.useState)(!1),xe=(s,r,i,n)=>{const{primaryFun:p,onAddCart:m,onBuyNow:v,onLearnMore:k,event:I}=t||{};if(p){if(p==="AddCart"&&m)return m(s,r+1,i,n);if(p==="BuyNow"&&v)return v(s,r+1,i,n);if(p==="LearnMore"&&k)return k(s,r+1,i,n)}I?.primaryButton?.(s,r+1,i,n)},be=(s,r,i,n)=>{const{secondaryFun:p,onAddCart:m,onBuyNow:v,onLearnMore:k,event:I}=t||{};if(p){if(p==="AddCart"&&m)return m(s,r+1,i,n);if(p==="BuyNow"&&v)return v(s,r+1,i,n);if(p==="LearnMore"&&k)return k(s,r+1,i,n)}I?.secondaryButton?.(s,r+1,i,n)},l=(0,c.useMemo)(()=>{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]),X=l?.id?.split?.("/")||[],_e=X?.[X?.length-1],y=!l?.availableForSale||l?.price?.amount===re||l?.price===re,f=l?.coupons?.[0],Y=e?.price?.currencyCode||"USD",Se=(0,c.useMemo)(()=>(0,le.formatVariantPrice)({locale:g,amount:f?f?.variant_price4wscode:l?.price,baseAmount:f?l?.price:0,currencyCode:Y,currencyDisplay:j,customFormatPrice:H}),[Y,g,j,f,l,H]),{price:L,basePrice:_,discount:u,discountAmount:h}=Se,{imageUrl:Te,altText:we}=(0,ne.getProductImage)(e),S=e?.custom_name||e?.title,$=ge&&l?.metafields?.infos?.page_short_title||S,Z=e?.custom_description||e?.description,Ce=()=>{if(f?.value_type==="fixed_amount"){const s=h||"",r=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,i,n,p]=r;let m=n;return n.endsWith(".00")?m=n.replace(/\.00$/,""):n.endsWith(",00")&&(m=n.replace(/,00$/,"")),`${i}${m}${p}`}return s}return u||""};(0,c.useEffect)(()=>{let s=[];if(u||h){const i=`${Ce()} ${U?.off||W?.off||""}`;ke(i)}const r=e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,u&&N?1:2)||[];ve(s.concat(r))},[e?.tags,u,h,U?.off,W?.off,N]),(0,de.useExposure)(R,{componentType:oe,componentName:se,componentTitle:S,componentDescription:Z,position:t?.index+1});const Ne=async()=>{if(!G&&!e?.custom_primary_link){J(!0);try{await xe(e,t?.index,t,f)}finally{J(!1)}}},Pe=async()=>{if(!K&&!e?.custom_secondary_link){Q(!0);try{await be(e,t?.index,t,f)}finally{Q(!1)}}},Be={...P?{color:P}:{},...B?{backgroundColor:B,backgroundImage:"none"}:{},...P||B?{outline:"none"}:{}},ze={...b?{color:b}:{},...z?{backgroundColor:z,backgroundImage:"none"}:{},...b||z?{outlineColor:b}:{}},De=()=>(0,o.jsxs)("div",{className:"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden",children:[N&&V&&(0,o.jsx)(A.default,{className:"shelf-prices-tag",variant:"fill",style:Be,children:V||""}),fe&&q?.length>0&&q?.map?.((s,r)=>(0,o.jsx)(A.default,{className:"shelf-items-tag",variant:"outline",style:ze,children:s},r))]}),T=e?.custom_bg_image,ee=e?.custom_theme;return(0,o.jsx)("div",{ref:R,className:(0,x.cn)("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","shelf-display-horizontal-item","lg-desktop:aspect-[824/269] desktop:aspect-[648/238] laptop:aspect-[440/256] relative",T?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":ee==="dark","aiui-light":ee==="light"}),style:T?{backgroundImage:`url(${T})`}:void 0,children:(0,o.jsxs)("div",{className:"desktop:p-6 desktop:pt-4 absolute inset-0 box-border flex overflow-hidden p-4",children:[(0,o.jsxs)("div",{className:"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex h-full flex-none flex-col items-center justify-center gap-2",children:[(0,o.jsx)(De,{}),(0,o.jsx)("div",{className:(0,x.cn)("shelf-display-horizontal-item-image desktop:h-[92.3%] lg-desktop:h-[89.5%] relative inline-block aspect-[1] h-[63.6%] min-h-0 overflow-hidden",{"opacity-0":T}),children:(0,o.jsx)("a",{"aria-label":S,target:t?.target,href:(0,pe.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${_e}`,`${oe}_${se}`),onClick:()=>{(0,ce.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:(0,o.jsx)(ae.default,{source:Te,alt:we,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,o.jsx)(He,{items:e?.socialEndorsements||d?.socialEndorsements})]}),(0,o.jsxs)("div",{className:"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4",children:[(0,o.jsxs)("div",{className:"shelf-display-horizontal-content-title-desc",children:[$?(0,o.jsx)(me.Heading,{as:"h3",title:$||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:$||""}):null,(0,o.jsx)(F.Text,{size:2,className:(0,x.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:Z||""})]}),(0,o.jsxs)("div",{className:"shelf-display-horizontal-content-price-button",children:[(0,o.jsx)("div",{className:"mb-2 flex items-center",children:D?D(e,{price:L,basePrice:_,discount:u,discountAmount:h,variant:l,coupon:f,isSoldOut:y}):y?(0,o.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:he?.soldOutText}):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]",children:l?.availableForSale&&L||""}),O?O(e,{price:L,basePrice:_,discount:u,discountAmount:h}):_&&ue&&(0,o.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through",children:l?.availableForSale&&_||""})]})}),!D&&ye?.(e,l),(0,o.jsxs)("div",{className:(0,x.cn)("shelf-flex-button-group","lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?(0,o.jsx)(M.default,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:Pe,loading:K,className:"laptop:w-full desktop:w-auto",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,o.jsx)(M.default,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:Ne,loading:G,className:"laptop:w-full desktop:w-auto",children:t?.primaryButton||""}):null]})]})]})]})},e?.id||e?.handle)};
+"use strict";var Le=Object.create;var C=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ee=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var Fe=(e,t)=>{for(var a in t)C(e,a,{get:t[a],enumerable:!0})},oe=(e,t,a,N)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of Ie(t))!Ae.call(e,d)&&d!==a&&C(e,d,{get:()=>t[d],enumerable:!(N=$e(t,d))||N.enumerable});return e};var A=(e,t,a)=>(a=e!=null?Le(Ee(e)):{},oe(t||!e||!e.__esModule?C(a,"default",{value:e,enumerable:!0}):a,e)),Me=e=>oe(C({},"__esModule",{value:!0}),e);var je={};Fe(je,{ShelfDisplayHorizontalCardItem:()=>Oe});module.exports=Me(je);var o=require("react/jsx-runtime"),le=require("../AiuiProvider/index.js"),ne=require("../ShelfDisplay/shelfDisplay.js"),ae=require("../ShelfDisplay/shelfDisplayItem.js"),ce=A(require("../../components/picture.js")),F=A(require("../../components/badge.js")),x=require("../../helpers/utils.js"),M=require("../../components/text.js"),H=A(require("../../components/button.js")),pe=require("../../shared/track.js"),me=require("../../shared/trackUrlRef.js"),de=require("../../components/heading.js"),fe=require("../../hooks/useExposure.js"),c=require("react");const se="image",re="product_shelf",ie=999999999e-2,He=({items:e})=>e?.length?(0,o.jsx)("div",{className:"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center",children:e.map((t,a)=>typeof t.icon=="string"?(0,o.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},a):(0,o.jsx)(M.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},a))}):null,Oe=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:N,metafields:d,isTopTag:Ue=!1,isShowTag:ue,isShowOriginalPrice:b,isShowShortTitle:ge=!1,isShowPricesTag:P=!1,pricesTagTextColor:B,pricesTagBgColor:z,itemsTagTextColor:_,itemsTagBgColor:D,formatPrice:O,renderOriginalPrice:j,renderPriceLabel:ye,renderPrice:L}=t||{},{locale:g="es",copyWriting:he,currencyDisplay:U}=(0,le.useAiuiContext)(),{discounts:W,discountsCopy:R}=d||{},q=(0,c.useRef)(null),[V,ve]=(0,c.useState)([]),[G,ke]=(0,c.useState)(""),[J,K]=(0,c.useState)(!1),[Q,X]=(0,c.useState)(!1),xe=(s,r,i,n)=>{const{primaryFun:p,onAddCart:m,onBuyNow:v,onLearnMore:k,event:E}=t||{};if(p){if(p==="AddCart"&&m)return m(s,r+1,i,n);if(p==="BuyNow"&&v)return v(s,r+1,i,n);if(p==="LearnMore"&&k)return k(s,r+1,i,n)}E?.primaryButton?.(s,r+1,i,n)},be=(s,r,i,n)=>{const{secondaryFun:p,onAddCart:m,onBuyNow:v,onLearnMore:k,event:E}=t||{};if(p){if(p==="AddCart"&&m)return m(s,r+1,i,n);if(p==="BuyNow"&&v)return v(s,r+1,i,n);if(p==="LearnMore"&&k)return k(s,r+1,i,n)}E?.secondaryButton?.(s,r+1,i,n)},l=(0,c.useMemo)(()=>{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]),Y=l?.id?.split?.("/")||[],_e=Y?.[Y?.length-1],y=!l?.availableForSale||l?.price?.amount===ie||l?.price===ie,f=l?.coupons?.[0],Z=e?.price?.currencyCode||"USD",Se=(0,c.useMemo)(()=>(0,ne.formatVariantPrice)({locale:g,amount:f?f?.variant_price4wscode:l?.price,baseAmount:f?l?.price:0,currencyCode:Z,currencyDisplay:U,customFormatPrice:O}),[Z,g,U,f,l,O]),{price:$,basePrice:S,discount:u,discountAmount:h}=Se,{imageUrl:Te,altText:we}=(0,ae.getProductImage)(e),T=e?.custom_name||e?.title,I=ge&&l?.metafields?.infos?.page_short_title||T,ee=e?.custom_description||e?.description,Ce=()=>{if(f?.value_type==="fixed_amount"){const s=h||"",r=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,i,n,p]=r;let m=n;return n.endsWith(".00")?m=n.replace(/\.00$/,""):n.endsWith(",00")&&(m=n.replace(/,00$/,"")),`${i}${m}${p}`}return s}return u||""};(0,c.useEffect)(()=>{let s=[];if(u||h){const i=`${Ce()} ${W?.off||R?.off||""}`;ke(i)}const r=e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,u&&P?1:2)||[];ve(s.concat(r))},[e?.tags,u,h,W?.off,R?.off,P]),(0,fe.useExposure)(q,{componentType:se,componentName:re,componentTitle:T,componentDescription:ee,position:t?.index+1});const Ne=async()=>{if(!J&&!e?.custom_primary_link){K(!0);try{await xe(e,t?.index,t,f)}finally{K(!1)}}},Pe=async()=>{if(!Q&&!e?.custom_secondary_link){X(!0);try{await be(e,t?.index,t,f)}finally{X(!1)}}},Be={...B?{color:B}:{},...z?{backgroundColor:z,backgroundImage:"none"}:{},...B||z?{outline:"none"}:{}},ze={..._?{color:_}:{},...D?{backgroundColor:D,backgroundImage:"none"}:{},..._||D?{outlineColor:_}:{}},De=()=>(0,o.jsxs)("div",{className:"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden",children:[P&&G&&(0,o.jsx)(F.default,{className:"shelf-prices-tag",variant:"fill",style:Be,children:G||""}),ue&&V?.length>0&&V?.map?.((s,r)=>(0,o.jsx)(F.default,{className:"shelf-items-tag",variant:"outline",style:ze,children:s},r))]}),w=e?.custom_bg_image,te=e?.custom_theme;return(0,o.jsx)("div",{ref:q,className:(0,x.cn)("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","shelf-display-horizontal-item","lg-desktop:aspect-[824/269] desktop:aspect-[648/238] laptop:aspect-[440/256] relative",w?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":te==="dark","aiui-light":te==="light"}),style:w?{backgroundImage:`url(${w})`}:void 0,children:(0,o.jsxs)("div",{className:"desktop:p-6 desktop:pt-4 absolute inset-0 box-border flex overflow-hidden p-4",children:[(0,o.jsxs)("div",{className:"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex h-full flex-none flex-col items-center justify-center gap-2",children:[(0,o.jsx)(De,{}),(0,o.jsx)("div",{className:(0,x.cn)("shelf-display-horizontal-item-image desktop:h-[92.3%] lg-desktop:h-[89.5%] relative inline-block aspect-[1] h-[63.6%] min-h-0 overflow-hidden",{"opacity-0":w}),children:(0,o.jsx)("a",{"aria-label":T,target:t?.target,href:(0,me.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${_e}`,`${se}_${re}`),onClick:()=>{(0,pe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:(0,o.jsx)(ce.default,{source:Te,alt:we,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,o.jsx)(He,{items:e?.socialEndorsements||d?.socialEndorsements})]}),(0,o.jsxs)("div",{className:"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4",children:[(0,o.jsxs)("div",{className:"shelf-display-horizontal-content-title-desc",children:[I?(0,o.jsx)(de.Heading,{as:"h3",title:I||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:I||""}):null,(0,o.jsx)(M.Text,{size:2,className:(0,x.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:ee||""})]}),(0,o.jsxs)("div",{className:"shelf-display-horizontal-content-price-button",children:[(0,o.jsx)("div",{className:"mb-2 flex items-center",children:L?L(e,{price:$,basePrice:S,discount:u,discountAmount:h,variant:l,coupon:f,isSoldOut:y,isShowOriginalPrice:b}):y?(0,o.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:he?.soldOutText}):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]",children:l?.availableForSale&&$||""}),j?j(e,{price:$,basePrice:S,discount:u,discountAmount:h,isShowOriginalPrice:b}):S&&b&&(0,o.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through",children:l?.availableForSale&&S||""})]})}),!L&&ye?.(e,l,{isShowOriginalPrice:b}),(0,o.jsxs)("div",{className:(0,x.cn)("shelf-flex-button-group","lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?(0,o.jsx)(H.default,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:Pe,loading:Q,className:"laptop:w-full desktop:w-auto",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,o.jsx)(H.default,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:Ne,loading:J,className:"laptop:w-full desktop:w-auto",children:t?.primaryButton||""}):null]})]})]})]})},e?.id||e?.handle)};
 //# sourceMappingURL=shelfDisplayHorizontalItem.js.map

package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { getProductImage } from '../ShelfDisplay/shelfDisplayItem.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType, SocialEndorsementItem } from '../ShelfDisplay/shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState, type CSSProperties } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst ShelfDisplayHorizontalEndorsements = ({ items }: { items?: SocialEndorsementItem[] }) => {\n  if (!items?.length) {\n    return null\n  }\n  return (\n    <div className=\"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center\">\n      {items.map((item, index) =>\n        typeof item.icon === 'string' ? (\n          <img\n            key={index}\n            src={item.icon}\n            alt={item.label || ''}\n            loading=\"lazy\"\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 object-contain\"\n          />\n        ) : (\n          <Text\n            key={index}\n            aria-label={item.label}\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full\"\n          >\n            {item.icon}\n          </Text>\n        )\n      )}\n    </div>\n  )\n}\n\n/**\n * \u6A2A\u7248\u4EA7\u54C1\u8D27\u67B6\u5361\u7247\uFF08\u22651025px \u4F7F\u7528\uFF09\n * \u903B\u8F91\u4E0E ShelfDisplayWrapItem \u4FDD\u6301\u4E00\u81F4\uFF0C\u4EC5\u5E03\u5C40\u4E3A\u6A2A\u5411\uFF08\u56FE\u5DE6\u3001\u5185\u5BB9\u53F3\uFF09\n */\nexport const ShelfDisplayHorizontalCardItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n    isShowShortTitle = false,\n    isShowPricesTag = false,\n    pricesTagTextColor,\n    pricesTagBgColor,\n    itemsTagTextColor,\n    itemsTagBgColor,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: coupon ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: coupon ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, currencyDisplay, coupon, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount && isShowPricesTag ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off, isShowPricesTag])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const pricesTagStyle: CSSProperties = {\n    ...(pricesTagTextColor ? { color: pricesTagTextColor } : {}),\n    ...(pricesTagBgColor ? { backgroundColor: pricesTagBgColor, backgroundImage: 'none' } : {}),\n    ...(pricesTagTextColor || pricesTagBgColor ? { outline: 'none' } : {}),\n  }\n  const itemsTagStyle: CSSProperties = {\n    ...(itemsTagTextColor ? { color: itemsTagTextColor } : {}),\n    ...(itemsTagBgColor ? { backgroundColor: itemsTagBgColor, backgroundImage: 'none' } : {}),\n    ...(itemsTagTextColor || itemsTagBgColor ? { outlineColor: itemsTagTextColor } : {}),\n  }\n\n  const TagsComp = () => {\n    return (\n      <div className=\"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden\">\n        {isShowPricesTag && currentPriceTag && (\n          <Badge className=\"shelf-prices-tag\" variant=\"fill\" style={pricesTagStyle}>\n            {currentPriceTag || ''}\n          </Badge>\n        )}\n        {isShowTag &&\n          showTags?.length > 0 &&\n          showTags?.map?.((item: any, index: number) => (\n            <Badge key={index} className=\"shelf-items-tag\" variant=\"outline\" style={itemsTagStyle}>\n              {item}\n            </Badge>\n          ))}\n      </div>\n    )\n  }\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'box-border w-full cursor-pointer overflow-hidden duration-300',\n        'rounded-box',\n        'shelf-display-horizontal-item',\n        'lg-desktop:aspect-[824/269] desktop:aspect-[648/238] laptop:aspect-[440/256] relative',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      <div className=\"desktop:p-6 desktop:pt-4 absolute inset-0 box-border flex overflow-hidden p-4\">\n        <div className=\"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex h-full flex-none flex-col items-center justify-center gap-2\">\n          <TagsComp />\n          <div\n            className={cn(\n              'shelf-display-horizontal-item-image desktop:h-[92.3%] lg-desktop:h-[89.5%] relative inline-block aspect-[1] h-[63.6%] min-h-0 overflow-hidden',\n              {\n                'opacity-0': custom_bg_image,\n              }\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n          </div>\n          <ShelfDisplayHorizontalEndorsements items={data?.socialEndorsements || metafields?.socialEndorsements} />\n        </div>\n        <div className=\"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4\">\n          <div className=\"shelf-display-horizontal-content-title-desc\">\n            {currentDisplayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={currentDisplayTitle || ''}\n                size={2}\n                className=\"shelf-display-product-title text-info-primary mb-1 line-clamp-2\"\n                html={currentDisplayTitle || ''}\n              />\n            ) : null}\n            <Text\n              size={2}\n              className={cn(\n                'lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]'\n              )}\n              html={displayDescription || ''}\n            />\n          </div>\n          <div className=\"shelf-display-horizontal-content-price-button\">\n            <div className=\"mb-2 flex items-center\">\n              {renderPrice ? (\n                renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n              ) : isSoldOut ? (\n                <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">\n                  {copyWriting?.soldOutText}\n                </div>\n              ) : (\n                <>\n                  <div className=\"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]\">\n                    {variant?.availableForSale ? price || '' : ''}\n                  </div>\n                  {renderOriginalPrice\n                    ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n                    : basePrice &&\n                      isShowOriginalPrice && (\n                        <div className=\"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through\">\n                          {variant?.availableForSale ? basePrice || '' : ''}\n                        </div>\n                      )}\n                </>\n              )}\n            </div>\n            {!renderPrice && renderPriceLabel?.(data, variant)}\n            <div\n              className={cn(\n                'shelf-flex-button-group',\n                'lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2',\n                configuration.direction === 'vertical' ? 'flex-col' : ''\n              )}\n            >\n              {configuration?.secondaryButton && !isSoldOut ? (\n                <Button\n                  disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                  variant=\"secondary\"\n                  href={data?.custom_secondary_link}\n                  as={data?.custom_secondary_link ? 'a' : 'button'}\n                  onClick={handleSecondaryClick}\n                  loading={secondaryLoading}\n                  className=\"laptop:w-full desktop:w-auto\"\n                >\n                  {configuration?.secondaryButton || ''}\n                </Button>\n              ) : null}\n              {configuration?.primaryButton ? (\n                <Button\n                  disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                  variant=\"primary\"\n                  href={data?.custom_primary_link}\n                  as={data?.custom_primary_link ? 'a' : 'button'}\n                  onClick={handlePrimaryClick}\n                  loading={primaryLoading}\n                  className=\"laptop:w-full desktop:w-auto\"\n                >\n                  {configuration?.primaryButton || ''}\n                </Button>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { getProductImage } from '../ShelfDisplay/shelfDisplayItem.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType, SocialEndorsementItem } from '../ShelfDisplay/shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState, type CSSProperties } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst ShelfDisplayHorizontalEndorsements = ({ items }: { items?: SocialEndorsementItem[] }) => {\n  if (!items?.length) {\n    return null\n  }\n  return (\n    <div className=\"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center\">\n      {items.map((item, index) =>\n        typeof item.icon === 'string' ? (\n          <img\n            key={index}\n            src={item.icon}\n            alt={item.label || ''}\n            loading=\"lazy\"\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 object-contain\"\n          />\n        ) : (\n          <Text\n            key={index}\n            aria-label={item.label}\n            className=\"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full\"\n          >\n            {item.icon}\n          </Text>\n        )\n      )}\n    </div>\n  )\n}\n\n/**\n * \u6A2A\u7248\u4EA7\u54C1\u8D27\u67B6\u5361\u7247\uFF08\u22651025px \u4F7F\u7528\uFF09\n * \u903B\u8F91\u4E0E ShelfDisplayWrapItem \u4FDD\u6301\u4E00\u81F4\uFF0C\u4EC5\u5E03\u5C40\u4E3A\u6A2A\u5411\uFF08\u56FE\u5DE6\u3001\u5185\u5BB9\u53F3\uFF09\n */\nexport const ShelfDisplayHorizontalCardItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n    isShowShortTitle = false,\n    isShowPricesTag = false,\n    pricesTagTextColor,\n    pricesTagBgColor,\n    itemsTagTextColor,\n    itemsTagBgColor,\n    formatPrice,\n    renderOriginalPrice,\n    renderPriceLabel,\n    renderPrice,\n  } = configuration || {}\n  const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n  const [primaryLoading, setPrimaryLoading] = useState(false)\n  const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n    if (primaryFun) {\n      if (primaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (primaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.primaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n    const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n    // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n    if (secondaryFun) {\n      if (secondaryFun === 'AddCart' && onAddCart) {\n        return onAddCart(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'BuyNow' && onBuyNow) {\n        return onBuyNow(params, index + 1, data, coupon)\n      }\n      if (secondaryFun === 'LearnMore' && onLearnMore) {\n        return onLearnMore(params, index + 1, data, coupon)\n      }\n    }\n\n    // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n    event?.secondaryButton?.(params, index + 1, data, coupon)\n  }\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: coupon ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: coupon ? variant?.price : 0,\n        currencyCode,\n        currencyDisplay,\n        customFormatPrice: formatPrice,\n      }),\n    [currencyCode, locale, currencyDisplay, coupon, variant, formatPrice]\n  )\n\n  const { price, basePrice, discount, discountAmount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const currentDisplayTitle = isShowShortTitle\n    ? variant?.metafields?.infos?.page_short_title || displayTitle\n    : displayTitle\n  const displayDescription = data?.custom_description || data?.description\n\n  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n    }\n    const newTags =\n      data?.tags\n        ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n        ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n        ?.slice?.(0, discount && isShowPricesTag ? 1 : 2) || []\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off, isShowPricesTag])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const handlePrimaryClick = async () => {\n    if (primaryLoading) return\n    if (data?.custom_primary_link) return\n    setPrimaryLoading(true)\n    try {\n      await onPrimaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setPrimaryLoading(false)\n    }\n  }\n\n  const handleSecondaryClick = async () => {\n    if (secondaryLoading) return\n    if (data?.custom_secondary_link) return\n    setSecondaryLoading(true)\n    try {\n      await onSecondaryButton(data, configuration?.index, configuration, coupon)\n    } finally {\n      setSecondaryLoading(false)\n    }\n  }\n\n  const pricesTagStyle: CSSProperties = {\n    ...(pricesTagTextColor ? { color: pricesTagTextColor } : {}),\n    ...(pricesTagBgColor ? { backgroundColor: pricesTagBgColor, backgroundImage: 'none' } : {}),\n    ...(pricesTagTextColor || pricesTagBgColor ? { outline: 'none' } : {}),\n  }\n  const itemsTagStyle: CSSProperties = {\n    ...(itemsTagTextColor ? { color: itemsTagTextColor } : {}),\n    ...(itemsTagBgColor ? { backgroundColor: itemsTagBgColor, backgroundImage: 'none' } : {}),\n    ...(itemsTagTextColor || itemsTagBgColor ? { outlineColor: itemsTagTextColor } : {}),\n  }\n\n  const TagsComp = () => {\n    return (\n      <div className=\"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden\">\n        {isShowPricesTag && currentPriceTag && (\n          <Badge className=\"shelf-prices-tag\" variant=\"fill\" style={pricesTagStyle}>\n            {currentPriceTag || ''}\n          </Badge>\n        )}\n        {isShowTag &&\n          showTags?.length > 0 &&\n          showTags?.map?.((item: any, index: number) => (\n            <Badge key={index} className=\"shelf-items-tag\" variant=\"outline\" style={itemsTagStyle}>\n              {item}\n            </Badge>\n          ))}\n      </div>\n    )\n  }\n\n  const custom_bg_image = data?.custom_bg_image\n  const custom_theme = data?.custom_theme\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'box-border w-full cursor-pointer overflow-hidden duration-300',\n        'rounded-box',\n        'shelf-display-horizontal-item',\n        'lg-desktop:aspect-[824/269] desktop:aspect-[648/238] laptop:aspect-[440/256] relative',\n        custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n        { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n      )}\n      style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n    >\n      <div className=\"desktop:p-6 desktop:pt-4 absolute inset-0 box-border flex overflow-hidden p-4\">\n        <div className=\"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex h-full flex-none flex-col items-center justify-center gap-2\">\n          <TagsComp />\n          <div\n            className={cn(\n              'shelf-display-horizontal-item-image desktop:h-[92.3%] lg-desktop:h-[89.5%] relative inline-block aspect-[1] h-[63.6%] min-h-0 overflow-hidden',\n              {\n                'opacity-0': custom_bg_image,\n              }\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n          </div>\n          <ShelfDisplayHorizontalEndorsements items={data?.socialEndorsements || metafields?.socialEndorsements} />\n        </div>\n        <div className=\"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4\">\n          <div className=\"shelf-display-horizontal-content-title-desc\">\n            {currentDisplayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={currentDisplayTitle || ''}\n                size={2}\n                className=\"shelf-display-product-title text-info-primary mb-1 line-clamp-2\"\n                html={currentDisplayTitle || ''}\n              />\n            ) : null}\n            <Text\n              size={2}\n              className={cn(\n                'lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]'\n              )}\n              html={displayDescription || ''}\n            />\n          </div>\n          <div className=\"shelf-display-horizontal-content-price-button\">\n            <div className=\"mb-2 flex items-center\">\n              {renderPrice ? (\n                renderPrice(data, {\n                  price,\n                  basePrice,\n                  discount,\n                  discountAmount,\n                  variant,\n                  coupon,\n                  isSoldOut,\n                  isShowOriginalPrice,\n                })\n              ) : isSoldOut ? (\n                <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">\n                  {copyWriting?.soldOutText}\n                </div>\n              ) : (\n                <>\n                  <div className=\"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]\">\n                    {variant?.availableForSale ? price || '' : ''}\n                  </div>\n                  {renderOriginalPrice\n                    ? renderOriginalPrice(data, {\n                        price,\n                        basePrice,\n                        discount,\n                        discountAmount,\n                        isShowOriginalPrice,\n                      })\n                    : basePrice &&\n                      isShowOriginalPrice && (\n                        <div className=\"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through\">\n                          {variant?.availableForSale ? basePrice || '' : ''}\n                        </div>\n                      )}\n                </>\n              )}\n            </div>\n            {!renderPrice && renderPriceLabel?.(data, variant, { isShowOriginalPrice })}\n            <div\n              className={cn(\n                'shelf-flex-button-group',\n                'lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2',\n                configuration.direction === 'vertical' ? 'flex-col' : ''\n              )}\n            >\n              {configuration?.secondaryButton && !isSoldOut ? (\n                <Button\n                  disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n                  variant=\"secondary\"\n                  href={data?.custom_secondary_link}\n                  as={data?.custom_secondary_link ? 'a' : 'button'}\n                  onClick={handleSecondaryClick}\n                  loading={secondaryLoading}\n                  className=\"laptop:w-full desktop:w-auto\"\n                >\n                  {configuration?.secondaryButton || ''}\n                </Button>\n              ) : null}\n              {configuration?.primaryButton ? (\n                <Button\n                  disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n                  variant=\"primary\"\n                  href={data?.custom_primary_link}\n                  as={data?.custom_primary_link ? 'a' : 'button'}\n                  onClick={handlePrimaryClick}\n                  loading={primaryLoading}\n                  className=\"laptop:w-full desktop:w-auto\"\n                >\n                  {configuration?.primaryButton || ''}\n                </Button>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["shelfDisplayHorizontalItem_exports", "__export", "ShelfDisplayHorizontalCardItem", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_shelfDisplayItem", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayHorizontalEndorsements", "items", "item", "index", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "isShowShortTitle", "isShowPricesTag", "pricesTagTextColor", "pricesTagBgColor", "itemsTagTextColor", "itemsTagBgColor", "formatPrice", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "onPrimaryButton", "params", "coupon", "primaryFun", "onAddCart", "onBuyNow", "onLearnMore", "event", "onSecondaryButton", "secondaryFun", "variant", "variants", "variantArr", "variantId", "isSoldOut", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "imageUrl", "altText", "displayTitle", "currentDisplayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "handlePrimaryClick", "handleSecondaryClick", "pricesTagStyle", "itemsTagStyle", "TagsComp", "Badge", "custom_bg_image", "custom_theme", "Picture", "Button"]
 }