@anker-in/headless-ui 1.3.60 → 1.3.61

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var oe=Object.create;var g=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var fe=(n,s)=>{for(var r in s)g(n,r,{get:s[r],enumerable:!0})},R=(n,s,r,u)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of me(s))!pe.call(n,p)&&p!==r&&g(n,p,{get:()=>s[p],enumerable:!(u=le(s,p))||u.enumerable});return n};var w=(n,s,r)=>(r=n!=null?oe(ce(n)):{},R(s||!n||!n.__esModule?g(r,"default",{value:n,enumerable:!0}):r,n)),ue=n=>R(g({},"__esModule",{value:!0}),n);var _e={};fe(_e,{default:()=>ge});module.exports=ue(_e);var l=require("react/jsx-runtime"),a=w(require("react")),L=require("../../helpers/utils.js"),c=require("../../components/tabs.js"),V=w(require("../Title/index.js")),B=w(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),y=require("../../shared/track.js"),N=require("react-responsive"),z=require("../../hooks/useRollout.js"),_=require("./shelfDisplayItem.js");const de="image",he="product_shelf",C=n=>n==null?"default":String(n).replace(/[^a-zA-Z0-9_-]/g,"")||"default",H=a.default.forwardRef(({data:n,event:s,buildData:r,breakpoints:u,className:p="",recommendedData:d,target:q="_self",metafields:A,isDisplayGudgments:b=!1,isDisplayBackImage:$=!1,renderOriginalPrice:O,renderPriceLabel:Q,renderPrice:W,onAddCart:Z,onBuyNow:j,onLearnMore:F,formatPrice:G,...J},K)=>{const{productsTab:f=[],productsCard:U=[],title:v,isShowTab:S=!0,tabShape:X="square",isShowTag:Y=!1,isShowOriginalPrice:ee=!0,isShowRecommendedCard:te=!1,...ne}=n,T=(0,a.useRef)(!1),k=(0,a.useRef)(null),se=(0,a.useId)(),ae=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),[re,D]=(0,z.useRollout)({threshold:0});(0,a.useImperativeHandle)(K,()=>k.current);const I=()=>{(0,y.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:d?.map((e,m)=>{const t=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:m+1}})}})};(0,a.useEffect)(()=>{D&&d?.length&&!T.current&&(T.current=!0,I())},[D,d]);const x=(e,m)=>{if(m){const t=d?.map?.(o=>({...o,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const i=e?.map?.(t=>{const o=r?.products?.find(h=>h?.handle===t?.handle);if(o)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...o}})?.filter(t=>t);return i?.length?i:[]},M=C(se),P=(e,m)=>{const i=e.length<=1&&b,t=!ae&&e.length<=2&&b,o=ie=>{switch(ie){case 1440:return t?e.length:4;case 1024:return t?e.length:3;default:return t?e.length:2.3}},h=m?`${M}-${C(m)}`:M;return(0,l.jsx)(B.default,{data:{list:e,configuration:{...ne,event:s,isShowTag:Y,isShowOriginalPrice:ee,target:q,metafields:A,itemLength:e.length,isDisplayBackImage:$,renderOriginalPrice:O,renderPriceLabel:Q,renderPrice:W,onAddCart:Z,onBuyNow:j,onLearnMore:F,formatPrice:G}},id:h,className:`${S?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:t?"flex-1":"",Slide:t?_.ShelfDisplayHorizontalItem:_.ShelfDisplayWrapItem,breakpoints:u||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:i?1:1.2},768:{spaceBetween:i?0:16,freeMode:!1,slidesPerView:o()},1024:{spaceBetween:i?0:16,freeMode:!1,slidesPerView:o(1024)},1440:{spaceBetween:i?0:16,freeMode:!1,slidesPerView:o(1440)}}},h)};return(0,l.jsxs)("div",{ref:k,...J,className:(0,L.cn)("shelf-display-wrap text-info-primary w-full",p,{"aiui-dark":n?.theme==="dark"}),children:[v&&(0,l.jsx)(V.default,{data:{title:v}}),(0,l.jsx)("div",{ref:re,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:S&&f?.length>0?(0,l.jsxs)(c.Tabs,{defaultValue:f?.[0]?.tab,onValueChange:e=>{const m=f?.find(i=>i?.tab===e);if(m){if(!m.isShowRecommendedTab){(0,y.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:he,component_title:n?.title,component_position:1,navigation:e}});return}I()}},shape:X==="rounded"?"rounded":"square",children:[(0,l.jsx)(c.TabsList,{children:f.map(e=>(0,l.jsx)(c.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),f.map(e=>(0,l.jsx)(c.TabsContent,{value:e?.tab,children:P(x(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):P(x(U,te))})]})});H.displayName="ShelfDisplay";var ge=(0,E.withLayout)(H);
+"use strict";"use client";var ke=Object.create;var _=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var Le=(s,i)=>{for(var r in i)_(s,r,{get:i[r],enumerable:!0})},$=(s,i,r,g)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of Ce(i))!De.call(s,m)&&m!==r&&_(s,m,{get:()=>i[m],enumerable:!(g=Te(i,m))||g.enumerable});return s};var T=(s,i,r)=>(r=s!=null?ke(Ie(s)):{},$(i||!s||!s.__esModule?_(r,"default",{value:s,enumerable:!0}):r,s)),Me=s=>$(_({},"__esModule",{value:!0}),s);var Ee={};Le(Ee,{default:()=>Pe});module.exports=Me(Ee);var n=require("react/jsx-runtime"),a=T(require("react")),v=require("../../helpers/utils.js"),p=require("../../components/tabs.js"),j=T(require("../Title/index.js")),Q=T(require("../SwiperBox/index.js")),W=require("../../shared/Styles.js"),C=require("../../shared/track.js"),y=require("react-responsive"),F=require("../../hooks/useRollout.js"),h=require("./shelfDisplayItem.js");const Ne="image",Re="product_shelf",O=s=>s==null?"default":String(s).replace(/[^a-zA-Z0-9_-]/g,"")||"default",Z=a.default.forwardRef(({data:s,event:i,buildData:r,breakpoints:g,className:m="",recommendedData:w,target:G="_self",metafields:J,isDisplayGudgments:I=!1,isDisplayBackImage:K=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},ie)=>{const{productsTab:d=[],productsCard:oe=[],title:D,isShowTab:b=!0,tabShape:re="square",isShowTag:le=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:pe=!1,isTile:me=!1,tileMaxRows:S,tileExpandText:de="Show more",tileCollapseText:fe="Show less",...ue}=s,L=(0,a.useRef)(!1),M=(0,a.useRef)(null),he=(0,a.useId)(),[ge,we]=(0,a.useState)(!1);(0,a.useEffect)(()=>{we(!0)},[]);const _e=(0,y.useMediaQuery)({query:"(max-width: 768px)"}),ve=(0,y.useMediaQuery)({query:"(min-width: 1025px)"}),ye=(0,y.useMediaQuery)({query:"(min-width: 1440px)"}),[x,be]=(0,a.useState)(!1),[Se,N]=(0,F.useRollout)({threshold:0});(0,a.useImperativeHandle)(ie,()=>M.current);const R=()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:w?.map((e,l)=>{const t=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:l+1}})}})};(0,a.useEffect)(()=>{N&&w?.length&&!L.current&&(L.current=!0,R())},[N,w]);const P=(e,l)=>{if(l){const t=w?.map?.(o=>({...o,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const c=e?.map?.(t=>{const o=r?.products?.find(f=>f?.handle===t?.handle);if(o)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...o}})?.filter(t=>t);return c?.length?c:[]},E=O(he),V=(e,l)=>{const c={...ue,event:i,isShowTag:le,isShowOriginalPrice:ce,target:G,metafields:J,itemLength:e.length,isDisplayBackImage:K,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne};if(me&&ge&&ve){const k=ye?4:3,H=typeof S=="number"&&S>0,z=H?S*k:e.length,q=H&&e.length>z,xe=q&&!x?e.slice(0,z):e;return(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:(0,v.cn)("shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4",b?"mt-6":""),children:xe.map((u,A)=>(0,n.jsx)(h.ShelfDisplayWrapItem,{data:u,configuration:{...c,index:A}},u?.id||u?.handle||A))}),q&&(0,n.jsxs)("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[(0,n.jsx)("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>be(u=>!u),children:x?fe:de}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,v.cn)("laptop:size-5 size-4",x&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,n.jsx)("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}const t=e.length<=1&&I,o=!_e&&e.length<=2&&I,f=k=>{switch(k){case 1440:return o?e.length:4;case 1025:return o?e.length:3;default:return o?e.length:2.3}},B=l?`${E}-${O(l)}`:E;return(0,n.jsx)(Q.default,{data:{list:e,configuration:c},id:B,className:`${b?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?h.ShelfDisplayHorizontalItem:h.ShelfDisplayWrapItem,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:g||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:t?1:1.2},768:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f()},1024:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1440)}}},B)};return(0,n.jsxs)("div",{ref:M,...ae,className:(0,v.cn)("shelf-display-wrap text-info-primary w-full",m,{"aiui-dark":s?.theme==="dark"}),children:[D&&(0,n.jsx)(j.default,{data:{title:D}}),(0,n.jsx)("div",{ref:Se,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:b&&d?.length>0?(0,n.jsxs)(p.Tabs,{defaultValue:d?.[0]?.tab,onValueChange:e=>{const l=d?.find(c=>c?.tab===e);if(l){if(!l.isShowRecommendedTab){(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Ne,component_name:Re,component_title:s?.title,component_position:1,navigation:e}});return}R()}},shape:re==="rounded"?"rounded":"square",children:[(0,n.jsx)(p.TabsList,{children:d.map(e=>(0,n.jsx)(p.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),d.map(e=>(0,n.jsx)(p.TabsContent,{value:e?.tab,children:V(P(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):V(P(oe,pe))})]})});Z.displayName="ShelfDisplay";var Pe=(0,W.withLayout)(Z);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n      renderOriginalPrice,\n      renderPriceLabel,\n      renderPrice,\n      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceId = useId()\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n        return newCurrentData?.length ? newCurrentData : []\n      }\n      if (!Array.isArray(currentData)) return []\n      const newCurrentData = currentData\n        ?.map?.(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              isShowRecommended: false,\n              custom_name: item.custom_name,\n              custom_description: item.custom_description,\n              custom_image: item.custom_image,\n              custom_theme: item.custom_theme,\n              custom_primary_link: item?.custom_primary_link || '',\n              custom_secondary_link: item?.custom_secondary_link || '',\n              custom_bg_image: item?.custom_bg_image || '',\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n    }\n\n    const safeInstanceId = sanitizeCssSelector(instanceId)\n\n    const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n      const isOnce = items.length <= 1 && isDisplayGudgments\n      const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n      const showItemLength = (size?: number) => {\n        switch (size) {\n          case 1440:\n            return isShowGudgments ? items.length : 4\n          case 1024:\n            return isShowGudgments ? items.length : 3\n          default:\n            return isShowGudgments ? items.length : 2.3\n        }\n      }\n      const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n      return (\n        <SwiperBox\n          key={swiperInstanceId}\n          data={{\n            list: items,\n            configuration: {\n              ...other,\n              event,\n              isShowTag,\n              isShowOriginalPrice,\n              target,\n              metafields,\n              itemLength: items.length,\n              isDisplayBackImage,\n              renderOriginalPrice,\n              renderPriceLabel,\n              renderPrice,\n              onAddCart,\n              onBuyNow,\n              onLearnMore,\n              formatPrice,\n            },\n          }}\n          id={swiperInstanceId}\n          className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n          itemClassName={isShowGudgments ? 'flex-1' : ''}\n          Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n          breakpoints={\n            breakpoints || {\n              0: { spaceBetween: 12, freeMode: false, slidesPerView: 1 },\n              374: { spaceBetween: 12, freeMode: false, slidesPerView: isOnce ? 1 : 1.2 },\n              768: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength() },\n              1024: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1024) },\n              1440: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1440) },\n            }\n          }\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          {isShowTab && productsTab?.length > 0 ? (\n            <Tabs\n              defaultValue={productsTab?.[0]?.tab}\n              onValueChange={value => {\n                const currentTab = productsTab?.find(item => item?.tab === value)\n                if (!currentTab) return\n                if (!currentTab.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n              shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n            >\n              <TabsList>\n                {productsTab.map(item => (\n                  <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                    {item?.tab || ''}\n                  </TabsTrigger>\n                ))}\n              </TabsList>\n              {productsTab.map(tab => (\n                <TabsContent key={tab?.id || tab?.tab} value={tab?.tab}>\n                  {renderSwiperBox(getItems(tab?.data || [], tab?.isShowRecommendedTab), tab?.tab)}\n                </TabsContent>\n              ))}\n            </Tabs>\n          ) : (\n            renderSwiperBox(getItems(productsCard, isShowRecommendedCard))\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "isView", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "SwiperBox", "Title", "currentTab", "tab"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n      renderOriginalPrice,\n      renderPriceLabel,\n      renderPrice,\n      onAddCart,\n      onBuyNow,\n      onLearnMore,\n      formatPrice,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      isTile = false,\n      tileMaxRows,\n      tileExpandText = 'Show more',\n      tileCollapseText = 'Show less',\n      ...other\n    } = data\n\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceId = useId()\n\n    const [mounted, setMounted] = useState(false)\n    useEffect(() => {\n      setMounted(true)\n    }, [])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const isLaptop = useMediaQuery({ query: '(min-width: 1025px)' })\n    const isDesktop = useMediaQuery({ query: '(min-width: 1440px)' })\n    const [tileExpanded, setTileExpanded] = useState(false)\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n        return newCurrentData?.length ? newCurrentData : []\n      }\n      if (!Array.isArray(currentData)) return []\n      const newCurrentData = currentData\n        ?.map?.(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              isShowRecommended: false,\n              custom_name: item.custom_name,\n              custom_description: item.custom_description,\n              custom_image: item.custom_image,\n              custom_theme: item.custom_theme,\n              custom_primary_link: item?.custom_primary_link || '',\n              custom_secondary_link: item?.custom_secondary_link || '',\n              custom_bg_image: item?.custom_bg_image || '',\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n    }\n\n    const safeInstanceId = sanitizeCssSelector(instanceId)\n\n    const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n      const configuration = {\n        ...other,\n        event,\n        isShowTag,\n        isShowOriginalPrice,\n        target,\n        metafields,\n        itemLength: items.length,\n        isDisplayBackImage,\n        renderOriginalPrice,\n        renderPriceLabel,\n        renderPrice,\n        onAddCart,\n        onBuyNow,\n        onLearnMore,\n        formatPrice,\n      }\n\n      if (isTile && mounted && isLaptop) {\n        // \u5E73\u94FA\u5E03\u5C40\uFF1AtileMaxRows \u8BBE\u7F6E\u540E\uFF0C\u8D85\u8FC7\u884C\u6570\u6298\u53E0\u6536\u8D77\n        const colsPerRow = isDesktop ? 4 : 3\n        const hasRowLimit = typeof tileMaxRows === 'number' && tileMaxRows > 0\n        const maxVisibleItems = hasRowLimit ? tileMaxRows * colsPerRow : items.length\n        const shouldCollapse = hasRowLimit && items.length > maxVisibleItems\n        const visibleItems = shouldCollapse && !tileExpanded ? items.slice(0, maxVisibleItems) : items\n\n        return (\n          <div>\n            <div\n              className={cn('shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4', isShowTab ? 'mt-6' : '')}\n            >\n              {visibleItems.map((item, index) => (\n                <ShelfDisplayWrapItem\n                  key={item?.id || item?.handle || index}\n                  data={item}\n                  configuration={{ ...configuration, index }}\n                />\n              ))}\n            </div>\n            {shouldCollapse && (\n              <div className=\"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center\">\n                <button className=\"laptop:text-base text-sm font-bold\" onClick={() => setTileExpanded(prev => !prev)}>\n                  {tileExpanded ? tileCollapseText : tileExpandText}\n                </button>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className={cn('laptop:size-5 size-4', tileExpanded && 'rotate-180')}\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </div>\n            )}\n          </div>\n        )\n      }\n\n      const isOnce = items.length <= 1 && isDisplayGudgments\n      const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n      const showItemLength = (size?: number) => {\n        switch (size) {\n          case 1440:\n            return isShowGudgments ? items.length : 4\n          case 1025:\n            return isShowGudgments ? items.length : 3\n          default:\n            return isShowGudgments ? items.length : 2.3\n        }\n      }\n      const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n      return (\n        <SwiperBox\n          key={swiperInstanceId}\n          data={{ list: items, configuration }}\n          id={swiperInstanceId}\n          className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n          itemClassName={isShowGudgments ? 'flex-1' : ''}\n          Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n          showNavigation\n          navigationPrevClassName=\"left-4 desktop:left-6\"\n          navigationNextClassName=\"right-4 desktop:right-6\"\n          breakpoints={\n            breakpoints || {\n              0: { spaceBetween: 12, freeMode: false, slidesPerView: 1 },\n              374: { spaceBetween: 12, freeMode: false, slidesPerView: isOnce ? 1 : 1.2 },\n              768: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength() },\n              1024: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1024) },\n              1440: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1440) },\n            }\n          }\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          {isShowTab && productsTab?.length > 0 ? (\n            <Tabs\n              defaultValue={productsTab?.[0]?.tab}\n              onValueChange={value => {\n                const currentTab = productsTab?.find(item => item?.tab === value)\n                if (!currentTab) return\n                if (!currentTab.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n              shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n            >\n              <TabsList>\n                {productsTab.map(item => (\n                  <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                    {item?.tab || ''}\n                  </TabsTrigger>\n                ))}\n              </TabsList>\n              {productsTab.map(tab => (\n                <TabsContent key={tab?.id || tab?.tab} value={tab?.tab}>\n                  {renderSwiperBox(getItems(tab?.data || [], tab?.isShowRecommendedTab), tab?.tab)}\n                </TabsContent>\n              ))}\n            </Tabs>\n          ) : (\n            renderSwiperBox(getItems(productsCard, isShowRecommendedCard))\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "isTile", "tileMaxRows", "tileExpandText", "tileCollapseText", "other", "isView", "innerRef", "instanceId", "mounted", "setMounted", "isMobile", "isLaptop", "isDesktop", "tileExpanded", "setTileExpanded", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "configuration", "colsPerRow", "hasRowLimit", "maxVisibleItems", "shouldCollapse", "visibleItems", "prev", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "SwiperBox", "Title", "currentTab", "tab"]
 }

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

@@ -57,6 +57,12 @@ export interface ShelfDisplayItem {
     custom_theme?: string;
     custom_bg_image?: string;
 }
+export interface SocialEndorsementItem {
+    /** 图标：图片 URL 字符串，或 SVG React 节点 */
+    icon: string | React.ReactNode;
+    /** 无障碍标签 */
+    label?: string;
+}
 export type ShelfDisplayType = {
     title?: string;
     isShowTab?: boolean;
@@ -81,6 +87,24 @@ export type ShelfDisplayType = {
     secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
     theme?: 'light' | 'dark';
     containerProps?: ContainerProps;
+    /** 是否平铺网格布局（≥1025px 生效，一行 3 个，≥1440px 一行 4 个，≤1024px 仍为轮播） */
+    isTile?: boolean;
+    /** 平铺布局下最多展示的行数，超过该行数时折叠收起，需点击「展开」查看更多。未设置则不折叠 */
+    tileMaxRows?: number;
+    /** 平铺布局折叠时「展开」按钮文案，默认 'Show more' */
+    tileExpandText?: string;
+    /** 平铺布局展开后「收起」按钮文案，默认 'Show less' */
+    tileCollapseText?: string;
+    /** shelf-prices-tag（折扣价格标签）是否显示，默认 false。仅作用于纵向卡片 ShelfDisplayWrapItem */
+    isShowPricesTag?: boolean;
+    /** shelf-prices-tag 文案颜色，建议使用 Design Token CSS 变量，如 var(--info-primary-color)。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
+    pricesTagTextColor?: string;
+    /** shelf-prices-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
+    pricesTagBgColor?: string;
+    /** shelf-items-tag（自定义标签）文案颜色。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
+    itemsTagTextColor?: string;
+    /** shelf-items-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
+    itemsTagBgColor?: string;
 };
 export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     data: ShelfDisplayType;
@@ -103,6 +127,7 @@ export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement>
             slidesPerView: number;
         };
     };
+    /** 元数据：折扣文案（discounts.off / discountsCopy.off）及社媒背书图标（socialEndorsements: SocialEndorsementItem[]） */
     metafields?: any;
     isDisplayGudgments?: boolean;
     isDisplayBackImage?: boolean;

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

@@ -1,2 +1,2 @@
-"use strict";var S=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var x=(e,n)=>{for(var i in n)p(e,i,{get:n[i],enumerable:!0})},y=(e,n,i,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of T(n))!I.call(e,t)&&t!==i&&p(e,t,{get:()=>n[t],enumerable:!(a=P(n,t))||a.enumerable});return e};var _=(e,n,i)=>(i=e!=null?S(v(e)):{},y(n||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>y(p({},"__esModule",{value:!0}),e);var C={};x(C,{formatVariantPrice:()=>B});module.exports=w(C);var g=_(require("decimal.js")),r=require("../../helpers/index.js");function B({amount:e,baseAmount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:u,customFormatPrice:o}){if(typeof Intl>"u")return{price:`${r.PRICE_SYMBOL[t]}${e}`,basePrice:`${r.PRICE_SYMBOL[t]}${n}`,discount:`${r.PRICE_SYMBOL[t]}${n-e||0}`};const d=n>e;let c=null;const m=(0,r.languageTerritory)(t);if(m){const s=new Intl.NumberFormat(m,{style:"percent"});c=d?s.format((n-e)/n):null}let l;if(d){const s=new g.default(n).sub(e||0).toNumber();l=o?o({amount:s,locale:t}):(0,r.formatPrice)({amount:s,currencyDisplay:a,currencyCode:i||"USD",locale:t,maximumFractionDigits:2})}const h=o?o({amount:e,locale:t}):(0,r.formatPrice)({amount:e,currencyCode:i,currencyDisplay:a,locale:t,removeTrailingZeros:u}),D=d?o?o({amount:n,locale:t}):(0,r.formatPrice)({amount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:u}):void 0;return{price:h,basePrice:D,discount:c,discountAmount:l}}
+"use strict";var S=Object.create;var l=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var v=(e,n)=>{for(var i in n)l(e,i,{get:n[i],enumerable:!0})},g=(e,n,i,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of x(n))!I.call(e,t)&&t!==i&&l(e,t,{get:()=>n[t],enumerable:!(a=T(n,t))||a.enumerable});return e};var C=(e,n,i)=>(i=e!=null?S(P(e)):{},g(n||!e||!e.__esModule?l(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>g(l({},"__esModule",{value:!0}),e);var B={};v(B,{formatVariantPrice:()=>_});module.exports=w(B);var y=C(require("decimal.js")),r=require("../../helpers/index.js");function _({amount:e,baseAmount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:d,customFormatPrice:o}){if(typeof Intl>"u")return{price:`${r.PRICE_SYMBOL[t]}${e}`,basePrice:`${r.PRICE_SYMBOL[t]}${n}`,discount:`${r.PRICE_SYMBOL[t]}${n-e||0}`};const p=n>e;let c=null;const u=(0,r.languageTerritory)(t);if(u){const s=new Intl.NumberFormat(u,{style:"percent"});c=p?s.format((n-e)/n):null}let m;if(p){const s=new y.default(n).sub(e||0).toNumber();m=o?o({amount:s,locale:t}):(0,r.formatPrice)({amount:s,currencyDisplay:a,currencyCode:i||"USD",locale:t,maximumFractionDigits:2})}const h=o?o({amount:e,locale:t}):(0,r.formatPrice)({amount:e,currencyCode:i,currencyDisplay:a,locale:t,removeTrailingZeros:d}),D=p?o?o({amount:n,locale:t}):(0,r.formatPrice)({amount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:d}):void 0;return{price:h,basePrice:D,discount:c,discountAmount:m}}
 //# sourceMappingURL=shelfDisplay.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n  amount: number\n  isDigits?: boolean\n  withOutSymbol?: boolean\n  locale?: string\n  forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n  customFormatPrice,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n  customFormatPrice?: FormattedPriceFunc\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = customFormatPrice\n      ? customFormatPrice({ amount: savePriceAmount, locale })\n      : formatPrice({\n          amount: savePriceAmount,\n          currencyDisplay,\n          currencyCode: currencyCode || 'USD',\n          locale,\n          maximumFractionDigits: 2,\n        })\n  }\n\n  const price = customFormatPrice\n    ? customFormatPrice({ amount, locale })\n    : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? customFormatPrice\n      ? customFormatPrice({ amount: baseAmount, locale })\n      : formatPrice({\n          amount: baseAmount,\n          currencyCode,\n          currencyDisplay,\n          locale,\n          maximumFractionDigits,\n          minimumFractionDigits,\n          removeTrailingZeros,\n        })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n  custom_bg_image?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /**\n   * \u6309\u94AE\u4E8B\u4EF6\n   * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n   */\n  event?: EventType\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n  formatPrice?: FormattedPriceFunc\n  /**\n   * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n   */\n  renderOriginalPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n    }\n  ) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n   * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n   */\n  renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n   */\n  renderPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n      variant: any\n      coupon: any\n      isSoldOut: boolean\n    }\n  ) => React.ReactNode\n}\n"],
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n  amount: number\n  isDigits?: boolean\n  withOutSymbol?: boolean\n  locale?: string\n  forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n  customFormatPrice,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n  customFormatPrice?: FormattedPriceFunc\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = customFormatPrice\n      ? customFormatPrice({ amount: savePriceAmount, locale })\n      : formatPrice({\n          amount: savePriceAmount,\n          currencyDisplay,\n          currencyCode: currencyCode || 'USD',\n          locale,\n          maximumFractionDigits: 2,\n        })\n  }\n\n  const price = customFormatPrice\n    ? customFormatPrice({ amount, locale })\n    : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? customFormatPrice\n      ? customFormatPrice({ amount: baseAmount, locale })\n      : formatPrice({\n          amount: baseAmount,\n          currencyCode,\n          currencyDisplay,\n          locale,\n          maximumFractionDigits,\n          minimumFractionDigits,\n          removeTrailingZeros,\n        })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n  custom_bg_image?: string\n}\n\nexport interface SocialEndorsementItem {\n  /** \u56FE\u6807\uFF1A\u56FE\u7247 URL \u5B57\u7B26\u4E32\uFF0C\u6216 SVG React \u8282\u70B9 */\n  icon: string | React.ReactNode\n  /** \u65E0\u969C\u788D\u6807\u7B7E */\n  label?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n  /** \u662F\u5426\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u22651025px \u751F\u6548\uFF0C\u4E00\u884C 3 \u4E2A\uFF0C\u22651440px \u4E00\u884C 4 \u4E2A\uFF0C\u22641024px \u4ECD\u4E3A\u8F6E\u64AD\uFF09 */\n  isTile?: boolean\n  /** \u5E73\u94FA\u5E03\u5C40\u4E0B\u6700\u591A\u5C55\u793A\u7684\u884C\u6570\uFF0C\u8D85\u8FC7\u8BE5\u884C\u6570\u65F6\u6298\u53E0\u6536\u8D77\uFF0C\u9700\u70B9\u51FB\u300C\u5C55\u5F00\u300D\u67E5\u770B\u66F4\u591A\u3002\u672A\u8BBE\u7F6E\u5219\u4E0D\u6298\u53E0 */\n  tileMaxRows?: number\n  /** \u5E73\u94FA\u5E03\u5C40\u6298\u53E0\u65F6\u300C\u5C55\u5F00\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show more' */\n  tileExpandText?: string\n  /** \u5E73\u94FA\u5E03\u5C40\u5C55\u5F00\u540E\u300C\u6536\u8D77\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show less' */\n  tileCollapseText?: string\n  /** shelf-prices-tag\uFF08\u6298\u6263\u4EF7\u683C\u6807\u7B7E\uFF09\u662F\u5426\u663E\u793A\uFF0C\u9ED8\u8BA4 false\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  isShowPricesTag?: boolean\n  /** shelf-prices-tag \u6587\u6848\u989C\u8272\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Design Token CSS \u53D8\u91CF\uFF0C\u5982 var(--info-primary-color)\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagTextColor?: string\n  /** shelf-prices-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  pricesTagBgColor?: string\n  /** shelf-items-tag\uFF08\u81EA\u5B9A\u4E49\u6807\u7B7E\uFF09\u6587\u6848\u989C\u8272\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagTextColor?: string\n  /** shelf-items-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n  itemsTagBgColor?: string\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /**\n   * \u6309\u94AE\u4E8B\u4EF6\n   * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n   */\n  event?: EventType\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  /** \u5143\u6570\u636E\uFF1A\u6298\u6263\u6587\u6848\uFF08discounts.off / discountsCopy.off\uFF09\u53CA\u793E\u5A92\u80CC\u4E66\u56FE\u6807\uFF08socialEndorsements: SocialEndorsementItem[]\uFF09 */\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n  formatPrice?: FormattedPriceFunc\n  /**\n   * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n   */\n  renderOriginalPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n    }\n  ) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n   * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n   */\n  renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n  /**\n   * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n   * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n   * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n   * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n   */\n  renderPrice?: (\n    item: ShelfDisplayItem,\n    priceInfo: {\n      price: string\n      basePrice: string | undefined\n      discount: string | null\n      discountAmount: string | undefined\n      variant: any\n      coupon: any\n      isSoldOut: boolean\n    }\n  ) => React.ReactNode\n}\n"],
   "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoB,yBAGpBC,EAA6D,kCAUtD,SAASH,EAAmB,CACjC,OAAAI,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACF,EAUG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAG,eAAaJ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAG,eAAaI,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAG,eAAaG,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcR,EAAaD,EACjC,IAAIU,EAAW,KACf,MAAMC,KAAgB,qBAAkBP,CAAM,EAC9C,GAAIO,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQX,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIY,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAI,EAAAC,QAAQd,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBL,EACbA,EAAkB,CAAE,OAAQM,EAAiB,OAAAV,CAAO,CAAC,KACrD,eAAY,CACV,OAAQU,EACR,gBAAAX,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACP,CAEA,MAAMY,EAAQR,EACVA,EAAkB,CAAE,OAAAR,EAAQ,OAAAI,CAAO,CAAC,KACpC,eAAY,CAAE,OAAAJ,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAChFU,EAAYR,EACdD,EACEA,EAAkB,CAAE,OAAQP,EAAY,OAAAG,CAAO,CAAC,KAChD,eAAY,CACV,OAAQH,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACH,OAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,SAAAP,EAAU,eAAAG,CAAe,CACtD",
   "names": ["shelfDisplay_exports", "__export", "formatVariantPrice", "__toCommonJS", "import_decimal", "import_helpers", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "customFormatPrice", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
 }

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

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

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

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

package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js';
+export type ShelfDisplayHorizontalProps = Omit<ShelfDisplayProps, 'isDisplayGudgments'>;
+declare const _default: React.ForwardRefExoticComponent<Omit<ShelfDisplayHorizontalProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
+    readonly $$typeof: symbol;
+};
+export default _default;