@anker-in/headless-ui 1.1.9-alpha.1765181449209 → 1.1.9-alpha.1765181831416

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  2. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
  3. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  4. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
  5. package/package.json +1 -1
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED
@@ -1,10 +1,10 @@
1
- "use strict";var me=Object.create;var F=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var he=(e,t)=>{for(var i in t)F(e,i,{get:t[i],enumerable:!0})},ce=(e,t,i,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of ue(t))!fe.call(e,c)&&c!==i&&F(e,c,{get:()=>t[c],enumerable:!(m=de(t,c))||m.enumerable});return e};var ee=(e,t,i)=>(i=e!=null?me(xe(e)):{},ce(t||!e||!e.__esModule?F(i,"default",{value:e,enumerable:!0}):i,e)),ve=e=>ce(F({},"__esModule",{value:!0}),e);var be={};he(be,{ShelfDisplayHorizontalItem:()=>ye,ShelfDisplayWrapItem:()=>ge,getProductImage:()=>pe});module.exports=ve(be);var s=require("react/jsx-runtime"),te=require("../AiuiProvider/index.js"),se=require("./shelfDisplay.js"),V=ee(require("../../components/picture.js")),q=ee(require("../../components/badge.js")),f=require("../../helpers/utils.js"),le=require("../../components/text.js"),U=ee(require("../../components/button.js")),oe=require("../../shared/track.js"),ae=require("../../shared/trackUrlRef.js"),ie=require("../../components/heading.js"),ne=require("./handleCoupon.js"),re=require("../../hooks/useExposure.js"),a=require("react");const G="image",M="product_shelf",R=999999999e-2,pe=e=>{const t=e?.sku,i=e?.variants,m=i?.find(w=>w?.sku===t),c=m?.image?.url||i?.[0]?.image?.url||"",b=m?.image?.altText||i?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:c,altText:b}},ge=({data:e,configuration:t})=>{const{isDisplayBackImage:i=!1,itemShape:m,metafields:c,isTopTag:b=!1,isShowTag:w,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:z,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}=(0,te.useAiuiContext)(),{discounts:A,discountsCopy:$}=c||{},H=(0,a.useRef)(null),[L,n]=(0,a.useState)([]),[P,J]=(0,a.useState)(""),K=(l,x,u,Z)=>t?.event?.primaryButton?.(l,x+1,u,Z),Q=(l,x,u,Z)=>t?.event?.secondaryButton?.(l,x+1,u,Z),r=(0,a.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(x=>x?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),k=r?.id?.split?.("/")||[],j=k?.[k?.length-1],W=!r?.availableForSale&&(r?.price?.amount===R||r?.price===R),g=(0,a.useMemo)(()=>(0,ne.getCouponFromVariant)({variant:r,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}),[r,N,B,C,I,D]),O=!!(h&&g),E=e?.price?.currencyCode||"USD",T=(0,a.useMemo)(()=>(0,se.formatVariantPrice)({locale:v,amount:O?g?.variant_price4wscode:r?.price,baseAmount:O?r?.price:0,currencyCode:E}),[E,v,O,g?.variant_price4wscode,r]),{price:X,basePrice:Y,discount:d}=T,{imageUrl:_,altText:S}=pe(e),y=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,a.useEffect)(()=>{let l=[];if(d){const u=`${d}${A?.off||$?.off||""}`;J(u),l.push(u)}const x=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);n(l.concat(x))},[e?.tags,d,A?.off,$?.off]),(0,re.useExposure)(H,{componentType:G,componentName:M,componentTitle:y,componentDescription:o,position:t?.index+1});const p=()=>(0,s.jsxs)(s.Fragment,{children:[w&&L?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((l,x)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:l},x))}):null,y?(0,s.jsx)(ie.Heading,{as:"h3",title:y||"",size:2,className:"shelf-display-product-title line-clamp-2",html:y||""}):null,o?(0,s.jsx)(le.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:W?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:z?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&X||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&Y||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(U.default,{variant:"secondary",onClick:()=>Q(e,t?.index,t,g),className:`
1
+ "use strict";var me=Object.create;var F=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var he=(e,t)=>{for(var i in t)F(e,i,{get:t[i],enumerable:!0})},ce=(e,t,i,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of ue(t))!fe.call(e,m)&&m!==i&&F(e,m,{get:()=>t[m],enumerable:!(d=de(t,m))||d.enumerable});return e};var ee=(e,t,i)=>(i=e!=null?me(xe(e)):{},ce(t||!e||!e.__esModule?F(i,"default",{value:e,enumerable:!0}):i,e)),ve=e=>ce(F({},"__esModule",{value:!0}),e);var be={};he(be,{ShelfDisplayHorizontalItem:()=>ye,ShelfDisplayWrapItem:()=>ge,getProductImage:()=>pe});module.exports=ve(be);var s=require("react/jsx-runtime"),te=require("../AiuiProvider/index.js"),se=require("./shelfDisplay.js"),V=ee(require("../../components/picture.js")),q=ee(require("../../components/badge.js")),f=require("../../helpers/utils.js"),le=require("../../components/text.js"),U=ee(require("../../components/button.js")),oe=require("../../shared/track.js"),ae=require("../../shared/trackUrlRef.js"),ie=require("../../components/heading.js"),ne=require("./handleCoupon.js"),re=require("../../hooks/useExposure.js"),a=require("react");const G="image",M="product_shelf",R=999999999e-2,pe=e=>{const t=e?.sku,i=e?.variants,d=i?.find(k=>k?.sku===t),m=d?.image?.url||i?.[0]?.image?.url||"",w=d?.image?.altText||i?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:m,altText:w}},ge=({data:e,configuration:t})=>{const{isDisplayBackImage:i=!1,itemShape:d,metafields:m,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:v}=t||{},{locale:g="us",copyWriting:z,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}=(0,te.useAiuiContext)(),{discounts:A,discountsCopy:$}=m||{},H=(0,a.useRef)(null),[L,n]=(0,a.useState)([]),[P,J]=(0,a.useState)(""),K=(l,p,x,Z)=>t?.event?.primaryButton?.(l,p+1,x,Z),Q=(l,p,x,Z)=>t?.event?.secondaryButton?.(l,p+1,x,Z),r=(0,a.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(p=>p?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),h=r?.id?.split?.("/")||[],j=h?.[h?.length-1],W=!r?.availableForSale&&(r?.price?.amount===R||r?.price===R),y=(0,a.useMemo)(()=>(0,ne.getCouponFromVariant)({variant:r,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}),[r,N,B,C,I,D]),O=!!(v&&y),E=e?.price?.currencyCode||"USD",T=(0,a.useMemo)(()=>(0,se.formatVariantPrice)({locale:g,amount:O?y?.variant_price4wscode:r?.price,baseAmount:O?r?.price:0,currencyCode:E}),[E,g,O,y?.variant_price4wscode,r]),{price:X,basePrice:Y,discount:u}=T,{imageUrl:_,altText:S}=pe(e),b=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,a.useEffect)(()=>{let l=[];if(u){const x=`${u}${A?.off||$?.off||""}`;J(x),l.push(x)}const p=e?.tags?.filter?.(x=>x?.startsWith?.("CLtag"))?.map?.(x=>x?.replace?.("CLtag:",""))?.slice?.(0,u?1:2);n(l.concat(p))},[e?.tags,u,A?.off,$?.off]),(0,re.useExposure)(H,{componentType:G,componentName:M,componentTitle:b,componentDescription:o,position:t?.index+1});const c=()=>(0,s.jsxs)(s.Fragment,{children:[k&&L?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((l,p)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:l},p))}):null,b?(0,s.jsx)(ie.Heading,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title line-clamp-2",html:b||""}):null,o?(0,s.jsx)(le.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:W?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:z?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&X||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&Y||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(U.default,{variant:"secondary",onClick:()=>Q(e,t?.index,t,y),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(U.default,{variant:"primary",onClick:()=>K(e,t?.index,t,g),className:`
3
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(U.default,{variant:"primary",onClick:()=>K(e,t?.index,t,y),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
5
- `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:H,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",m==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:i?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(V.default,{source:_,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:p()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[P&&b&&(0,s.jsx)(q.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:P||""}),(0,s.jsx)("div",{className:(0,f.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":y,target:t?.target,href:(0,ae.trackUrlRef)(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${j}`,`${G}_${M}`),onClick:()=>{(0,oe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:_,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),p()]})},e?.id||e?.handle)},ye=({data:e,configuration:t})=>{const{itemShape:i,itemLength:m,metafields:c}=t||{},{discounts:b,discountsCopy:w}=c||{},{locale:h="us",copyWriting:v,inApp:z,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}=(0,te.useAiuiContext)(),[D,A]=(0,a.useState)([]),$=(0,a.useRef)(null),H=(o,p,l)=>t?.event?.primaryButton?.(o,p+1,l),L=(o,p,l)=>t?.event?.secondaryButton?.(o,p+1,l),n=(0,a.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(p=>p?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),P=n?.id?.split?.("/")||[],J=P?.[P?.length-1],K=!n?.availableForSale&&(n?.price?.amount===R||n?.price===R),Q=t?.isShowTag,r=t?.isShowOriginalPrice,k=(0,a.useMemo)(()=>(0,ne.getCouponFromVariant)({variant:n,inApp:z,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}),[n,z,N,B,C,I]),j=!!(r&&k),W=e?.price?.currencyCode||"USD",g=(0,a.useMemo)(()=>(0,se.formatVariantPrice)({locale:h,amount:j?k?.variant_price4wscode:n?.price,baseAmount:j?n?.price:0,currencyCode:W}),[W,h,j,k?.variant_price4wscode,n]),{price:O,basePrice:E,discount:T}=g,{imageUrl:X,altText:Y}=pe(e),d=e?.custom_name||e?.title,_=e?.custom_description||e?.description;(0,re.useExposure)($,{componentType:G,componentName:M,componentTitle:d,componentDescription:_,position:t?.index+1});const S=()=>m>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},y=()=>m>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return(0,a.useEffect)(()=>{let o=[];if(T){const l=`${T}${b?.off||w?.off||""}`;o.push(l)}const p=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,T?1:2);A(o.concat(p))},[e?.tags,T,b?.off,w?.off]),(0,s.jsx)("div",{ref:$,className:(0,f.cn)(S().wrap,i==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,f.cn)(y(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(S().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":d,target:t?.target,href:(0,ae.trackUrlRef)(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}?variant=${J}`,`${G}_${M}`),onClick:()=>{(0,oe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:X,alt:Y,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,f.cn)("flex flex-col items-start justify-center",S().boxItem),children:[Q&&D?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:D?.map?.((o,p)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:o},p))}):null,d?(0,s.jsx)(ie.Heading,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:d||""}):null,_?(0,s.jsx)(le.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:_||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:K?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&O||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&E||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(U.default,{variant:"secondary",onClick:()=>L(e,t?.index,t),className:`
5
+ `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:H,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",d==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:i?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(V.default,{source:_,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[P&&w&&(0,s.jsx)(q.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:P||""}),(0,s.jsx)("div",{className:(0,f.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":b,target:t?.target,href:(0,ae.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${j}`,`${G}_${M}`),onClick:()=>{(0,oe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:_,alt:S,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c()]})},e?.id||e?.handle)},ye=({data:e,configuration:t})=>{const{itemShape:i,itemLength:d,metafields:m}=t||{},{discounts:w,discountsCopy:k}=m||{},{locale:v="us",copyWriting:g,inApp:z,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}=(0,te.useAiuiContext)(),[D,A]=(0,a.useState)([]),$=(0,a.useRef)(null),H=(o,c,l,p)=>t?.event?.primaryButton?.(o,c+1,l,p),L=(o,c,l,p)=>t?.event?.secondaryButton?.(o,c+1,l,p),n=(0,a.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(c=>c?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),P=n?.id?.split?.("/")||[],J=P?.[P?.length-1],K=!n?.availableForSale&&(n?.price?.amount===R||n?.price===R),Q=t?.isShowTag,r=t?.isShowOriginalPrice,h=(0,a.useMemo)(()=>(0,ne.getCouponFromVariant)({variant:n,inApp:z,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}),[n,z,N,B,C,I]),j=!!(r&&h),W=e?.price?.currencyCode||"USD",y=(0,a.useMemo)(()=>(0,se.formatVariantPrice)({locale:v,amount:j?h?.variant_price4wscode:n?.price,baseAmount:j?n?.price:0,currencyCode:W}),[W,v,j,h?.variant_price4wscode,n]),{price:O,basePrice:E,discount:T}=y,{imageUrl:X,altText:Y}=pe(e),u=e?.custom_name||e?.title,_=e?.custom_description||e?.description;(0,re.useExposure)($,{componentType:G,componentName:M,componentTitle:u,componentDescription:_,position:t?.index+1});const S=()=>d>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},b=()=>d>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return(0,a.useEffect)(()=>{let o=[];if(T){const l=`${T}${w?.off||k?.off||""}`;o.push(l)}const c=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,T?1:2);A(o.concat(c))},[e?.tags,T,w?.off,k?.off]),(0,s.jsx)("div",{ref:$,className:(0,f.cn)(S().wrap,i==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,f.cn)(b(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(S().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":u,target:t?.target,href:(0,ae.trackUrlRef)(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${J}`,`${G}_${M}`),onClick:()=>{(0,oe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:X,alt:Y,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,f.cn)("flex flex-col items-start justify-center",S().boxItem),children:[Q&&D?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:D?.map?.((o,c)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:o},c))}):null,u?(0,s.jsx)(ie.Heading,{as:"h3",title:u||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:u||""}):null,_?(0,s.jsx)(le.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:_||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:K?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&O||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&E||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(U.default,{variant:"secondary",onClick:()=>L(e,t?.index,t,h),className:`
6
6
  ${t.direction==="vertical"?"w-full":""}
7
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(U.default,{variant:"primary",onClick:()=>H(e,t?.index,t),className:`
7
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(U.default,{variant:"primary",onClick:()=>H(e,t?.index,t,h),className:`
8
8
  ${t.direction==="vertical"?"w-full":""}
9
9
  `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
10
10
  //# sourceMappingURL=shelfDisplayItem.js.map
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\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 = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_handleCoupon", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED
@@ -1,10 +1,10 @@
1
- import{Fragment as te,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as se}from"../AiuiProvider/index.js";import{formatVariantPrice as le}from"./shelfDisplay.js";import Y from"../../components/picture.js";import Z from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as oe}from"../../components/text.js";import F from"../../components/button.js";import{gaTrack as ae}from"../../shared/track.js";import{trackUrlRef as ie}from"../../shared/trackUrlRef.js";import{Heading as ne}from"../../components/heading.js";import{getCouponFromVariant as re}from"./handleCoupon.js";import{useExposure as pe}from"../../hooks/useExposure.js";import{useRef as ce,useEffect as me,useMemo as S,useState as ee}from"react";const G="image",M="product_shelf",R=999999999e-2,de=e=>{const t=e?.sku,u=e?.variants,x=u?.find(b=>b?.sku===t),N=x?.image?.url||u?.[0]?.image?.url||"",y=x?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:N,altText:y}},Ne=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:x,metafields:N,isTopTag:y=!1,isShowTag:b,isShowOriginalPrice:f}=t||{},{locale:h="us",copyWriting:z,inApp:B,udcGroupIds:C,udcWhiteGroupIds:I,targetCode:D,channel:$}=se(),{discounts:A,discountsCopy:P}=N||{},H=ce(null),[L,a]=ee([]),[j,V]=ee(""),q=(l,c,p,X)=>t?.event?.primaryButton?.(l,c+1,p,X),J=(l,c,p,X)=>t?.event?.secondaryButton?.(l,c+1,p,X),i=S(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(c=>c?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),w=i?.id?.split?.("/")||[],O=w?.[w?.length-1],W=!i?.availableForSale&&(i?.price?.amount===R||i?.price===R),v=S(()=>re({variant:i,inApp:B,udcGroupIds:C,udcWhiteGroupIds:I,targetCode:D,channel:$}),[i,B,C,I,D,$]),U=!!(f&&v),E=e?.price?.currencyCode||"USD",k=S(()=>le({locale:h,amount:U?v?.variant_price4wscode:i?.price,baseAmount:U?i?.price:0,currencyCode:E}),[E,h,U,v?.variant_price4wscode,i]),{price:K,basePrice:Q,discount:r}=k,{imageUrl:T,altText:_}=de(e),g=e?.custom_name||e?.title,o=e?.custom_description||e?.description;me(()=>{let l=[];if(r){const p=`${r}${A?.off||P?.off||""}`;V(p),l.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,r?1:2);a(l.concat(c))},[e?.tags,r,A?.off,P?.off]),pe(H,{componentType:G,componentName:M,componentTitle:g,componentDescription:o,position:t?.index+1});const n=()=>m(te,{children:[b&&L?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((l,c)=>s(Z,{className:"shelf-items-tag",children:l},c))}):null,g?s(ne,{as:"h3",title:g||"",size:2,className:"shelf-display-product-title line-clamp-2",html:g||""}):null,o?s(oe,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:W?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:z?.soldOutText}):m(te,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&K||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&Q||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>J(e,t?.index,t,v),className:`
1
+ import{Fragment as te,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as se}from"../AiuiProvider/index.js";import{formatVariantPrice as le}from"./shelfDisplay.js";import Y from"../../components/picture.js";import Z from"../../components/badge.js";import{cn as u}from"../../helpers/utils.js";import{Text as oe}from"../../components/text.js";import F from"../../components/button.js";import{gaTrack as ae}from"../../shared/track.js";import{trackUrlRef as ie}from"../../shared/trackUrlRef.js";import{Heading as ne}from"../../components/heading.js";import{getCouponFromVariant as re}from"./handleCoupon.js";import{useExposure as pe}from"../../hooks/useExposure.js";import{useRef as ce,useEffect as me,useMemo as S,useState as ee}from"react";const G="image",M="product_shelf",R=999999999e-2,de=e=>{const t=e?.sku,x=e?.variants,f=x?.find(w=>w?.sku===t),N=f?.image?.url||x?.[0]?.image?.url||"",b=f?.image?.altText||x?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:N,altText:b}},Ne=({data:e,configuration:t})=>{const{isDisplayBackImage:x=!1,itemShape:f,metafields:N,isTopTag:b=!1,isShowTag:w,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:z,inApp:B,udcGroupIds:C,udcWhiteGroupIds:I,targetCode:D,channel:$}=se(),{discounts:A,discountsCopy:P}=N||{},H=ce(null),[L,a]=ee([]),[j,V]=ee(""),q=(l,n,c,X)=>t?.event?.primaryButton?.(l,n+1,c,X),J=(l,n,c,X)=>t?.event?.secondaryButton?.(l,n+1,c,X),i=S(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(n=>n?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),d=i?.id?.split?.("/")||[],O=d?.[d?.length-1],W=!i?.availableForSale&&(i?.price?.amount===R||i?.price===R),g=S(()=>re({variant:i,inApp:B,udcGroupIds:C,udcWhiteGroupIds:I,targetCode:D,channel:$}),[i,B,C,I,D,$]),U=!!(h&&g),E=e?.price?.currencyCode||"USD",k=S(()=>le({locale:v,amount:U?g?.variant_price4wscode:i?.price,baseAmount:U?i?.price:0,currencyCode:E}),[E,v,U,g?.variant_price4wscode,i]),{price:K,basePrice:Q,discount:p}=k,{imageUrl:T,altText:_}=de(e),y=e?.custom_name||e?.title,o=e?.custom_description||e?.description;me(()=>{let l=[];if(p){const c=`${p}${A?.off||P?.off||""}`;V(c),l.push(c)}const n=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,p?1:2);a(l.concat(n))},[e?.tags,p,A?.off,P?.off]),pe(H,{componentType:G,componentName:M,componentTitle:y,componentDescription:o,position:t?.index+1});const r=()=>m(te,{children:[w&&L?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((l,n)=>s(Z,{className:"shelf-items-tag",children:l},n))}):null,y?s(ne,{as:"h3",title:y||"",size:2,className:"shelf-display-product-title line-clamp-2",html:y||""}):null,o?s(oe,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:W?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:z?.soldOutText}):m(te,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&K||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&Q||""})]})}),m("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>J(e,t?.index,t,g),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>q(e,t?.index,t,v),className:`
3
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>q(e,t?.index,t,g),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
5
- `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:H,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Y,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:n()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[j&&y&&s(Z,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:j||""}),s("div",{className:d("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":g,target:t?.target,href:ie(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}?variant=${O}`,`${G}_${M}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(Y,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),n()]})},e?.id||e?.handle)},Be=({data:e,configuration:t})=>{const{itemShape:u,itemLength:x,metafields:N}=t||{},{discounts:y,discountsCopy:b}=N||{},{locale:f="us",copyWriting:h,inApp:z,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}=se(),[$,A]=ee([]),P=ce(null),H=(o,n,l)=>t?.event?.primaryButton?.(o,n+1,l),L=(o,n,l)=>t?.event?.secondaryButton?.(o,n+1,l),a=S(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(n=>n?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),j=a?.id?.split?.("/")||[],V=j?.[j?.length-1],q=!a?.availableForSale&&(a?.price?.amount===R||a?.price===R),J=t?.isShowTag,i=t?.isShowOriginalPrice,w=S(()=>re({variant:a,inApp:z,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}),[a,z,B,C,I,D]),O=!!(i&&w),W=e?.price?.currencyCode||"USD",v=S(()=>le({locale:f,amount:O?w?.variant_price4wscode:a?.price,baseAmount:O?a?.price:0,currencyCode:W}),[W,f,O,w?.variant_price4wscode,a]),{price:U,basePrice:E,discount:k}=v,{imageUrl:K,altText:Q}=de(e),r=e?.custom_name||e?.title,T=e?.custom_description||e?.description;pe(P,{componentType:G,componentName:M,componentTitle:r,componentDescription:T,position:t?.index+1});const _=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},g=()=>x>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return me(()=>{let o=[];if(k){const l=`${k}${y?.off||b?.off||""}`;o.push(l)}const n=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);A(o.concat(n))},[e?.tags,k,y?.off,b?.off]),s("div",{ref:P,className:d(_().wrap,u==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:d(g(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(_().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":r,target:t?.target,href:ie(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}?variant=${V}`,`${G}_${M}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Y,{source:K,alt:Q,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:d("flex flex-col items-start justify-center",_().boxItem),children:[J&&$?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:$?.map?.((o,n)=>s(Z,{className:"shelf-items-tag",children:o},n))}):null,r?s(ne,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,T?s(oe,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:q?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):m(te,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&U||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&E||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>L(e,t?.index,t),className:`
5
+ `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:H,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:x?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Y,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[j&&b&&s(Z,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:j||""}),s("div",{className:u("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":y,target:t?.target,href:ie(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${O}`,`${G}_${M}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(Y,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},Be=({data:e,configuration:t})=>{const{itemShape:x,itemLength:f,metafields:N}=t||{},{discounts:b,discountsCopy:w}=N||{},{locale:h="us",copyWriting:v,inApp:z,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}=se(),[$,A]=ee([]),P=ce(null),H=(o,r,l,n)=>t?.event?.primaryButton?.(o,r+1,l,n),L=(o,r,l,n)=>t?.event?.secondaryButton?.(o,r+1,l,n),a=S(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(r=>r?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),j=a?.id?.split?.("/")||[],V=j?.[j?.length-1],q=!a?.availableForSale&&(a?.price?.amount===R||a?.price===R),J=t?.isShowTag,i=t?.isShowOriginalPrice,d=S(()=>re({variant:a,inApp:z,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}),[a,z,B,C,I,D]),O=!!(i&&d),W=e?.price?.currencyCode||"USD",g=S(()=>le({locale:h,amount:O?d?.variant_price4wscode:a?.price,baseAmount:O?a?.price:0,currencyCode:W}),[W,h,O,d?.variant_price4wscode,a]),{price:U,basePrice:E,discount:k}=g,{imageUrl:K,altText:Q}=de(e),p=e?.custom_name||e?.title,T=e?.custom_description||e?.description;pe(P,{componentType:G,componentName:M,componentTitle:p,componentDescription:T,position:t?.index+1});const _=()=>f>=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"},y=()=>f>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return me(()=>{let o=[];if(k){const l=`${k}${b?.off||w?.off||""}`;o.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);A(o.concat(r))},[e?.tags,k,b?.off,w?.off]),s("div",{ref:P,className:u(_().wrap,x==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:u(y(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(_().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":p,target:t?.target,href:ie(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}?variant=${V}`,`${G}_${M}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Y,{source:K,alt:Q,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:u("flex flex-col items-start justify-center",_().boxItem),children:[J&&$?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:$?.map?.((o,r)=>s(Z,{className:"shelf-items-tag",children:o},r))}):null,p?s(ne,{as:"h3",title:p||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:p||""}):null,T?s(oe,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:q?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):m(te,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&U||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&E||""})]})}),m("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>L(e,t?.index,t,d),className:`
6
6
  ${t.direction==="vertical"?"w-full":""}
7
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>H(e,t?.index,t),className:`
7
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>H(e,t?.index,t,d),className:`
8
8
  ${t.direction==="vertical"?"w-full":""}
9
9
  `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Be as ShelfDisplayHorizontalItem,Ne as ShelfDisplayWrapItem,de as getProductImage};
10
10
  //# sourceMappingURL=shelfDisplayItem.js.map
package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\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 = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\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 }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.9-alpha.1765181449209",
3
+ "version": "1.1.9-alpha.1765181831416",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",