@anker-in/headless-ui 1.1.26 → 1.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
  2. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +2 -2
  3. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  4. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
  5. package/dist/cjs/biz-components/Title/index.js +1 -1
  6. package/dist/cjs/biz-components/Title/index.js.map +2 -2
  7. package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
  8. package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +2 -2
  9. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  10. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
  11. package/dist/esm/biz-components/Title/index.js +1 -1
  12. package/dist/esm/biz-components/Title/index.js.map +2 -2
  13. package/package.json +1 -1
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var T=Object.create;var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var $=(e,n)=>{for(var t in n)u(e,t,{get:n[t],enumerable:!0})},b=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of C(n))!E.call(e,r)&&r!==t&&u(e,r,{get:()=>n[r],enumerable:!(i=v(n,r))||i.enumerable});return e};var k=(e,n,t)=>(t=e!=null?T(P(e)):{},b(n||!e||!e.__esModule?u(t,"default",{value:e,enumerable:!0}):t,e)),w=e=>b(u({},"__esModule",{value:!0}),e);var F={};$(F,{PRICE_SYMBOL:()=>c,formatPrice:()=>l,formatVariantPrice:()=>x,languageTerritory:()=>g});module.exports=w(F);var D=k(require("decimal.js"));const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},g=e=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es"})[e]||"";function l({amount:e,currencyCode:n,currencyDisplay:t,locale:i,maximumFractionDigits:r,minimumFractionDigits:m,removeTrailingZeros:p=!1}){const o=i==="nl"?"EUR":n||"USD",s=g(i);if(!s)return null;let a=new Intl.NumberFormat(s,{style:"currency",currency:o,currencyDisplay:t||"symbol",minimumFractionDigits:r===0?0:m,maximumFractionDigits:r})?.format?.(e);return["eu-de","eu-en","de","eu"].includes(i)&&(a=a?.toString()?.replace?.(/[\s]/g,"")),p&&(a=a?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(\,\d*?[1-9])0+\b/,"$1")?.replace?.(/\,0+\b/,"")),a}function x({amount:e,baseAmount:n,currencyCode:t,currencyDisplay:i,locale:r,maximumFractionDigits:m,minimumFractionDigits:p,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${c[r]}${e}`,basePrice:`${c[r]}${n}`,discount:`${c[r]}${n-e||0}`};const s=n>e;let d=null;const a=g(r);if(a){const y=new Intl.NumberFormat(a,{style:"percent"});d=s?y.format((n-e)/n):null}let f;if(s){const y=new D.default(n).sub(e||0).toNumber();f=l({amount:y,currencyDisplay:i,currencyCode:t||"USD",locale:r,maximumFractionDigits:2})}const h=l({amount:e,currencyCode:t,currencyDisplay:i,locale:r,removeTrailingZeros:o}),S=s?l({amount:n,currencyCode:t,currencyDisplay:i,locale:r,maximumFractionDigits:m,minimumFractionDigits:p,removeTrailingZeros:o}):void 0;return{price:h,basePrice:S,discount:d,discountAmount:f}}
1
+ "use strict";var v=Object.create;var u=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var w=(e,n)=>{for(var t in n)u(e,t,{get:n[t],enumerable:!0})},b=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of P(n))!E.call(e,r)&&r!==t&&u(e,r,{get:()=>n[r],enumerable:!(i=T(n,r))||i.enumerable});return e};var $=(e,n,t)=>(t=e!=null?v(C(e)):{},b(n||!e||!e.__esModule?u(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>b(u({},"__esModule",{value:!0}),e);var F={};w(F,{PRICE_SYMBOL:()=>c,formatPrice:()=>l,formatVariantPrice:()=>x,languageTerritory:()=>g});module.exports=k(F);var D=$(require("decimal.js"));const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},g=e=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es",pl:"pl-PL",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"})[e]||"";function l({amount:e,currencyCode:n,currencyDisplay:t,locale:i,maximumFractionDigits:r,minimumFractionDigits:p,removeTrailingZeros:m=!1}){const o=i==="nl"?"EUR":n||"USD",s=g(i);if(!s)return null;let a=new Intl.NumberFormat(s,{style:"currency",currency:o,currencyDisplay:t||"symbol",minimumFractionDigits:r===0?0:p,maximumFractionDigits:r})?.format?.(e);return["eu-de","eu-en","de","eu"].includes(i)&&(a=a?.toString()?.replace?.(/[\s]/g,"")),m&&(a=a?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(\,\d*?[1-9])0+\b/,"$1")?.replace?.(/\,0+\b/,"")),a}function x({amount:e,baseAmount:n,currencyCode:t,currencyDisplay:i,locale:r,maximumFractionDigits:p,minimumFractionDigits:m,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${c[r]}${e}`,basePrice:`${c[r]}${n}`,discount:`${c[r]}${n-e||0}`};const s=n>e;let d=null;const a=g(r);if(a){const y=new Intl.NumberFormat(a,{style:"percent"});d=s?y.format((n-e)/n):null}let f;if(s){const y=new D.default(n).sub(e||0).toNumber();f=l({amount:y,currencyDisplay:i,currencyCode:t||"USD",locale:r,maximumFractionDigits:2})}const h=l({amount:e,currencyCode:t,currencyDisplay:i,locale:r,removeTrailingZeros:o}),S=s?l({amount:n,currencyCode:t,currencyDisplay:i,locale:r,maximumFractionDigits:p,minimumFractionDigits:m,removeTrailingZeros:o}):void 0;return{price:h,basePrice:S,discount:d,discountAmount:f}}
2
2
  //# sourceMappingURL=shelfDisplay.js.map
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
4
- "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\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}) {\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 = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\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 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}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n pl: 'pl-PL',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\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}) {\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 = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\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 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}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["shelfDisplay_exports", "__export", "PRICE_SYMBOL", "formatPrice", "formatVariantPrice", "languageTerritory", "__toCommonJS", "import_decimal", "locale", "amount", "currencyCode", "currencyDisplay", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED
@@ -1,10 +1,10 @@
1
- "use strict";var pe=Object.create;var E=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},re=(e,t,a,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of de(t))!xe.call(e,u)&&u!==a&&E(e,u,{get:()=>t[u],enumerable:!(x=me(t,u))||x.enumerable});return e};var Z=(e,t,a)=>(a=e!=null?pe(ue(e)):{},re(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),he=e=>re(E({},"__esModule",{value:!0}),e);var ye={};fe(ye,{ShelfDisplayHorizontalItem:()=>ge,ShelfDisplayWrapItem:()=>ve,getProductImage:()=>ne});module.exports=he(ye);var s=require("react/jsx-runtime"),ee=require("../AiuiProvider/index.js"),te=require("./shelfDisplay.js"),V=Z(require("../../components/picture.js")),q=Z(require("../../components/badge.js")),v=require("../../helpers/utils.js"),se=require("../../components/text.js"),W=Z(require("../../components/button.js")),le=require("../../shared/track.js"),oe=require("../../shared/trackUrlRef.js"),ie=require("../../components/heading.js"),ae=require("../../hooks/useExposure.js"),p=require("react");const F="image",M="product_shelf",R=999999999e-2,ne=e=>{const t=e?.sku,a=e?.variants,x=a?.find(_=>_?.sku===t),u=x?.image?.url||a?.[0]?.image?.url||"",k=x?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:u,altText:k}},ve=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:x,metafields:u,isTopTag:k=!1,isShowTag:_,isShowOriginalPrice:y}=t||{},{locale:b="es",copyWriting:G,currencyDisplay:O}=(0,ee.useAiuiContext)(),{discounts:U,discountsCopy:B}=u||{},z=(0,p.useRef)(null),[A,n]=(0,p.useState)([]),[D,J]=(0,p.useState)(""),K=(l,o,m,d)=>t?.event?.primaryButton?.(l,o+1,m,d),Q=(l,o,m,d)=>t?.event?.secondaryButton?.(l,o+1,m,d),r=(0,p.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),f=r?.id?.split?.("/")||[],C=f?.[f?.length-1],H=!r?.availableForSale||r?.price?.amount===R||r?.price===R,g=r?.coupons?.[0],I=!!(y&&g),L=e?.price?.currencyCode||"USD",S=(0,p.useMemo)(()=>(0,te.formatVariantPrice)({locale:b,amount:I?g?.variant_price4wscode:r?.price,baseAmount:I?r?.price:0,currencyCode:L,currencyDisplay:O}),[L,b,I,g?.variant_price4wscode,r]),{price:P,basePrice:X,discount:N,discountAmount:h}=S,{imageUrl:T,altText:$}=ne(e),w=e?.custom_name||e?.title,j=e?.custom_description||e?.description,i=()=>{if(g?.value_type==="fixed_amount"){const l=h||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,m,d,ce]=o;let Y=d;return d.endsWith(".00")?Y=d.replace(/\.00$/,""):d.endsWith(",00")&&(Y=d.replace(/,00$/,"")),`${m}${Y}${ce}`}return l}return N||""};(0,p.useEffect)(()=>{let l=[];if(N||h){const m=`${i()} ${U?.off||B?.off||""}`;J(m),l.push(m)}const o=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,N?1:2);n(l.concat(o))},[e?.tags,N,h,U?.off,B?.off]),(0,ae.useExposure)(z,{componentType:F,componentName:M,componentTitle:w,componentDescription:j,position:t?.index+1});const c=()=>(0,s.jsxs)(s.Fragment,{children:[_&&A?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:A?.map?.((l,o)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:l},o))}):null,w?(0,s.jsx)(ie.Heading,{as:"h3",title:w||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]",html:w||""}):null,j?(0,s.jsx)(se.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:j||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:H?(0,s.jsx)("div",{className:"tablet: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-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&P||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&X||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(W.default,{variant:"secondary",onClick:()=>Q(e,t?.index,t,g),className:`
1
+ "use strict";var pe=Object.create;var F=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)F(e,a,{get:t[a],enumerable:!0})},re=(e,t,a,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of de(t))!xe.call(e,u)&&u!==a&&F(e,u,{get:()=>t[u],enumerable:!(x=me(t,u))||x.enumerable});return e};var Z=(e,t,a)=>(a=e!=null?pe(ue(e)):{},re(t||!e||!e.__esModule?F(a,"default",{value:e,enumerable:!0}):a,e)),he=e=>re(F({},"__esModule",{value:!0}),e);var ye={};fe(ye,{ShelfDisplayHorizontalItem:()=>ge,ShelfDisplayWrapItem:()=>ve,getProductImage:()=>ne});module.exports=he(ye);var s=require("react/jsx-runtime"),ee=require("../AiuiProvider/index.js"),te=require("./shelfDisplay.js"),q=Z(require("../../components/picture.js")),G=Z(require("../../components/badge.js")),v=require("../../helpers/utils.js"),se=require("../../components/text.js"),O=Z(require("../../components/button.js")),le=require("../../shared/track.js"),oe=require("../../shared/trackUrlRef.js"),ie=require("../../components/heading.js"),ae=require("../../hooks/useExposure.js"),p=require("react");const M="image",R="product_shelf",V=999999999e-2,ne=e=>{const t=e?.sku,a=e?.variants,x=a?.find(_=>_?.sku===t),u=x?.image?.url||a?.[0]?.image?.url||"",k=x?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:u,altText:k}},ve=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:x,metafields:u,isTopTag:k=!1,isShowTag:_,isShowOriginalPrice:y}=t||{},{locale:b="es",copyWriting:J,currencyDisplay:U}=(0,ee.useAiuiContext)(),{discounts:z,discountsCopy:B}=u||{},A=(0,p.useRef)(null),[H,n]=(0,p.useState)([]),[D,K]=(0,p.useState)(""),L=(l,o,m,d)=>t?.event?.primaryButton?.(l,o+1,m,d),Q=(l,o,m,d)=>t?.event?.secondaryButton?.(l,o+1,m,d),r=(0,p.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),f=r?.id?.split?.("/")||[],C=f?.[f?.length-1],I=!r?.availableForSale||r?.price?.amount===V||r?.price===V,g=r?.coupons?.[0],P=!!(y&&g),E=e?.price?.currencyCode||"USD",S=(0,p.useMemo)(()=>(0,te.formatVariantPrice)({locale:b,amount:P?g?.variant_price4wscode:r?.price,baseAmount:P?r?.price:0,currencyCode:E,currencyDisplay:U}),[E,b,P,g?.variant_price4wscode,r]),{price:j,basePrice:X,discount:N,discountAmount:h}=S,{imageUrl:T,altText:$}=ne(e),w=e?.custom_name||e?.title,W=e?.custom_description||e?.description,i=()=>{if(g?.value_type==="fixed_amount"){const l=h||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,m,d,ce]=o;let Y=d;return d.endsWith(".00")?Y=d.replace(/\.00$/,""):d.endsWith(",00")&&(Y=d.replace(/,00$/,"")),`${m}${Y}${ce}`}return l}return N||""};(0,p.useEffect)(()=>{let l=[];if(N||h){const m=`${i()} ${z?.off||B?.off||""}`;K(m),l.push(m)}const o=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,N?1:2);n(l.concat(o))},[e?.tags,N,h,z?.off,B?.off]),(0,ae.useExposure)(A,{componentType:M,componentName:R,componentTitle:w,componentDescription:W,position:t?.index+1});const c=()=>(0,s.jsxs)(s.Fragment,{children:[_&&H?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((l,o)=>(0,s.jsx)(G.default,{className:"shelf-items-tag",children:l},o))}):null,w?(0,s.jsx)(ie.Heading,{as:"h3",title:w||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]",html:w||""}):null,W?(0,s.jsx)(se.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:W||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:I?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:J?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&j||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&X||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(O.default,{variant:"secondary",onClick:()=>Q(e,t?.index,t,g),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>K(e,t?.index,t,g),className:`
3
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(O.default,{disabled:I,variant:"primary",onClick:()=>L(e,t?.index,t,g),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
5
- `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,v.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(V.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&k&&(0,s.jsx)(q.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),(0,s.jsx)("div",{className:(0,v.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":w,target:t?.target,href:(0,oe.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${C}`,`${F}_${M}`),onClick:()=>{(0,le.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c()]})},e?.id||e?.handle)},ge=({data:e,configuration:t})=>{const{itemShape:a,itemLength:x,metafields:u}=t||{},{discounts:k,discountsCopy:_}=u||{},{locale:y="us",copyWriting:b,currencyDisplay:G}=(0,ee.useAiuiContext)(),[O,U]=(0,p.useState)([]),B=(0,p.useRef)(null),z=(i,c,l,o)=>t?.event?.primaryButton?.(i,c+1,l,o),A=(i,c,l,o)=>t?.event?.secondaryButton?.(i,c+1,l,o),n=(0,p.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(c=>c?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=n?.id?.split?.("/")||[],J=D?.[D?.length-1],K=!n?.availableForSale||n?.price?.amount===R||n?.price===R,Q=t?.isShowTag,r=t?.isShowOriginalPrice,f=n?.coupons?.[0],C=!!(r&&f),H=e?.price?.currencyCode||"USD",g=(0,p.useMemo)(()=>(0,te.formatVariantPrice)({locale:y,amount:C?f?.variant_price4wscode:n?.price,baseAmount:C?n?.price:0,currencyCode:H,currencyDisplay:G}),[H,y,C,f?.variant_price4wscode,n]),{price:I,basePrice:L,discount:S,discountAmount:P}=g,{imageUrl:X,altText:N}=ne(e),h=e?.custom_name||e?.title,T=e?.custom_description||e?.description;(0,ae.useExposure)(B,{componentType:F,componentName:M,componentTitle:h,componentDescription:T,position:t?.index+1});const $=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},w=()=>x>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",j=()=>{if(f?.value_type==="fixed_amount"){const i=P||"",c=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(c){const[,l,o,m]=c;let d=o;return o.endsWith(".00")?d=o.replace(/\.00$/,""):o.endsWith(",00")&&(d=o.replace(/,00$/,"")),`${l}${d}${m}`}return i}return S||""};return(0,p.useEffect)(()=>{let i=[];if(S||P){const l=`${j()} ${k?.off||_?.off||""}`;i.push(l)}const c=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);U(i.concat(c))},[e?.tags,S,P,k?.off,_?.off]),(0,s.jsx)("div",{ref:B,className:(0,v.cn)($().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,v.cn)(w(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,v.cn)($().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":h,target:t?.target,href:(0,oe.trackUrlRef)(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${J}`,`${F}_${M}`),onClick:()=>{(0,le.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)(V.default,{source:X,alt:N,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,v.cn)("flex flex-col items-start justify-center",$().boxItem),children:[Q&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:O?.length>0&&O?.map?.((i,c)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:i},c))}),h?(0,s.jsx)(ie.Heading,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:h||""}):null,T?(0,s.jsx)(se.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:K?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&I||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&L||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(W.default,{variant:"secondary",onClick:()=>A(e,t?.index,t,f),className:`
5
+ `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:A,className:(0,v.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(q.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&k&&(0,s.jsx)(G.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),(0,s.jsx)("div",{className:(0,v.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":w,target:t?.target,href:(0,oe.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${C}`,`${M}_${R}`),onClick:()=>{(0,le.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(q.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c()]})},e?.id||e?.handle)},ge=({data:e,configuration:t})=>{const{itemShape:a,itemLength:x,metafields:u}=t||{},{discounts:k,discountsCopy:_}=u||{},{locale:y="us",copyWriting:b,currencyDisplay:J}=(0,ee.useAiuiContext)(),[U,z]=(0,p.useState)([]),B=(0,p.useRef)(null),A=(i,c,l,o)=>t?.event?.primaryButton?.(i,c+1,l,o),H=(i,c,l,o)=>t?.event?.secondaryButton?.(i,c+1,l,o),n=(0,p.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(c=>c?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=n?.id?.split?.("/")||[],K=D?.[D?.length-1],L=!n?.availableForSale||n?.price?.amount===V||n?.price===V,Q=t?.isShowTag,r=t?.isShowOriginalPrice,f=n?.coupons?.[0],C=!!(r&&f),I=e?.price?.currencyCode||"USD",g=(0,p.useMemo)(()=>(0,te.formatVariantPrice)({locale:y,amount:C?f?.variant_price4wscode:n?.price,baseAmount:C?n?.price:0,currencyCode:I,currencyDisplay:J}),[I,y,C,f?.variant_price4wscode,n]),{price:P,basePrice:E,discount:S,discountAmount:j}=g,{imageUrl:X,altText:N}=ne(e),h=e?.custom_name||e?.title,T=e?.custom_description||e?.description;(0,ae.useExposure)(B,{componentType:M,componentName:R,componentTitle:h,componentDescription:T,position:t?.index+1});const $=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},w=()=>x>=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",W=()=>{if(f?.value_type==="fixed_amount"){const i=j||"",c=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(c){const[,l,o,m]=c;let d=o;return o.endsWith(".00")?d=o.replace(/\.00$/,""):o.endsWith(",00")&&(d=o.replace(/,00$/,"")),`${l}${d}${m}`}return i}return S||""};return(0,p.useEffect)(()=>{let i=[];if(S||j){const l=`${W()} ${k?.off||_?.off||""}`;i.push(l)}const c=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);z(i.concat(c))},[e?.tags,S,j,k?.off,_?.off]),(0,s.jsx)("div",{ref:B,className:(0,v.cn)($().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,v.cn)(w(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,v.cn)($().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":h,target:t?.target,href:(0,oe.trackUrlRef)(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${K}`,`${M}_${R}`),onClick:()=>{(0,le.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)(q.default,{source:X,alt:N,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,v.cn)("flex flex-col items-start justify-center",$().boxItem),children:[Q&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:U?.length>0&&U?.map?.((i,c)=>(0,s.jsx)(G.default,{className:"shelf-items-tag",children:i},c))}),h?(0,s.jsx)(ie.Heading,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:h||""}):null,T?(0,s.jsx)(se.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:L?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&P||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&E||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(O.default,{variant:"secondary",onClick:()=>H(e,t?.index,t,f),className:`
6
6
  ${t.direction==="vertical"?"w-full":""}
7
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>z(e,t?.index,t,f),className:`
7
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(O.default,{disabled:L,variant:"primary",onClick:()=>A(e,t?.index,t,f),className:`
8
8
  ${t.direction==="vertical"?"w-full":""}
9
9
  `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
10
10
  //# sourceMappingURL=shelfDisplayItem.js.map
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
4
- "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 } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } 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\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 } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 = 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 useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\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 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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 {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 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 = 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 return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\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 line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
- "mappings": "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",
4
+ "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 } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } 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\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 } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 = 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 useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\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 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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 {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 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 = 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 return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\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 line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
+ "mappings": "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",
6
6
  "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", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
7
7
  }
package/dist/cjs/biz-components/Title/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var G=Object.create;var d=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!X.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(c=J(e,o))||c.enumerable});return t};var Z=(t,e,n)=>(n=t!=null?G(Q(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),tt=t=>M(d({},"__esModule",{value:!0}),t);var rt={};Y(rt,{default:()=>et});module.exports=tt(rt);var i=require("react/jsx-runtime"),r=Z(require("react")),p=require("gsap"),x=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),P=require("../../components/index.js"),S=require("../../shared/Styles.js"),D=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",z=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold"},o)=>{const{title:u,caption:f,theme:b,extensions:m,align:g="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:V,inView:L}=(0,I.useInView)();return(0,r.useImperativeHandle)(o,()=>y.current),(0,r.useEffect)(()=>{p.gsap.registerPlugin(x.SplitText,T.ScrollTrigger);function B(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new x.SplitText(l.current,{type:"words",wordsClass:"word"});const h=s.current.words;p.gsap.set(h,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const A=j.progress,R=h.length||1,C=.5,v=1/R,N=v*(1-C),H=(R-1)*N+v,F=Math.min(1,H>0?A/H:0);h.forEach((O,W)=>{const _=W*N,q=v;let w=(F-_)/q;w=Math.max(0,Math.min(1,w)),p.gsap.set(O,{opacity:w})})}})}return L&&B(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[L]),(u||f)&&(0,i.jsxs)("div",{id:m?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:y,children:[(0,i.jsx)("div",{ref:V,className:(0,k.cn)("flex-1 space-y-4",e,{"aiui-dark":b==="dark","text-center":g==="center","text-right":g==="right","text-left":g==="left"}),children:(0,i.jsx)(P.Heading,{ref:l,as:n,size:4,html:f||u,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":b==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]"),href:(0,D.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${u}#${f}`,children:[(0,i.jsx)("div",{className:"flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});z.displayName="Title";var et=(0,S.withLayout)(z);
1
+ "use strict";"use client";var G=Object.create;var p=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(t,e)=>{for(var n in e)p(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!X.call(t,o)&&o!==n&&p(t,o,{get:()=>e[o],enumerable:!(c=J(e,o))||c.enumerable});return t};var Z=(t,e,n)=>(n=t!=null?G(Q(t)):{},M(e||!t||!t.__esModule?p(n,"default",{value:t,enumerable:!0}):n,t)),tt=t=>M(p({},"__esModule",{value:!0}),t);var rt={};Y(rt,{default:()=>et});module.exports=tt(rt);var i=require("react/jsx-runtime"),r=Z(require("react")),d=require("gsap"),v=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),P=require("../../components/index.js"),S=require("../../shared/Styles.js"),D=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",z=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold"},o)=>{const{title:f,caption:u,theme:b,extensions:m,align:g="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:V,inView:L}=(0,I.useInView)();return(0,r.useImperativeHandle)(o,()=>y.current),(0,r.useEffect)(()=>{d.gsap.registerPlugin(v.SplitText,T.ScrollTrigger);function B(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new v.SplitText(l.current,{type:"words",wordsClass:"word"});const h=s.current.words;d.gsap.set(h,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const A=j.progress,R=h.length||1,C=.5,w=1/R,N=w*(1-C),H=(R-1)*N+w,F=Math.min(1,H>0?A/H:0);h.forEach((O,W)=>{const _=W*N,q=w;let x=(F-_)/q;x=Math.max(0,Math.min(1,x)),d.gsap.set(O,{opacity:x})})}})}return L&&B(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[L]),(f||u)&&(0,i.jsxs)("div",{id:m?.id,className:"titleBottom title-box laptop:flex-row laptop:justify-between laptop:items-end mb-6 flex flex-col gap-2",ref:y,children:[(0,i.jsx)("div",{ref:V,className:(0,k.cn)("flex-1 space-y-4",e,{"aiui-dark":b==="dark","text-center":g==="center","text-right":g==="right","text-left":g==="left"}),children:(0,i.jsx)(P.Heading,{ref:l,as:n,size:4,html:u||f,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":b==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]"),href:(0,D.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${f}#${u}`,children:[(0,i.jsx)("div",{className:" laptop:flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});z.displayName="Title";var et=(0,S.withLayout)(z);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Title/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Title/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box laptop:flex-row laptop:justify-between laptop:items-end mb-6 flex flex-col gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\" laptop:flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "weight", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js CHANGED
@@ -1,2 +1,2 @@
1
- import D from"decimal.js";const p={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},g=e=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es"})[e]||"";function d({amount:e,currencyCode:r,currencyDisplay:s,locale:i,maximumFractionDigits:n,minimumFractionDigits:u,removeTrailingZeros:c=!1}){const o=i==="nl"?"EUR":r||"USD",a=g(i);if(!a)return null;let t=new Intl.NumberFormat(a,{style:"currency",currency:o,currencyDisplay:s||"symbol",minimumFractionDigits:n===0?0:u,maximumFractionDigits:n})?.format?.(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace?.(/[\s]/g,"")),c&&(t=t?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(\,\d*?[1-9])0+\b/,"$1")?.replace?.(/\,0+\b/,"")),t}function S({amount:e,baseAmount:r,currencyCode:s,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${p[n]}${e}`,basePrice:`${p[n]}${r}`,discount:`${p[n]}${r-e||0}`};const a=r>e;let l=null;const t=g(n);if(t){const m=new Intl.NumberFormat(t,{style:"percent"});l=a?m.format((r-e)/r):null}let y;if(a){const m=new D(r).sub(e||0).toNumber();y=d({amount:m,currencyDisplay:i,currencyCode:s||"USD",locale:n,maximumFractionDigits:2})}const f=d({amount:e,currencyCode:s,currencyDisplay:i,locale:n,removeTrailingZeros:o}),b=a?d({amount:r,currencyCode:s,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}):void 0;return{price:f,basePrice:b,discount:l,discountAmount:y}}export{p as PRICE_SYMBOL,d as formatPrice,S as formatVariantPrice,g as languageTerritory};
1
+ import D from"decimal.js";const m={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},g=e=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es",pl:"pl-PL",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"})[e]||"";function d({amount:e,currencyCode:r,currencyDisplay:s,locale:i,maximumFractionDigits:n,minimumFractionDigits:u,removeTrailingZeros:c=!1}){const o=i==="nl"?"EUR":r||"USD",a=g(i);if(!a)return null;let t=new Intl.NumberFormat(a,{style:"currency",currency:o,currencyDisplay:s||"symbol",minimumFractionDigits:n===0?0:u,maximumFractionDigits:n})?.format?.(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace?.(/[\s]/g,"")),c&&(t=t?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(\,\d*?[1-9])0+\b/,"$1")?.replace?.(/\,0+\b/,"")),t}function S({amount:e,baseAmount:r,currencyCode:s,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${m[n]}${e}`,basePrice:`${m[n]}${r}`,discount:`${m[n]}${r-e||0}`};const a=r>e;let l=null;const t=g(n);if(t){const p=new Intl.NumberFormat(t,{style:"percent"});l=a?p.format((r-e)/r):null}let y;if(a){const p=new D(r).sub(e||0).toNumber();y=d({amount:p,currencyDisplay:i,currencyCode:s||"USD",locale:n,maximumFractionDigits:2})}const f=d({amount:e,currencyCode:s,currencyDisplay:i,locale:n,removeTrailingZeros:o}),b=a?d({amount:r,currencyCode:s,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}):void 0;return{price:f,basePrice:b,discount:l,discountAmount:y}}export{m as PRICE_SYMBOL,d as formatPrice,S as formatVariantPrice,g as languageTerritory};
2
2
  //# sourceMappingURL=shelfDisplay.js.map
package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
4
- "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\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}) {\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 = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\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 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}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n pl: 'pl-PL',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\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}) {\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 = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\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 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}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "currencyDisplay", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED
@@ -1,10 +1,10 @@
1
- import{Fragment as ee,jsx as s,jsxs as u}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import X from"../../components/picture.js";import Y from"../../components/badge.js";import{cn as f}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import L from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ie}from"../../shared/trackUrlRef.js";import{Heading as ae}from"../../components/heading.js";import{useExposure as ne}from"../../hooks/useExposure.js";import{useRef as re,useEffect as ce,useMemo as E,useState as Z}from"react";const F="image",M="product_shelf",R=999999999e-2,pe=e=>{const t=e?.sku,h=e?.variants,v=h?.find(k=>k?.sku===t),$=v?.image?.url||h?.[0]?.image?.url||"",w=v?.image?.altText||h?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:$,altText:w}},Se=({data:e,configuration:t})=>{const{isDisplayBackImage:h=!1,itemShape:v,metafields:$,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:g}=t||{},{locale:y="es",copyWriting:V,currencyDisplay:W}=te(),{discounts:O,discountsCopy:B}=$||{},U=re(null),[z,a]=Z([]),[D,q]=Z(""),G=(l,o,c,p)=>t?.event?.primaryButton?.(l,o+1,c,p),J=(l,o,c,p)=>t?.event?.secondaryButton?.(l,o+1,c,p),n=E(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),m=n?.id?.split?.("/")||[],C=m?.[m?.length-1],A=!n?.availableForSale||n?.price?.amount===R||n?.price===R,x=n?.coupons?.[0],I=!!(g&&x),H=e?.price?.currencyCode||"USD",_=E(()=>se({locale:y,amount:I?x?.variant_price4wscode:n?.price,baseAmount:I?n?.price:0,currencyCode:H,currencyDisplay:W}),[H,y,I,x?.variant_price4wscode,n]),{price:P,basePrice:K,discount:S,discountAmount:d}=_,{imageUrl:N,altText:T}=pe(e),b=e?.custom_name||e?.title,j=e?.custom_description||e?.description,i=()=>{if(x?.value_type==="fixed_amount"){const l=d||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,c,p,me]=o;let Q=p;return p.endsWith(".00")?Q=p.replace(/\.00$/,""):p.endsWith(",00")&&(Q=p.replace(/,00$/,"")),`${c}${Q}${me}`}return l}return S||""};ce(()=>{let l=[];if(S||d){const c=`${i()} ${O?.off||B?.off||""}`;q(c),l.push(c)}const o=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);a(l.concat(o))},[e?.tags,S,d,O?.off,B?.off]),ne(U,{componentType:F,componentName:M,componentTitle:b,componentDescription:j,position:t?.index+1});const r=()=>u(ee,{children:[k&&z?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:z?.map?.((l,o)=>s(Y,{className:"shelf-items-tag",children:l},o))}):null,b?s(ae,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]",html:b||""}):null,j?s(le,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:j||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:A?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:V?.soldOutText}):u(ee,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&P||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&K||""})]})}),u("div",{className:f("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(L,{variant:"secondary",onClick:()=>J(e,t?.index,t,x),className:`
1
+ import{Fragment as ee,jsx as s,jsxs as u}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import X from"../../components/picture.js";import Y from"../../components/badge.js";import{cn as f}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import E from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ie}from"../../shared/trackUrlRef.js";import{Heading as ae}from"../../components/heading.js";import{useExposure as ne}from"../../hooks/useExposure.js";import{useRef as re,useEffect as ce,useMemo as F,useState as Z}from"react";const M="image",R="product_shelf",V=999999999e-2,pe=e=>{const t=e?.sku,h=e?.variants,v=h?.find(k=>k?.sku===t),$=v?.image?.url||h?.[0]?.image?.url||"",w=v?.image?.altText||h?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:$,altText:w}},Se=({data:e,configuration:t})=>{const{isDisplayBackImage:h=!1,itemShape:v,metafields:$,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:g}=t||{},{locale:y="es",copyWriting:q,currencyDisplay:O}=te(),{discounts:U,discountsCopy:B}=$||{},z=re(null),[A,a]=Z([]),[D,G]=Z(""),H=(l,o,c,p)=>t?.event?.primaryButton?.(l,o+1,c,p),J=(l,o,c,p)=>t?.event?.secondaryButton?.(l,o+1,c,p),n=F(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),m=n?.id?.split?.("/")||[],C=m?.[m?.length-1],I=!n?.availableForSale||n?.price?.amount===V||n?.price===V,x=n?.coupons?.[0],P=!!(g&&x),L=e?.price?.currencyCode||"USD",_=F(()=>se({locale:y,amount:P?x?.variant_price4wscode:n?.price,baseAmount:P?n?.price:0,currencyCode:L,currencyDisplay:O}),[L,y,P,x?.variant_price4wscode,n]),{price:j,basePrice:K,discount:S,discountAmount:d}=_,{imageUrl:N,altText:T}=pe(e),b=e?.custom_name||e?.title,W=e?.custom_description||e?.description,i=()=>{if(x?.value_type==="fixed_amount"){const l=d||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,c,p,me]=o;let Q=p;return p.endsWith(".00")?Q=p.replace(/\.00$/,""):p.endsWith(",00")&&(Q=p.replace(/,00$/,"")),`${c}${Q}${me}`}return l}return S||""};ce(()=>{let l=[];if(S||d){const c=`${i()} ${U?.off||B?.off||""}`;G(c),l.push(c)}const o=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);a(l.concat(o))},[e?.tags,S,d,U?.off,B?.off]),ne(z,{componentType:M,componentName:R,componentTitle:b,componentDescription:W,position:t?.index+1});const r=()=>u(ee,{children:[k&&A?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:A?.map?.((l,o)=>s(Y,{className:"shelf-items-tag",children:l},o))}):null,b?s(ae,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]",html:b||""}):null,W?s(le,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:W||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:I?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:q?.soldOutText}):u(ee,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&K||""})]})}),u("div",{className:f("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>J(e,t?.index,t,x),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(L,{variant:"primary",onClick:()=>G(e,t?.index,t,x),className:`
3
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{disabled:I,variant:"primary",onClick:()=>H(e,t?.index,t,x),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
5
- `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:U,className:f("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",v==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:h?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:u("div",{className:"relative inset-0 size-full",children:[s(X,{source:N,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):u("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&w&&s(Y,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),s("div",{className:f("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":b,target:t?.target,href:ie(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${C}`,`${F}_${M}`),onClick:()=>{oe({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:s(X,{source:N,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},Ne=({data:e,configuration:t})=>{const{itemShape:h,itemLength:v,metafields:$}=t||{},{discounts:w,discountsCopy:k}=$||{},{locale:g="us",copyWriting:y,currencyDisplay:V}=te(),[W,O]=Z([]),B=re(null),U=(i,r,l,o)=>t?.event?.primaryButton?.(i,r+1,l,o),z=(i,r,l,o)=>t?.event?.secondaryButton?.(i,r+1,l,o),a=E(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=a?.id?.split?.("/")||[],q=D?.[D?.length-1],G=!a?.availableForSale||a?.price?.amount===R||a?.price===R,J=t?.isShowTag,n=t?.isShowOriginalPrice,m=a?.coupons?.[0],C=!!(n&&m),A=e?.price?.currencyCode||"USD",x=E(()=>se({locale:g,amount:C?m?.variant_price4wscode:a?.price,baseAmount:C?a?.price:0,currencyCode:A,currencyDisplay:V}),[A,g,C,m?.variant_price4wscode,a]),{price:I,basePrice:H,discount:_,discountAmount:P}=x,{imageUrl:K,altText:S}=pe(e),d=e?.custom_name||e?.title,N=e?.custom_description||e?.description;ne(B,{componentType:F,componentName:M,componentTitle:d,componentDescription:N,position:t?.index+1});const T=()=>v>=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"},b=()=>v>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",j=()=>{if(m?.value_type==="fixed_amount"){const i=P||"",r=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,l,o,c]=r;let p=o;return o.endsWith(".00")?p=o.replace(/\.00$/,""):o.endsWith(",00")&&(p=o.replace(/,00$/,"")),`${l}${p}${c}`}return i}return _||""};return ce(()=>{let i=[];if(_||P){const l=`${j()} ${w?.off||k?.off||""}`;i.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,_?1:2);O(i.concat(r))},[e?.tags,_,P,w?.off,k?.off]),s("div",{ref:B,className:f(T().wrap,h==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:u("div",{className:f(b(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:f(T().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":d,target:t?.target,href:ie(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${q}`,`${F}_${M}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(X,{source:K,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),u("div",{className:f("flex flex-col items-start justify-center",T().boxItem),children:[J&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:W?.length>0&&W?.map?.((i,r)=>s(Y,{className:"shelf-items-tag",children:i},r))}),d?s(ae,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:d||""}):null,N?s(le,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:N||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:G?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y?.soldOutText}):u(ee,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&I||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&H||""})]})}),u("div",{className:f("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(L,{variant:"secondary",onClick:()=>z(e,t?.index,t,m),className:`
5
+ `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:f("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",v==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:h?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:u("div",{className:"relative inset-0 size-full",children:[s(X,{source:N,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):u("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&w&&s(Y,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),s("div",{className:f("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":b,target:t?.target,href:ie(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${C}`,`${M}_${R}`),onClick:()=>{oe({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:s(X,{source:N,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},Ne=({data:e,configuration:t})=>{const{itemShape:h,itemLength:v,metafields:$}=t||{},{discounts:w,discountsCopy:k}=$||{},{locale:g="us",copyWriting:y,currencyDisplay:q}=te(),[O,U]=Z([]),B=re(null),z=(i,r,l,o)=>t?.event?.primaryButton?.(i,r+1,l,o),A=(i,r,l,o)=>t?.event?.secondaryButton?.(i,r+1,l,o),a=F(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=a?.id?.split?.("/")||[],G=D?.[D?.length-1],H=!a?.availableForSale||a?.price?.amount===V||a?.price===V,J=t?.isShowTag,n=t?.isShowOriginalPrice,m=a?.coupons?.[0],C=!!(n&&m),I=e?.price?.currencyCode||"USD",x=F(()=>se({locale:g,amount:C?m?.variant_price4wscode:a?.price,baseAmount:C?a?.price:0,currencyCode:I,currencyDisplay:q}),[I,g,C,m?.variant_price4wscode,a]),{price:P,basePrice:L,discount:_,discountAmount:j}=x,{imageUrl:K,altText:S}=pe(e),d=e?.custom_name||e?.title,N=e?.custom_description||e?.description;ne(B,{componentType:M,componentName:R,componentTitle:d,componentDescription:N,position:t?.index+1});const T=()=>v>=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"},b=()=>v>=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",W=()=>{if(m?.value_type==="fixed_amount"){const i=j||"",r=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,l,o,c]=r;let p=o;return o.endsWith(".00")?p=o.replace(/\.00$/,""):o.endsWith(",00")&&(p=o.replace(/,00$/,"")),`${l}${p}${c}`}return i}return _||""};return ce(()=>{let i=[];if(_||j){const l=`${W()} ${w?.off||k?.off||""}`;i.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,_?1:2);U(i.concat(r))},[e?.tags,_,j,w?.off,k?.off]),s("div",{ref:B,className:f(T().wrap,h==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:u("div",{className:f(b(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:f(T().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":d,target:t?.target,href:ie(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${G}`,`${M}_${R}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(X,{source:K,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),u("div",{className:f("flex flex-col items-start justify-center",T().boxItem),children:[J&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:O?.length>0&&O?.map?.((i,r)=>s(Y,{className:"shelf-items-tag",children:i},r))}),d?s(ae,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:d||""}):null,N?s(le,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:N||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:H?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y?.soldOutText}):u(ee,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&P||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&L||""})]})}),u("div",{className:f("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>A(e,t?.index,t,m),className:`
6
6
  ${t.direction==="vertical"?"w-full":""}
7
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(L,{variant:"primary",onClick:()=>U(e,t?.index,t,m),className:`
7
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{disabled:H,variant:"primary",onClick:()=>z(e,t?.index,t,m),className:`
8
8
  ${t.direction==="vertical"?"w-full":""}
9
9
  `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Ne as ShelfDisplayHorizontalItem,Se as ShelfDisplayWrapItem,pe as getProductImage};
10
10
  //# sourceMappingURL=shelfDisplayItem.js.map
package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
4
- "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 } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } 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\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 } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 = 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 useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\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 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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 {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 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 = 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 return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\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 line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
- "mappings": "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",
4
+ "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 } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } 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\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 } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 = 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 useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\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 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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 {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = 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\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\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 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 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 = 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 return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={displayTitle || ''}\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 line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\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 ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut}\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
7
7
  }
package/dist/esm/biz-components/Title/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as R}from"react/jsx-runtime";import F,{useEffect as O,useRef as o,useImperativeHandle as W}from"react";import{gsap as p}from"gsap";import{SplitText as x}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as _}from"../../components/index.js";import{withLayout as q}from"../../shared/Styles.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{useInView as J}from"react-intersection-observer";const b="link",y="title",L=F.forwardRef(({data:N,className:H,as:M="h2",weight:E="bold"},$)=>{const{title:s,caption:l,theme:u,extensions:i,align:a="left"}=N,f=o(null),r=o(null),t=o(null),n=o(null),{ref:z,inView:g}=J();return W($,()=>f.current),O(()=>{p.registerPlugin(x,T);function P(){if(!r.current)return;const S=r.current?.clientHeight||80;t.current&&t.current.revert(),n.current&&n.current.kill(),t.current=new x(r.current,{type:"words",wordsClass:"word"});const c=t.current.words;p.set(c,{opacity:0}),n.current=T.create({trigger:r.current,start:"bottom bottom-=4%",end:`bottom+=${S*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:D=>{const I=D.progress,h=c.length||1,V=.5,m=1/h,v=m*(1-V),w=(h-1)*v+m,B=Math.min(1,w>0?I/w:0);c.forEach((U,j)=>{const A=j*v,C=m;let d=(B-A)/C;d=Math.max(0,Math.min(1,d)),p.set(U,{opacity:d})})}})}return g&&P(),()=>{t.current&&t.current.revert(),n.current&&n.current.kill()}},[g]),(s||l)&&R("div",{id:i?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:f,children:[e("div",{ref:z,className:k("flex-1 space-y-4",H,{"aiui-dark":u==="dark","text-center":a==="center","text-right":a==="right","text-left":a==="left"}),children:e(_,{ref:r,as:M,size:4,html:l||s,weight:E})}),i?.textLink&&R("a",{className:k({"aiui-dark":u==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]"),href:G(i?.link,`${b}_${y}`),"data-headless-type-name":`${b}#${y}`,"data-headless-title-desc-button":`${s}#${l}`,children:[e("div",{className:"flex-1 truncate whitespace-nowrap",children:i?.textLink}),e("div",{className:"size-6",children:e("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:e("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});L.displayName="Title";var it=q(L);export{it as default};
1
+ "use client";import{jsx as e,jsxs as R}from"react/jsx-runtime";import F,{useEffect as O,useRef as o,useImperativeHandle as W}from"react";import{gsap as d}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as _}from"../../components/index.js";import{withLayout as q}from"../../shared/Styles.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{useInView as J}from"react-intersection-observer";const b="link",y="title",L=F.forwardRef(({data:N,className:H,as:M="h2",weight:E="bold"},$)=>{const{title:s,caption:l,theme:f,extensions:i,align:a="left"}=N,u=o(null),r=o(null),t=o(null),n=o(null),{ref:z,inView:g}=J();return W($,()=>u.current),O(()=>{d.registerPlugin(v,T);function P(){if(!r.current)return;const S=r.current?.clientHeight||80;t.current&&t.current.revert(),n.current&&n.current.kill(),t.current=new v(r.current,{type:"words",wordsClass:"word"});const c=t.current.words;d.set(c,{opacity:0}),n.current=T.create({trigger:r.current,start:"bottom bottom-=4%",end:`bottom+=${S*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:D=>{const I=D.progress,h=c.length||1,V=.5,m=1/h,w=m*(1-V),x=(h-1)*w+m,B=Math.min(1,x>0?I/x:0);c.forEach((U,j)=>{const A=j*w,C=m;let p=(B-A)/C;p=Math.max(0,Math.min(1,p)),d.set(U,{opacity:p})})}})}return g&&P(),()=>{t.current&&t.current.revert(),n.current&&n.current.kill()}},[g]),(s||l)&&R("div",{id:i?.id,className:"titleBottom title-box laptop:flex-row laptop:justify-between laptop:items-end mb-6 flex flex-col gap-2",ref:u,children:[e("div",{ref:z,className:k("flex-1 space-y-4",H,{"aiui-dark":f==="dark","text-center":a==="center","text-right":a==="right","text-left":a==="left"}),children:e(_,{ref:r,as:M,size:4,html:l||s,weight:E})}),i?.textLink&&R("a",{className:k({"aiui-dark":f==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]"),href:G(i?.link,`${b}_${y}`),"data-headless-type-name":`${b}#${y}`,"data-headless-title-desc-button":`${s}#${l}`,children:[e("div",{className:" laptop:flex-1 truncate whitespace-nowrap",children:i?.textLink}),e("div",{className:"size-6",children:e("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:e("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});L.displayName="Title";var it=q(L);export{it as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Title/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Title/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box laptop:flex-row laptop:justify-between laptop:items-end mb-6 flex flex-col gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#080A0F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\" laptop:flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "as", "weight", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.26",
3
+ "version": "1.1.28",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",