@anker-in/headless-ui 1.3.76 → 1.3.77
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.
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +1 -1
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/SwiperBox/buildSsrSlideCss.d.ts +13 -0
- package/dist/cjs/biz-components/SwiperBox/buildSsrSlideCss.js +2 -0
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +1 -1
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/SwiperBox/buildSsrSlideCss.d.ts +13 -0
- package/dist/esm/biz-components/SwiperBox/buildSsrSlideCss.js +2 -0
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/package.json +1 -1
- package/style.css +16 -73
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var y=Object.create;var t=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var h=(e,s)=>{for(var i in s)t(e,i,{get:s[i],enumerable:!0})},u=(e,s,i,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of M(s))!N.call(e,r)&&r!==i&&t(e,r,{get:()=>s[r],enumerable:!(n=P(s,r))||n.enumerable});return e};var k=(e,s,i)=>(i=e!=null?y(B(e)):{},u(s||!e||!e.__esModule?t(i,"default",{value:e,enumerable:!0}):i,e)),x=e=>u(t({},"__esModule",{value:!0}),e);var C={};h(C,{default:()=>$});module.exports=x(C);var o=require("react/jsx-runtime"),l=k(require("react")),p=require("swiper/react"),a=require("swiper/modules"),G=require("swiper/css"),T=require("swiper/css/pagination"),g=require("../SwiperBox/buildSsrSlideCss.js");const S=l.default.forwardRef(({data:e,Slide:s,id:i,isHalf:n,paginationClassName:r},R)=>{const c=`swiper-ssr-${(0,l.useId)().replace(/[^a-zA-Z0-9_-]/g,"")}`,m=Math.min(6,e?.list?.length||6),f={0:{spaceBetween:16,freeMode:!1,slidesPerView:n?2:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:n?2:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:m,slidesPerGroup:m}},d=(0,g.buildSsrSlideCss)(`.${c}`,f);return(0,o.jsxs)(p.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1,el:`.swiper-pagination-${i}`},className:`!overflow-visible ${d?c:""} ${r||""}`,modules:[a.FreeMode,a.Mousewheel,a.Pagination],breakpoints:f,children:[d&&(0,o.jsx)("style",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:d}}),e?.list?.map((b,w)=>(0,o.jsx)(p.SwiperSlide,{className:"!h-[unset]",children:(0,o.jsx)(s,{data:b,configuration:{...e?.configuration,index:w}})},i+"SwiperSlide"+w)),(0,o.jsx)("div",{className:`swiper-pagination-${i} swiper-pagination`})]})});S.displayName="SwiperBox";var $=S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!S.call(e,n)&&n!==a&&d(e,n,{get:()=>t[n],enumerable:!(i=T(t,n))||i.enumerable});return e};var u=(e,t,a)=>(a=e!=null?L(M(e)):{},k(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),
|
|
1
|
+
"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!S.call(e,n)&&n!==a&&d(e,n,{get:()=>t[n],enumerable:!(i=T(t,n))||i.enumerable});return e};var u=(e,t,a)=>(a=e!=null?L(M(e)):{},k(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),H=e=>k(d({},"__esModule",{value:!0}),e);var F={};D(F,{default:()=>R});module.exports=H(F);var o=require("react/jsx-runtime"),l=u(require("react")),s=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),N=require("../../shared/Styles.js"),I=u(require("../Title/index.js")),x=u(require("./SwiperCategory.js")),h=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const m="image",p="category_banner",g=5,P=3,j=(e,t)=>{const a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a},A=({data:e,configuration:t})=>{const a=(0,l.useRef)(null);return(0,h.useExposure)(a,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,o.jsxs)("div",{ref:a,className:(0,s.cn)("tablet:p-3 laptop:p-4 desktop:p-6","bg-container-primary hover:bg-info-white group box-border flex h-full cursor-pointer flex-col justify-start overflow-hidden duration-300","desktop:gap-2 gap-1","rounded-box"),children:[(0,o.jsx)("div",{className:"flex items-center justify-center transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{"aria-label":e?.name,href:(0,y.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(f.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] desktop:size-[116px] lg-desktop:size-[146px] size-[72px]",imgClassName:"size-full object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})},z=({data:e,configuration:t,index:a,isFirstItemLarger:i})=>{const n=(0,l.useRef)(null);(0,h.useExposure)(n,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1});const r=a===0;return(0,o.jsxs)("div",{ref:n,className:(0,s.cn)("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",i?(0,s.cn)("p-4",r?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4","rounded-box"),children:[(0,o.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-position":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,o.jsx)(f.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,s.cn)("m-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",i?(0,s.cn)(r?"size-full max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,o.jsx)("p",{className:(0,s.cn)("text-info-primary w-full text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},B=({data:e,configuration:t})=>{const i=(t?.totalCategories??0)<=g;return(0,o.jsx)("div",{className:`gap-3 ${i?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((n,r)=>(0,o.jsx)(z,{index:r,data:n,configuration:t,isFirstItemLarger:i},r))})},w=l.default.forwardRef((e,t)=>{const{data:a,className:i="",key:n,event:r,..._}=e,c=(a?.isShowSelect?a?.products:a?.productData)||[],b=c.length>g,v=c.length,$=j(c,b?P:g),C=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>C.current),(0,o.jsxs)("div",{..._,ref:C,className:(0,s.cn)("w-full overflow-hidden",i,{"aiui-dark":a?.theme==="dark"}),children:[a?.title&&(0,o.jsx)(I.default,{data:{title:a?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(x.default,{id:`Category${n}`,Slide:A,data:{list:c,configuration:{shape:a?.shape,event:r,title:a?.title,totalCategories:v}},paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(x.default,{id:`Category1${n}`,Slide:B,data:{list:$,configuration:{shape:a?.shape,event:r,title:a?.title,totalCategories:v}},isHalf:b,paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"h-7"})]})});w.displayName="Category";var R=(0,N.withLayout)(w);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var ke=Object.create;var _=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var ke=Object.create;var _=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var Le=(s,o)=>{for(var r in o)_(s,r,{get:o[r],enumerable:!0})},$=(s,o,r,g)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of Ce(o))!De.call(s,p)&&p!==r&&_(s,p,{get:()=>o[p],enumerable:!(g=xe(o,p))||g.enumerable});return s};var x=(s,o,r)=>(r=s!=null?ke(Ie(s)):{},$(o||!s||!s.__esModule?_(r,"default",{value:s,enumerable:!0}):r,s)),Me=s=>$(_({},"__esModule",{value:!0}),s);var Ee={};Le(Ee,{default:()=>Pe});module.exports=Me(Ee);var n=require("react/jsx-runtime"),a=x(require("react")),v=require("../../helpers/utils.js"),m=require("../../components/tabs.js"),j=x(require("../Title/index.js")),Q=x(require("../SwiperBox/index.js")),W=require("../../shared/Styles.js"),C=require("../../shared/track.js"),y=require("react-responsive"),F=require("../../hooks/useRollout.js"),h=require("./shelfDisplayItem.js");const Re="image",Ne="product_shelf",O=s=>s==null?"default":String(s).replace(/[^a-zA-Z0-9_-]/g,"")||"default",Z=a.default.forwardRef(({data:s,event:o,buildData:r,breakpoints:g,className:p="",recommendedData:w,target:G="_self",metafields:J,isDisplayGudgments:I=!1,isDisplayBackImage:K=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},oe)=>{const{productsTab:d=[],productsCard:ie=[],title:D,isShowTab:b=!0,tabShape:re="square",isShowTag:le=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:me=!1,isTile:pe=!1,tileMaxRows:S,tileExpandText:de="Show more",tileCollapseText:fe="Show less",...ue}=s,L=(0,a.useRef)(!1),M=(0,a.useRef)(null),he=(0,a.useId)(),[ge,we]=(0,a.useState)(!1);(0,a.useEffect)(()=>{we(!0)},[]);const _e=(0,y.useMediaQuery)({query:"(max-width: 768px)"}),ve=(0,y.useMediaQuery)({query:"(min-width: 1025px)"}),ye=(0,y.useMediaQuery)({query:"(min-width: 1440px)"}),[T,be]=(0,a.useState)(!1),[Se,R]=(0,F.useRollout)({threshold:0});(0,a.useImperativeHandle)(oe,()=>M.current);const N=()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:w?.map((e,l)=>{const t=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:l+1}})}})};(0,a.useEffect)(()=>{R&&w?.length&&!L.current&&(L.current=!0,N())},[R,w]);const P=(e,l)=>{if(l){const t=w?.map?.(i=>({...i,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const c=e?.map?.(t=>{const i=r?.products?.find(f=>f?.handle===t?.handle);if(i)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...i}})?.filter(t=>t);return c?.length?c:[]},E=O(he),V=(e,l)=>{const c={...ue,event:o,isShowTag:le,isShowOriginalPrice:ce,target:G,metafields:J,itemLength:e.length,isDisplayBackImage:K,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne};if(pe&&ge&&ve){const k=ye?4:3,H=typeof S=="number"&&S>0,z=H?S*k:e.length,q=H&&e.length>z,Te=q&&!T?e.slice(0,z):e;return(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:(0,v.cn)("shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4",b?"mt-6":""),children:Te.map((u,A)=>(0,n.jsx)(h.ShelfDisplayWrapItem,{data:u,configuration:{...c,index:A}},u?.id||u?.handle||A))}),q&&(0,n.jsxs)("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[(0,n.jsx)("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>be(u=>!u),children:T?fe:de}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,v.cn)("laptop:size-5 size-4",T&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,n.jsx)("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}const t=e.length<=1&&I,i=!_e&&e.length<=2&&I,f=k=>{switch(k){case 1440:return i?e.length:4;case 1024:return i?e.length:3;default:return i?e.length:2.3}},B=l?`${E}-${O(l)}`:E;return(0,n.jsx)(Q.default,{data:{list:e,configuration:c},id:B,className:`${b?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?h.ShelfDisplayHorizontalItem:h.ShelfDisplayWrapItem,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:g||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:t?1:1.2},768:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f()},1025:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1440)}}},B)};return(0,n.jsxs)("div",{ref:M,...ae,className:(0,v.cn)("shelf-display-wrap text-info-primary w-full",p,{"aiui-dark":s?.theme==="dark"}),children:[D&&(0,n.jsx)(j.default,{data:{title:D}}),(0,n.jsx)("div",{ref:Se,children:b&&d?.length>0?(0,n.jsxs)(m.Tabs,{defaultValue:d?.[0]?.tab,onValueChange:e=>{const l=d?.find(c=>c?.tab===e);if(l){if(!l.isShowRecommendedTab){(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Re,component_name:Ne,component_title:s?.title,component_position:1,navigation:e}});return}N()}},shape:re==="rounded"?"rounded":"square",children:[(0,n.jsx)(m.TabsList,{children:d.map(e=>(0,n.jsx)(m.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),d.map(e=>(0,n.jsx)(m.TabsContent,{value:e?.tab,children:V(P(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):V(P(ie,me))})]})});Z.displayName="ShelfDisplay";var Pe=(0,W.withLayout)(Z);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var ze=Object.create;var fe=Object.defineProperty;var Ae=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var Ee=(e,t)=>{for(var p in t)fe(e,p,{get:t[p],enumerable:!0})},Ie=(e,t,p,T)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Fe(t))!je.call(e,g)&&g!==p&&fe(e,g,{get:()=>t[g],enumerable:!(T=Ae(t,g))||T.enumerable});return e};var Te=(e,t,p)=>(p=e!=null?ze(Me(e)):{},Ie(t||!e||!e.__esModule?fe(p,"default",{value:e,enumerable:!0}):p,e)),Oe=e=>Ie(fe({},"__esModule",{value:!0}),e);var Re={};Ee(Re,{ShelfDisplayHorizontalItem:()=>Ue,ShelfDisplayWrapItem:()=>He,getProductImage:()=>De});module.exports=Oe(Re);var s=require("react/jsx-runtime"),Ne=require("../AiuiProvider/index.js"),Ce=require("./shelfDisplay.js"),xe=Te(require("../../components/picture.js")),ve=Te(require("../../components/badge.js")),k=require("../../helpers/utils.js"),be=require("../../components/text.js"),se=Te(require("../../components/button.js")),Be=require("../../shared/track.js"),Pe=require("../../shared/trackUrlRef.js"),Le=require("../../components/heading.js"),$e=require("../../hooks/useExposure.js"),c=require("react");const ye="image",ge="product_shelf",he=999999999e-2,De=e=>{const t=e?.sku,p=e?.variants,T=p?.find(O=>O?.sku===t),g=T?.image?.url||p?.[0]?.image?.url||"",re=T?.image?.altText||p?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:g,altText:re}},We=({items:e})=>e?.length?(0,s.jsx)("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,p)=>typeof t.icon=="string"?(0,s.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},p):(0,s.jsx)(be.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},p))}):null,He=({data:e,configuration:t})=>{const{isDisplayBackImage:p=!1,itemShape:T,metafields:g,isTopTag:re=!1,isShowTag:O,isShowOriginalPrice:I,isShowShortTitle:ke=!1,isShowPricesTag:z=!1,pricesTagTextColor:W,pricesTagBgColor:H,itemsTagTextColor:w,itemsTagBgColor:K,formatPrice:ie,renderOriginalPrice:Q,renderPriceLabel:we,renderPrice:U}=t||{},{locale:C="es",copyWriting:oe,currencyDisplay:X}=(0,Ne.useAiuiContext)(),{discounts:Y,discountsCopy:le}=g||{},ne=(0,c.useRef)(null),[n,ae]=(0,c.useState)([]),[ce,A]=(0,c.useState)(""),[pe,F]=(0,c.useState)(!1),[_,R]=(0,c.useState)(!1),me=(i,d,u,f)=>{const{primaryFun:b,onAddCart:N,onBuyNow:ee,onLearnMore:te,event:Se}=t||{};if(b){if(b==="AddCart"&&N)return N(i,d+1,u,f);if(b==="BuyNow"&&ee)return ee(i,d+1,u,f);if(b==="LearnMore"&&te)return te(i,d+1,u,f)}Se?.primaryButton?.(i,d+1,u,f)},_e=(i,d,u,f)=>{const{secondaryFun:b,onAddCart:N,onBuyNow:ee,onLearnMore:te,event:Se}=t||{};if(b){if(b==="AddCart"&&N)return N(i,d+1,u,f);if(b==="BuyNow"&&ee)return ee(i,d+1,u,f);if(b==="LearnMore"&&te)return te(i,d+1,u,f)}Se?.secondaryButton?.(i,d+1,u,f)},o=(0,c.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku?i?.find?.(d=>d?.sku===e?.sku)||i[0]:i?.[0]},[e?.sku,e?.variants]),M=o?.id?.split?.("/")||[],B=M?.[M?.length-1],h=!o?.availableForSale||o?.price?.amount===he||o?.price===he,S=o?.coupons?.[0],de=e?.price?.currencyCode||"USD",q=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:C,amount:S?S?.variant_price4wscode:o?.price,baseAmount:S?o?.price:0,currencyCode:de,currencyDisplay:X,customFormatPrice:ie}),[de,C,S,X,o,ie]),{price:j,basePrice:P,discount:L,discountAmount:E}=q,{imageUrl:V,altText:ue}=De(e),G=e?.custom_name||e?.title,$=ke&&o?.metafields?.infos?.page_short_title||G,Z=e?.custom_description||e?.description,r=()=>{if(S?.value_type==="fixed_amount"){const i=E||"",d=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(d){const[,u,f,b]=d;let N=f;return f.endsWith(".00")?N=f.replace(/\.00$/,""):f.endsWith(",00")&&(N=f.replace(/,00$/,"")),`${u}${N}${b}`}return i}return L||""};(0,c.useEffect)(()=>{let i=[];if(L||E){const u=`${r()} ${Y?.off||le?.off||""}`;A(u)}const d=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,L&&z?1:2)||[];ae(i.concat(d))},[e?.tags,L,E,z,Y?.off,le?.off]),(0,$e.useExposure)(ne,{componentType:ye,componentName:ge,componentTitle:G,componentDescription:Z,position:t?.index+1});const l=async()=>{if(!pe&&!e?.custom_primary_link){F(!0);try{await me(e,t?.index,t,S)}finally{F(!1)}}},a=async()=>{if(!_&&!e?.custom_secondary_link){R(!0);try{await _e(e,t?.index,t,S)}finally{R(!1)}}},m=()=>(0,s.jsxs)("div",{className:"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4",children:[(0,s.jsxs)("div",{className:"shelf-display-product-content-title-desc",children:[$?(0,s.jsx)(Le.Heading,{as:"h3",title:$||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:$||""}):null,(0,s.jsx)(be.Text,{size:2,className:(0,k.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:Z||""})]}),(0,s.jsxs)("div",{className:"shelf-display-product-content-price-button",children:[(0,s.jsx)("div",{className:"mb-2 flex flex-wrap items-center",children:U?U(e,{price:j,basePrice:P,discount:L,discountAmount:E,variant:o,coupon:S,isSoldOut:h,isShowOriginalPrice:I}):h?(0,s.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:oe?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:o?.availableForSale&&j||""}),Q?Q(e,{price:j,basePrice:P,discount:L,discountAmount:E,isShowOriginalPrice:I}):P&&I&&(0,s.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:o?.availableForSale&&P||""})]})}),!U&&we?.(e,o,{isShowOriginalPrice:I}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!h?(0,s.jsx)(se.default,{disabled:h&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:a,loading:_,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(se.default,{disabled:h&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:l,loading:pe,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),y={...W?{color:W}:{},...H?{backgroundColor:H,backgroundImage:"none"}:{},...W||H?{outline:"none"}:{}},x={...w?{color:w}:{},...K?{backgroundColor:K,backgroundImage:"none"}:{},...w||K?{outlineColor:w}:{}},D=()=>(0,s.jsxs)("div",{className:"lg-desktop:min-h-[28px] lg-desktop:flex-[28] box-border flex min-h-6 flex-[24] flex-wrap gap-1 overflow-hidden",children:[z&&ce&&(0,s.jsx)(ve.default,{className:"shelf-prices-tag",variant:"fill",style:y,children:ce||""}),O&&n?.length>0&&n?.map?.((i,d)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"outline",style:x,children:i},d))]}),v=e?.custom_bg_image,J=e?.custom_theme;return(0,s.jsx)("div",{ref:ne,className:(0,k.cn)("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]","laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative","md-tablet:h-[422px] shelf-display-item",v?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":J==="dark","aiui-light":J==="light"}),style:v?{backgroundImage:`url(${v})`}:void 0,children:p?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(D,{}),(0,s.jsx)(xe.default,{source:V,alt:ue,className:(0,k.cn)("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":v})}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:m()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4",children:[(0,s.jsx)(D,{}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden",{"opacity-0":v}),children:[(0,s.jsx)("a",{"aria-label":G,target:t?.target,href:(0,Pe.trackUrlRef)(`${C==="us"||!C?"":`/${C}`}/products/${e?.handle}?variant=${B}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},children:(0,s.jsx)(xe.default,{source:V,alt:ue,className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,s.jsx)(We,{items:e?.socialEndorsements})]}),m()]})},e?.id||e?.handle)},Ue=({data:e,configuration:t})=>{const{itemShape:p,itemLength:T,metafields:g,isShowShortTitle:re,formatPrice:O,renderOriginalPrice:I,renderPriceLabel:ke,renderPrice:z}=t||{},{discounts:W,discountsCopy:H}=g||{},{locale:w="us",copyWriting:K,currencyDisplay:ie}=(0,Ne.useAiuiContext)(),[Q,we]=(0,c.useState)([]),U=(0,c.useRef)(null),[C,oe]=(0,c.useState)(!1),[X,Y]=(0,c.useState)(!1),le=(r,l,a,m)=>{const{primaryFun:y,onAddCart:x,onBuyNow:D,onLearnMore:v,event:J}=t||{};if(y){if(y==="AddCart"&&x)return x(r,l+1,a,m);if(y==="BuyNow"&&D)return D(r,l+1,a,m);if(y==="LearnMore"&&v)return v(r,l+1,a,m)}J?.primaryButton?.(r,l+1,a,m)},ne=(r,l,a,m)=>{const{secondaryFun:y,onAddCart:x,onBuyNow:D,onLearnMore:v,event:J}=t||{};if(y){if(y==="AddCart"&&x)return x(r,l+1,a,m);if(y==="BuyNow"&&D)return D(r,l+1,a,m);if(y==="LearnMore"&&v)return v(r,l+1,a,m)}J?.secondaryButton?.(r,l+1,a,m)},n=(0,c.useMemo)(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ae=n?.id?.split?.("/")||[],ce=ae?.[ae?.length-1],A=!n?.availableForSale||n?.price?.amount===he||n?.price===he,pe=t?.isShowTag,F=t?.isShowOriginalPrice,_=n?.coupons?.[0],R=!!(F&&_),me=e?.price?.currencyCode||"USD",_e=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:w,amount:R?_?.variant_price4wscode:n?.price,baseAmount:R?n?.price:0,currencyCode:me,currencyDisplay:ie,customFormatPrice:O}),[me,w,R,_?.variant_price4wscode,n,O]),{price:o,basePrice:M,discount:B,discountAmount:h}=_e,{imageUrl:S,altText:de}=De(e),q=e?.custom_name||e?.title,j=re&&n?.metafields?.infos?.page_short_title||q,P=e?.custom_description||e?.description;(0,$e.useExposure)(U,{componentType:ye,componentName:ge,componentTitle:q,componentDescription:P,position:t?.index+1});const L=async()=>{if(!C&&!e?.custom_primary_link){oe(!0);try{await le(e,t?.index,t,_)}finally{oe(!1)}}},E=async()=>{if(!X&&!e?.custom_secondary_link){Y(!0);try{await ne(e,t?.index,t,_)}finally{Y(!1)}}},V=()=>T>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>T>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",G=()=>{if(_?.value_type==="fixed_amount"){const r=h||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,m,y]=l;let x=m;return m.endsWith(".00")?x=m.replace(/\.00$/,""):m.endsWith(",00")&&(x=m.replace(/,00$/,"")),`${a}${x}${y}`}return r}return B||""};(0,c.useEffect)(()=>{let r=[];if(B||h){const a=`${G()} ${W?.off||H?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,B?1:2)||[];we(r.concat(l))},[e?.tags,B,h,W?.off,H?.off]);const $=e?.custom_bg_image,Z=e?.custom_theme;return(0,s.jsx)("div",{ref:U,className:(0,k.cn)(V().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",$?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":Z==="dark","aiui-light":Z==="light"}),style:$?{backgroundImage:`url(${$})`}:void 0,children:(0,s.jsxs)("div",{className:(0,k.cn)(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,k.cn)(V().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":$}),children:(0,s.jsx)("a",{"aria-label":q,target:t?.target,href:(0,Pe.trackUrlRef)(`${w==="us"||!w?"":`/${w}`}/products/${e?.handle}?variant=${ce}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(xe.default,{source:S,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,k.cn)("flex flex-col items-start justify-center",V().boxItem),children:[pe&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Q?.length>0&&Q?.map?.((r,l)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"fill",children:r},l))}),j?(0,s.jsx)(Le.Heading,{as:"h3",title:j||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:j||""}):null,P?(0,s.jsx)(be.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:P||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex flex-wrap items-center",children:z?z(e,{price:o,basePrice:M,discount:B,discountAmount:h,variant:n,coupon:_,isSoldOut:A,isShowOriginalPrice:F}):A?(0,s.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:K?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-xl text-info-primary whitespace-nowrap text-xl font-bold",children:n?.availableForSale&&o||""}),I?I(e,{price:o,basePrice:M,discount:B,discountAmount:h,isShowOriginalPrice:F}):M&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-quaternary ml-1 whitespace-nowrap text-lg font-bold line-through",children:n?.availableForSale&&M||""})]})}),!z&&ke?.(e,n,{isShowOriginalPrice:F}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!A?(0,s.jsx)(se.default,{disabled:A&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:E,loading:X,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(se.default,{disabled:A&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:L,loading:C,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
1
|
+
"use strict";var ze=Object.create;var fe=Object.defineProperty;var Ae=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Oe=(e,t)=>{for(var p in t)fe(e,p,{get:t[p],enumerable:!0})},Ie=(e,t,p,N)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Fe(t))!Ee.call(e,g)&&g!==p&&fe(e,g,{get:()=>t[g],enumerable:!(N=Ae(t,g))||N.enumerable});return e};var Ne=(e,t,p)=>(p=e!=null?ze(Me(e)):{},Ie(t||!e||!e.__esModule?fe(p,"default",{value:e,enumerable:!0}):p,e)),je=e=>Ie(fe({},"__esModule",{value:!0}),e);var Re={};Oe(Re,{ShelfDisplayHorizontalItem:()=>Ue,ShelfDisplayWrapItem:()=>He,getProductImage:()=>De});module.exports=je(Re);var s=require("react/jsx-runtime"),Te=require("../AiuiProvider/index.js"),Ce=require("./shelfDisplay.js"),xe=Ne(require("../../components/picture.js")),ve=Ne(require("../../components/badge.js")),k=require("../../helpers/utils.js"),be=require("../../components/text.js"),se=Ne(require("../../components/button.js")),Be=require("../../shared/track.js"),Pe=require("../../shared/trackUrlRef.js"),Le=require("../../components/heading.js"),$e=require("../../hooks/useExposure.js"),c=require("react");const ye="image",ge="product_shelf",he=999999999e-2,De=e=>{const t=e?.sku,p=e?.variants,N=p?.find(j=>j?.sku===t),g=N?.image?.url||p?.[0]?.image?.url||"",re=N?.image?.altText||p?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:g,altText:re}},We=({items:e})=>e?.length?(0,s.jsx)("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,p)=>typeof t.icon=="string"?(0,s.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},p):(0,s.jsx)(be.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},p))}):null,He=({data:e,configuration:t})=>{const{isDisplayBackImage:p=!1,itemShape:N,metafields:g,isTopTag:re=!1,isShowTag:j,isShowOriginalPrice:I,isShowShortTitle:ke=!1,isShowPricesTag:z=!1,pricesTagTextColor:W,pricesTagBgColor:H,itemsTagTextColor:w,itemsTagBgColor:K,formatPrice:ie,renderOriginalPrice:Q,renderPriceLabel:we,renderPrice:U}=t||{},{locale:C="es",copyWriting:oe,currencyDisplay:X}=(0,Te.useAiuiContext)(),{discounts:Y,discountsCopy:le}=g||{},ne=(0,c.useRef)(null),[n,ae]=(0,c.useState)([]),[ce,A]=(0,c.useState)(""),[pe,F]=(0,c.useState)(!1),[_,R]=(0,c.useState)(!1),me=(i,d,u,f)=>{const{primaryFun:b,onAddCart:T,onBuyNow:ee,onLearnMore:te,event:Se}=t||{};if(b){if(b==="AddCart"&&T)return T(i,d+1,u,f);if(b==="BuyNow"&&ee)return ee(i,d+1,u,f);if(b==="LearnMore"&&te)return te(i,d+1,u,f)}Se?.primaryButton?.(i,d+1,u,f)},_e=(i,d,u,f)=>{const{secondaryFun:b,onAddCart:T,onBuyNow:ee,onLearnMore:te,event:Se}=t||{};if(b){if(b==="AddCart"&&T)return T(i,d+1,u,f);if(b==="BuyNow"&&ee)return ee(i,d+1,u,f);if(b==="LearnMore"&&te)return te(i,d+1,u,f)}Se?.secondaryButton?.(i,d+1,u,f)},o=(0,c.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku?i?.find?.(d=>d?.sku===e?.sku)||i[0]:i?.[0]},[e?.sku,e?.variants]),M=o?.id?.split?.("/")||[],B=M?.[M?.length-1],h=!o?.availableForSale||o?.price?.amount===he||o?.price===he,S=o?.coupons?.[0],de=e?.price?.currencyCode||"USD",q=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:C,amount:S?S?.variant_price4wscode:o?.price,baseAmount:S?o?.price:0,currencyCode:de,currencyDisplay:X,customFormatPrice:ie}),[de,C,S,X,o,ie]),{price:E,basePrice:P,discount:L,discountAmount:O}=q,{imageUrl:V,altText:ue}=De(e),G=e?.custom_name||e?.title,$=ke&&o?.metafields?.infos?.page_short_title||G,Z=e?.custom_description||e?.description,r=()=>{if(S?.value_type==="fixed_amount"){const i=O||"",d=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(d){const[,u,f,b]=d;let T=f;return f.endsWith(".00")?T=f.replace(/\.00$/,""):f.endsWith(",00")&&(T=f.replace(/,00$/,"")),`${u}${T}${b}`}return i}return L||""};(0,c.useEffect)(()=>{let i=[];if(L||O){const u=`${r()} ${Y?.off||le?.off||""}`;A(u)}const d=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,L&&z?1:2)||[];ae(i.concat(d))},[e?.tags,L,O,z,Y?.off,le?.off]),(0,$e.useExposure)(ne,{componentType:ye,componentName:ge,componentTitle:G,componentDescription:Z,position:t?.index+1});const l=async()=>{if(!pe&&!e?.custom_primary_link){F(!0);try{await me(e,t?.index,t,S)}finally{F(!1)}}},a=async()=>{if(!_&&!e?.custom_secondary_link){R(!0);try{await _e(e,t?.index,t,S)}finally{R(!1)}}},m=()=>(0,s.jsxs)("div",{className:"shelf-display-product-content desktop:gap-6 flex flex-1 flex-col justify-between gap-4",children:[(0,s.jsxs)("div",{className:"shelf-display-product-content-title-desc",children:[$?(0,s.jsx)(Le.Heading,{as:"h3",title:$||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:$||""}):null,(0,s.jsx)(be.Text,{size:2,className:(0,k.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:Z||""})]}),(0,s.jsxs)("div",{className:"shelf-display-product-content-price-button",children:[(0,s.jsx)("div",{className:"mb-2 flex flex-wrap items-center",children:U?U(e,{price:E,basePrice:P,discount:L,discountAmount:O,variant:o,coupon:S,isSoldOut:h,isShowOriginalPrice:I}):h?(0,s.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:oe?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:o?.availableForSale&&E||""}),Q?Q(e,{price:E,basePrice:P,discount:L,discountAmount:O,isShowOriginalPrice:I}):P&&I&&(0,s.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:o?.availableForSale&&P||""})]})}),!U&&we?.(e,o,{isShowOriginalPrice:I}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!h?(0,s.jsx)(se.default,{disabled:h&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:a,loading:_,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(se.default,{disabled:h&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:l,loading:pe,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),y={...W?{color:W}:{},...H?{backgroundColor:H,backgroundImage:"none"}:{},...W||H?{outline:"none"}:{}},x={...w?{color:w}:{},...K?{backgroundColor:K,backgroundImage:"none"}:{},...w||K?{outlineColor:w}:{}},D=()=>(0,s.jsxs)("div",{className:"lg-desktop:min-h-[28px] box-border flex min-h-6 flex-wrap gap-1 overflow-hidden",children:[z&&ce&&(0,s.jsx)(ve.default,{className:"shelf-prices-tag",variant:"fill",style:y,children:ce||""}),j&&n?.length>0&&n?.map?.((i,d)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"outline",style:x,children:i},d))]}),v=e?.custom_bg_image,J=e?.custom_theme;return(0,s.jsx)("div",{ref:ne,className:(0,k.cn)("shelf-display-item box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300","rounded-box relative",v?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":J==="dark","aiui-light":J==="light"}),style:v?{backgroundImage:`url(${v})`}:void 0,children:p?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(xe.default,{source:V,alt:ue,className:(0,k.cn)("absolute inset-0 size-full",{"opacity-0":v}),imgClassName:"size-full object-cover"}),(0,s.jsxs)("div",{className:"desktop:p-6 relative flex flex-1 flex-col p-4",children:[(0,s.jsx)(D,{}),m()]})]}):(0,s.jsxs)("div",{className:"desktop:gap-2 desktop:p-6 desktop:pt-4 flex flex-1 flex-col gap-1 p-4",children:[(0,s.jsx)(D,{}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-display-item-image lg-desktop:size-[240px] relative mx-auto size-[180px] overflow-hidden",{"opacity-0":v}),children:[(0,s.jsx)("a",{"aria-label":G,target:t?.target,href:(0,Pe.trackUrlRef)(`${C==="us"||!C?"":`/${C}`}/products/${e?.handle}?variant=${B}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},className:"block size-full",children:(0,s.jsx)(xe.default,{source:V,alt:ue,className:"size-full",imgClassName:"size-full object-cover"})}),(0,s.jsx)(We,{items:e?.socialEndorsements})]}),m()]})},e?.id||e?.handle)},Ue=({data:e,configuration:t})=>{const{itemShape:p,itemLength:N,metafields:g,isShowShortTitle:re,formatPrice:j,renderOriginalPrice:I,renderPriceLabel:ke,renderPrice:z}=t||{},{discounts:W,discountsCopy:H}=g||{},{locale:w="us",copyWriting:K,currencyDisplay:ie}=(0,Te.useAiuiContext)(),[Q,we]=(0,c.useState)([]),U=(0,c.useRef)(null),[C,oe]=(0,c.useState)(!1),[X,Y]=(0,c.useState)(!1),le=(r,l,a,m)=>{const{primaryFun:y,onAddCart:x,onBuyNow:D,onLearnMore:v,event:J}=t||{};if(y){if(y==="AddCart"&&x)return x(r,l+1,a,m);if(y==="BuyNow"&&D)return D(r,l+1,a,m);if(y==="LearnMore"&&v)return v(r,l+1,a,m)}J?.primaryButton?.(r,l+1,a,m)},ne=(r,l,a,m)=>{const{secondaryFun:y,onAddCart:x,onBuyNow:D,onLearnMore:v,event:J}=t||{};if(y){if(y==="AddCart"&&x)return x(r,l+1,a,m);if(y==="BuyNow"&&D)return D(r,l+1,a,m);if(y==="LearnMore"&&v)return v(r,l+1,a,m)}J?.secondaryButton?.(r,l+1,a,m)},n=(0,c.useMemo)(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ae=n?.id?.split?.("/")||[],ce=ae?.[ae?.length-1],A=!n?.availableForSale||n?.price?.amount===he||n?.price===he,pe=t?.isShowTag,F=t?.isShowOriginalPrice,_=n?.coupons?.[0],R=!!(F&&_),me=e?.price?.currencyCode||"USD",_e=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:w,amount:R?_?.variant_price4wscode:n?.price,baseAmount:R?n?.price:0,currencyCode:me,currencyDisplay:ie,customFormatPrice:j}),[me,w,R,_?.variant_price4wscode,n,j]),{price:o,basePrice:M,discount:B,discountAmount:h}=_e,{imageUrl:S,altText:de}=De(e),q=e?.custom_name||e?.title,E=re&&n?.metafields?.infos?.page_short_title||q,P=e?.custom_description||e?.description;(0,$e.useExposure)(U,{componentType:ye,componentName:ge,componentTitle:q,componentDescription:P,position:t?.index+1});const L=async()=>{if(!C&&!e?.custom_primary_link){oe(!0);try{await le(e,t?.index,t,_)}finally{oe(!1)}}},O=async()=>{if(!X&&!e?.custom_secondary_link){Y(!0);try{await ne(e,t?.index,t,_)}finally{Y(!1)}}},V=()=>N>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>N>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",G=()=>{if(_?.value_type==="fixed_amount"){const r=h||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,m,y]=l;let x=m;return m.endsWith(".00")?x=m.replace(/\.00$/,""):m.endsWith(",00")&&(x=m.replace(/,00$/,"")),`${a}${x}${y}`}return r}return B||""};(0,c.useEffect)(()=>{let r=[];if(B||h){const a=`${G()} ${W?.off||H?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,B?1:2)||[];we(r.concat(l))},[e?.tags,B,h,W?.off,H?.off]);const $=e?.custom_bg_image,Z=e?.custom_theme;return(0,s.jsx)("div",{ref:U,className:(0,k.cn)(V().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",$?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":Z==="dark","aiui-light":Z==="light"}),style:$?{backgroundImage:`url(${$})`}:void 0,children:(0,s.jsxs)("div",{className:(0,k.cn)(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,k.cn)(V().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":$}),children:(0,s.jsx)("a",{"aria-label":q,target:t?.target,href:(0,Pe.trackUrlRef)(`${w==="us"||!w?"":`/${w}`}/products/${e?.handle}?variant=${ce}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(xe.default,{source:S,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,k.cn)("flex flex-col items-start justify-center",V().boxItem),children:[pe&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Q?.length>0&&Q?.map?.((r,l)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"fill",children:r},l))}),E?(0,s.jsx)(Le.Heading,{as:"h3",title:E||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:E||""}):null,P?(0,s.jsx)(be.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:P||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex flex-wrap items-center",children:z?z(e,{price:o,basePrice:M,discount:B,discountAmount:h,variant:n,coupon:_,isSoldOut:A,isShowOriginalPrice:F}):A?(0,s.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:K?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-xl text-info-primary whitespace-nowrap text-xl font-bold",children:n?.availableForSale&&o||""}),I?I(e,{price:o,basePrice:M,discount:B,discountAmount:h,isShowOriginalPrice:F}):M&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-quaternary ml-1 whitespace-nowrap text-lg font-bold line-through",children:n?.availableForSale&&M||""})]})}),!z&&ke?.(e,n,{isShowOriginalPrice:F}),(0,s.jsxs)("div",{className:(0,k.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!A?(0,s.jsx)(se.default,{disabled:A&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:O,loading:X,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(se.default,{disabled:A&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:L,loading:C,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var ke=Object.create;var v=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";"use client";var ke=Object.create;var v=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Te=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Pe=(s,n)=>{for(var l in n)v(s,l,{get:n[l],enumerable:!0})},q=(s,n,l,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of Te(n))!Ce.call(s,d)&&d!==l&&v(s,d,{get:()=>n[d],enumerable:!(u=De(n,d))||u.enumerable});return s};var k=(s,n,l)=>(l=s!=null?ke(xe(s)):{},q(n||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),Ie=s=>q(v({},"__esModule",{value:!0}),s);var ze={};Pe(ze,{default:()=>Re});module.exports=Ie(ze);var a=require("react/jsx-runtime"),i=k(require("react")),_=require("../../helpers/utils.js"),m=require("../../components/tabs.js"),Z=k(require("../Title/index.js")),T=k(require("../SwiperBox/index.js")),j=require("../../shared/Styles.js"),x=require("../../shared/track.js"),Q=require("react-responsive"),W=require("../../hooks/useRollout.js"),F=require("../ShelfDisplay/shelfDisplayItem.js"),C=require("./shelfDisplayHorizontalItem.js");const Ne="image",Le="product_shelf",D=s=>s==null?"default":String(s).replace(/[^a-zA-Z0-9_-]/g,"")||"default",G={0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1025:{spaceBetween:16,freeMode:!1,slidesPerView:2}},O=i.default.forwardRef((s,n)=>{const{isDisplayGudgments:l,...u}=s,{data:d,event:J,buildData:K,breakpoints:P,className:U="",recommendedData:h,target:X="_self",metafields:Y,isDisplayBackImage:ee=!1,renderOriginalPrice:te,renderPriceLabel:se,renderPrice:ae,onAddCart:ie,onBuyNow:ne,onLearnMore:oe,formatPrice:re,...le}=u,{productsTab:c=[],productsCard:de=[],title:I,isShowTab:g=!0,tabShape:pe="square",isShowTag:me=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:fe=!1,isTile:ue=!1,tileMaxRows:b,tileExpandText:he="Show more",tileCollapseText:ge="Show less",...we}=d,N=(0,i.useRef)(!1),L=(0,i.useRef)(null),ye=(0,i.useId)(),[R,ve]=(0,i.useState)(!1);(0,i.useEffect)(()=>{ve(!0)},[]);const z=(0,Q.useMediaQuery)({query:"(min-width: 1025px)"}),[S,_e]=(0,i.useState)(!1),[be,H]=(0,W.useRollout)({threshold:0});(0,i.useImperativeHandle)(n,()=>L.current);const M=()=>{(0,x.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:h?.map((e,o)=>{const t=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:o+1}})}})};(0,i.useEffect)(()=>{H&&h?.length&&!N.current&&(N.current=!0,M())},[H,h]);const B=(e,o)=>{if(o){const t=h?.map?.(r=>({...r,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const p=e?.map?.(t=>{const r=K?.products?.find(y=>y?.handle===t?.handle);if(r)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...r}})?.filter(t=>t);return p?.length?p:[]},w=D(ye),E=(e,o)=>{const p={...we,event:J,isShowTag:me,isShowOriginalPrice:ce,target:X,metafields:Y,itemLength:e.length,isDisplayBackImage:ee,renderOriginalPrice:te,renderPriceLabel:se,renderPrice:ae,onAddCart:ie,onBuyNow:ne,onLearnMore:oe,formatPrice:re};if(ue&&R&&z){const y=typeof b=="number"&&b>0,V=y?b*2:e.length,$=y&&e.length>V,Se=$&&!S?e.slice(0,V):e;return(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:(0,_.cn)("shelf-display-horizontal-tile grid grid-cols-2 gap-4",g?"mt-6":""),children:Se.map((f,A)=>(0,a.jsx)(C.ShelfDisplayHorizontalCardItem,{data:f,configuration:{...p,index:A}},f?.id||f?.handle||A))}),$&&(0,a.jsxs)("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[(0,a.jsx)("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>_e(f=>!f),children:S?ge:he}),(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,_.cn)("laptop:size-5 size-4",S&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,a.jsx)("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}if(R&&z){const r=o?`${w}-${D(o)}`:w;return(0,a.jsx)(T.default,{data:{list:e,configuration:p},id:r,className:`${g?"mt-6":""} shelf-display-horizontal-swiper-box !overflow-visible`,Slide:C.ShelfDisplayHorizontalCardItem,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:P||G},r)}const t=o?`${w}-${D(o)}`:w;return(0,a.jsx)(T.default,{data:{list:e,configuration:p},id:t,className:`${g?"mt-6":""} shelf-display-swiper-box !overflow-visible`,Slide:F.ShelfDisplayWrapItem,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:P||G},t)};return(0,a.jsxs)("div",{ref:L,...le,className:(0,_.cn)("shelf-display-horizontal-wrap text-info-primary w-full",U,{"aiui-dark":d?.theme==="dark"}),children:[I&&(0,a.jsx)(Z.default,{data:{title:I}}),(0,a.jsx)("div",{ref:be,children:g&&c?.length>0?(0,a.jsxs)(m.Tabs,{defaultValue:c?.[0]?.tab,onValueChange:e=>{const o=c?.find(p=>p?.tab===e);if(o){if(!o.isShowRecommendedTab){(0,x.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Ne,component_name:Le,component_title:d?.title,component_position:1,navigation:e}});return}M()}},shape:pe==="rounded"?"rounded":"square",children:[(0,a.jsx)(m.TabsList,{children:c.map(e=>(0,a.jsx)(m.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),c.map(e=>(0,a.jsx)(m.TabsContent,{value:e?.tab,children:E(B(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):E(B(de,fe))})]})});O.displayName="ShelfDisplayHorizontal";var Re=(0,j.withLayout)(O);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var Le=Object.create;var C=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ee=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var Fe=(e,t)=>{for(var a in t)C(e,a,{get:t[a],enumerable:!0})},
|
|
1
|
+
"use strict";var Le=Object.create;var C=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ee=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var Fe=(e,t)=>{for(var a in t)C(e,a,{get:t[a],enumerable:!0})},se=(e,t,a,N)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of Ie(t))!Ae.call(e,d)&&d!==a&&C(e,d,{get:()=>t[d],enumerable:!(N=$e(t,d))||N.enumerable});return e};var A=(e,t,a)=>(a=e!=null?Le(Ee(e)):{},se(t||!e||!e.__esModule?C(a,"default",{value:e,enumerable:!0}):a,e)),Me=e=>se(C({},"__esModule",{value:!0}),e);var je={};Fe(je,{ShelfDisplayHorizontalCardItem:()=>Oe});module.exports=Me(je);var s=require("react/jsx-runtime"),le=require("../AiuiProvider/index.js"),ne=require("../ShelfDisplay/shelfDisplay.js"),ae=require("../ShelfDisplay/shelfDisplayItem.js"),ce=A(require("../../components/picture.js")),F=A(require("../../components/badge.js")),v=require("../../helpers/utils.js"),M=require("../../components/text.js"),H=A(require("../../components/button.js")),pe=require("../../shared/track.js"),me=require("../../shared/trackUrlRef.js"),de=require("../../components/heading.js"),fe=require("../../hooks/useExposure.js"),c=require("react");const oe="image",re="product_shelf",ie=999999999e-2,He=({items:e})=>e?.length?(0,s.jsx)("div",{className:"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center",children:e.map((t,a)=>typeof t.icon=="string"?(0,s.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},a):(0,s.jsx)(M.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},a))}):null,Oe=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:N,metafields:d,isTopTag:Ue=!1,isShowTag:ue,isShowOriginalPrice:b,isShowShortTitle:ge=!1,isShowPricesTag:z=!1,pricesTagTextColor:P,pricesTagBgColor:B,itemsTagTextColor:_,itemsTagBgColor:D,formatPrice:O,renderOriginalPrice:j,renderPriceLabel:ye,renderPrice:L}=t||{},{locale:g="es",copyWriting:he,currencyDisplay:U}=(0,le.useAiuiContext)(),{discounts:W,discountsCopy:R}=d||{},q=(0,c.useRef)(null),[V,xe]=(0,c.useState)([]),[G,ke]=(0,c.useState)(""),[J,K]=(0,c.useState)(!1),[Q,X]=(0,c.useState)(!1),ve=(o,r,i,n)=>{const{primaryFun:p,onAddCart:m,onBuyNow:x,onLearnMore:k,event:E}=t||{};if(p){if(p==="AddCart"&&m)return m(o,r+1,i,n);if(p==="BuyNow"&&x)return x(o,r+1,i,n);if(p==="LearnMore"&&k)return k(o,r+1,i,n)}E?.primaryButton?.(o,r+1,i,n)},be=(o,r,i,n)=>{const{secondaryFun:p,onAddCart:m,onBuyNow:x,onLearnMore:k,event:E}=t||{};if(p){if(p==="AddCart"&&m)return m(o,r+1,i,n);if(p==="BuyNow"&&x)return x(o,r+1,i,n);if(p==="LearnMore"&&k)return k(o,r+1,i,n)}E?.secondaryButton?.(o,r+1,i,n)},l=(0,c.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku?o?.find?.(r=>r?.sku===e?.sku)||o[0]:o?.[0]},[e?.sku,e?.variants]),Y=l?.id?.split?.("/")||[],_e=Y?.[Y?.length-1],y=!l?.availableForSale||l?.price?.amount===ie||l?.price===ie,f=l?.coupons?.[0],Z=e?.price?.currencyCode||"USD",Se=(0,c.useMemo)(()=>(0,ne.formatVariantPrice)({locale:g,amount:f?f?.variant_price4wscode:l?.price,baseAmount:f?l?.price:0,currencyCode:Z,currencyDisplay:U,customFormatPrice:O}),[Z,g,U,f,l,O]),{price:$,basePrice:S,discount:u,discountAmount:h}=Se,{imageUrl:Te,altText:we}=(0,ae.getProductImage)(e),T=e?.custom_name||e?.title,I=ge&&l?.metafields?.infos?.page_short_title||T,ee=e?.custom_description||e?.description,Ce=()=>{if(f?.value_type==="fixed_amount"){const o=h||"",r=o.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,i,n,p]=r;let m=n;return n.endsWith(".00")?m=n.replace(/\.00$/,""):n.endsWith(",00")&&(m=n.replace(/,00$/,"")),`${i}${m}${p}`}return o}return u||""};(0,c.useEffect)(()=>{let o=[];if(u||h){const i=`${Ce()} ${W?.off||R?.off||""}`;ke(i)}const r=e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,u&&z?1:2)||[];xe(o.concat(r))},[e?.tags,u,h,W?.off,R?.off,z]),(0,fe.useExposure)(q,{componentType:oe,componentName:re,componentTitle:T,componentDescription:ee,position:t?.index+1});const Ne=async()=>{if(!J&&!e?.custom_primary_link){K(!0);try{await ve(e,t?.index,t,f)}finally{K(!1)}}},ze=async()=>{if(!Q&&!e?.custom_secondary_link){X(!0);try{await be(e,t?.index,t,f)}finally{X(!1)}}},Pe={...P?{color:P}:{},...B?{backgroundColor:B,backgroundImage:"none"}:{},...P||B?{outline:"none"}:{}},Be={..._?{color:_}:{},...D?{backgroundColor:D,backgroundImage:"none"}:{},..._||D?{outlineColor:_}:{}},De=()=>(0,s.jsxs)("div",{className:"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden",children:[z&&G&&(0,s.jsx)(F.default,{className:"shelf-prices-tag",variant:"fill",style:Pe,children:G||""}),ue&&V?.length>0&&V?.map?.((o,r)=>(0,s.jsx)(F.default,{className:"shelf-items-tag",variant:"outline",style:Be,children:o},r))]}),w=e?.custom_bg_image,te=e?.custom_theme;return(0,s.jsxs)("div",{ref:q,className:(0,v.cn)("shelf-display-horizontal-item box-border flex size-full cursor-pointer overflow-hidden duration-300","rounded-box","desktop:p-6 desktop:pt-4 p-4",w?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":te==="dark","aiui-light":te==="light"}),style:w?{backgroundImage:`url(${w})`}:void 0,children:[(0,s.jsxs)("div",{className:"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex flex-none flex-col items-center justify-center gap-2",children:[(0,s.jsx)(De,{}),(0,s.jsx)("a",{"aria-label":T,target:t?.target,href:(0,me.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${_e}`,`${oe}_${re}`),onClick:()=>{(0,pe.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},className:(0,v.cn)("desktop:size-[180px] lg-desktop:size-[205px] size-[140px]",{"opacity-0":w}),children:(0,s.jsx)(ce.default,{source:Te,alt:we,className:"size-full",imgClassName:"size-full object-cover"})}),(0,s.jsx)(He,{items:e?.socialEndorsements||d?.socialEndorsements})]}),(0,s.jsxs)("div",{className:"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4",children:[(0,s.jsxs)("div",{className:"shelf-display-horizontal-content-title-desc",children:[I?(0,s.jsx)(de.Heading,{as:"h3",title:I||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:I||""}):null,(0,s.jsx)(M.Text,{size:2,className:(0,v.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:ee||""})]}),(0,s.jsxs)("div",{className:"shelf-display-horizontal-content-price-button",children:[(0,s.jsx)("div",{className:"mb-2 flex flex-wrap items-center",children:L?L(e,{price:$,basePrice:S,discount:u,discountAmount:h,variant:l,coupon:f,isSoldOut:y,isShowOriginalPrice:b}):y?(0,s.jsx)("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:he?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:l?.availableForSale&&$||""}),j?j(e,{price:$,basePrice:S,discount:u,discountAmount:h,isShowOriginalPrice:b}):S&&b&&(0,s.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:l?.availableForSale&&S||""})]})}),!L&&ye?.(e,l,{isShowOriginalPrice:b}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?(0,s.jsx)(H.default,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:ze,loading:Q,className:"laptop:w-full desktop:w-auto",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(H.default,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:Ne,loading:J,className:"laptop:w-full desktop:w-auto",children:t?.primaryButton||""}):null]})]})]})]},e?.id||e?.handle)};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var L=(t,o)=>{for(var r in o)p(t,r,{get:o[r],enumerable:!0})},Z=(t,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of z(o))!D.call(t,a)&&a!==r&&p(t,a,{get:()=>o[a],enumerable:!(m=S(o,a))||m.enumerable});return t};var H=t=>Z(p({},"__esModule",{value:!0}),t);var P={};L(P,{default:()=>$});module.exports=H(P);var e=require("react/jsx-runtime"),n=require("react"),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),v=require("../../components/index.js");const R=/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/,_=({subscribeMetadata:t,onSubmit:o,className:r,loading:m,...a})=>{const[b,i]=(0,n.useState)(null),[N,B]=(0,n.useState)(t?.termsChecked),[A,E]=(0,n.useState)(t?.newsChecked),[f,u]=(0,n.useState)(null),[y,g]=(0,n.useState)(!1),[h,k]=(0,n.useState)(""),C=l=>{l.preventDefault();const c=new FormData(l.target),d=c.get("email"),w=c.get("terms"),F=c.get("news");if(!d){i(t?.emptyError);return}if(!R.test(d)){i(t?.formatError);return}if(!w){u(t?.termsError);return}o?.({email:d,terms:w,news:F,dealsType:t?.dealsType,onSuccess:()=>{g(!0);let T=setTimeout(()=>{g(!1),clearTimeout(T)},3e3)}})};return(0,e.jsxs)("div",{...a,className:(0,x.cn)("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",r),children:[(0,e.jsx)("style",{jsx:!0,global:!0,children:`
|
|
2
2
|
.subscribe-component input:-webkit-autofill,
|
|
3
3
|
.subscribe-component input:-webkit-autofill:hover,
|
|
4
4
|
.subscribe-component input:-webkit-autofill:focus {
|
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #fff;
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:
|
|
10
|
+
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:C,children:[(0,e.jsxs)("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[(0,e.jsxs)("div",{className:"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1",children:[(0,e.jsx)("input",{name:"email",onFocus:()=>i(null),value:h,onChange:l=>k(l.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),(0,e.jsx)("button",{type:"button",onClick:()=>k(""),className:(0,x.cn)("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!h}),children:"\u2715"})]}),(0,e.jsx)(s.Button,{type:"submit",className:"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:m?(0,e.jsx)(v.LoadingDots,{}):(0,e.jsx)(s.Text,{html:t?.button,className:"desktop:text-base text-sm font-bold leading-[1.2]"})})]}),b&&(0,e.jsx)(s.Text,{as:"p",html:b,className:"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"mt-4 flex flex-col gap-2",children:[(0,e.jsxs)("div",{className:"laptop:items-center flex items-start gap-2",children:[(0,e.jsx)(s.Checkbox,{name:"terms",id:"terms",size:"base",checked:N,onCheckedChange:l=>{B(l),l&&u(null)},className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]"}),(0,e.jsx)("label",{htmlFor:"terms",children:(0,e.jsx)(s.Text,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),f&&(0,e.jsx)(s.Text,{as:"p",html:f,className:"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Checkbox,{name:"news",id:"news",size:"base",checked:A,onCheckedChange:l=>{E(l)},className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]"}),(0,e.jsx)("label",{htmlFor:"news",children:(0,e.jsx)(s.Text,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),y&&(0,e.jsx)(s.Text,{as:"p",html:t?.successMessage,className:"text-brand-0 text-base font-bold leading-[1.2]"})]})]})]})};var $=_;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 根据 Swiper breakpoints 生成 SSR 首绘阶段的 slide 几何 CSS。
|
|
3
|
+
*
|
|
4
|
+
* swiper.css 中 .swiper-slide 默认 width: 100%，而 slidesPerView / spaceBetween 是纯 JS 参数，
|
|
5
|
+
* 要等 Swiper 初始化后才会写成内联 width / margin-right，导致首屏「单卡 → 多卡」布局跳变。
|
|
6
|
+
* 这里把相同的公式提前写成 CSS，Swiper 初始化后内联样式优先级更高，自动接管。
|
|
7
|
+
*
|
|
8
|
+
* Swiper 只会命中「不大于视口宽度的最大断点」，且不会继承更小断点的参数，
|
|
9
|
+
* 因此每个断点都完整输出 width 与 margin-right（缺省值同 Swiper：slidesPerView=1, spaceBetween=0）。
|
|
10
|
+
*
|
|
11
|
+
* 遇到 'auto' 或非数字的 slidesPerView / spaceBetween 时整体放弃（返回空串），避免生成与实际不一致的几何。
|
|
12
|
+
*/
|
|
13
|
+
export declare const buildSsrSlideCss: (selector: string, breakpoints?: Record<number, Object>) => string;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var b=(r,i)=>{for(var t in i)p(r,t,{get:i[t],enumerable:!0})},l=(r,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of a(i))!d.call(r,e)&&e!==t&&p(r,e,{get:()=>i[e],enumerable:!(n=c(i,e))||n.enumerable});return r};var f=r=>l(p({},"__esModule",{value:!0}),r);var x={};b(x,{buildSsrSlideCss:()=>g});module.exports=f(x);const w=r=>Number(r.toFixed(4)),g=(r,i)=>{if(!i)return"";const t=Object.entries(i).map(([e,s])=>({point:Number(e),params:s||{}})).filter(({point:e})=>Number.isFinite(e)&&e>=0).sort((e,s)=>e.point-s.point),n=[];for(const{point:e,params:s}of t){const{slidesPerView:o=1,spaceBetween:u=0}=s;if(typeof o!="number"||!Number.isFinite(o)||o<=0||typeof u!="number"||!Number.isFinite(u)||u<0)return"";const m=w((o-1)*u);n.push(`@media (min-width: ${e}px) { ${r}:not(.swiper-initialized) .swiper-slide { width: calc((100% - ${m}px) / ${o}); margin-right: ${u}px; } }`)}return n.join(`
|
|
2
|
+
`)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var P=Object.create;var c=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var C=(s,t)=>{for(var r in t)c(s,r,{get:t[r],enumerable:!0})},v=(s,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of j(t))!A.call(s,o)&&o!==r&&c(s,o,{get:()=>t[o],enumerable:!(l=$(t,o))||l.enumerable});return s};var R=(s,t,r)=>(r=s!=null?P(T(s)):{},v(t||!s||!s.__esModule?c(r,"default",{value:s,enumerable:!0}):r,s)),_=s=>v(c({},"__esModule",{value:!0}),s);var D={};C(D,{default:()=>W});module.exports=_(D);var e=require("react/jsx-runtime"),i=R(require("react")),n=require("../../helpers/utils.js"),d=require("swiper/react"),a=require("swiper/modules"),h=require("./buildSsrSlideCss.js");const H={0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},I=()=>(0,e.jsxs)("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[(0,e.jsx)("span",{className:"bg-masks-0 group-hover:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:(0,e.jsx)("path",{d:"M15 6L9 12L15 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),V=()=>(0,e.jsxs)("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[(0,e.jsx)("span",{className:"bg-masks-0 group-hover:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:(0,e.jsx)("path",{d:"M9 6L15 12L9 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),S=i.default.forwardRef(({data:s,breakpoints:t,Slide:r,className:l,id:o,itemClassName:k,showNavigation:m=!1,navigationPrevClassName:x,navigationNextClassName:N,...y},B)=>{const[z,L]=(0,i.useState)(!0),[M,E]=(0,i.useState)(!1),g=`swiper-ssr-${(0,i.useId)().replace(/[^a-zA-Z0-9_-]/g,"")}`,w=t||H,f=(0,h.buildSsrSlideCss)(`.${g}`,w),b=p=>{L(p.isBeginning),E(p.isEnd)};return(0,e.jsxs)("div",{...y,ref:B,className:(0,n.cn)(m&&"relative"),children:[f&&(0,e.jsx)("style",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:f}}),(0,e.jsx)(d.Swiper,{className:(0,n.cn)(l,f&&g),navigation:m?{nextEl:`.${o}-custom-swiper-button-next`,prevEl:`.${o}-custom-swiper-button-prev`}:!1,onProgress:b,onSlideChange:b,modules:[a.Navigation,a.FreeMode,a.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:w,children:s?.list?.map((p,u)=>(0,e.jsx)(d.SwiperSlide,{className:(0,n.cn)("!flex !h-[unset]",k),children:(0,e.jsx)(r,{data:p,configuration:s?.configuration?{...s?.configuration,index:u}:{index:u},jIndex:u})},o+"SwiperSlide"+u))}),m&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("button",{className:(0,n.cn)(`${o}-custom-swiper-button-prev`,"group absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center",!z&&"laptop:flex",x),"aria-label":"Previous slide",children:(0,e.jsx)(I,{})}),(0,e.jsx)("button",{className:(0,n.cn)(`${o}-custom-swiper-button-next`,"group absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center",!M&&"laptop:flex",N),"aria-label":"Next slide",children:(0,e.jsx)(V,{})})]})]})});S.displayName="SwiperBox";var W=S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as e,jsxs as M}from"react/jsx-runtime";import f,{useId as w}from"react";import{Swiper as u,SwiperSlide as S}from"swiper/react";import{Pagination as g,FreeMode as b,Mousewheel as y}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";import{buildSsrSlideCss as P}from"../SwiperBox/buildSsrSlideCss.js";const p=f.forwardRef(({data:s,Slide:d,id:i,isHalf:o,paginationClassName:c},B)=>{const a=`swiper-ssr-${w().replace(/[^a-zA-Z0-9_-]/g,"")}`,n=Math.min(6,s?.list?.length||6),t={0:{spaceBetween:16,freeMode:!1,slidesPerView:o?2:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:o?2:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:n,slidesPerGroup:n}},r=P(`.${a}`,t);return M(u,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1,el:`.swiper-pagination-${i}`},className:`!overflow-visible ${r?a:""} ${c||""}`,modules:[b,y,g],breakpoints:t,children:[r&&e("style",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:r}}),s?.list?.map((m,l)=>e(S,{className:"!h-[unset]",children:e(d,{data:m,configuration:{...s?.configuration,index:l}})},i+"SwiperSlide"+l)),e("div",{className:`swiper-pagination-${i} swiper-pagination`})]})});p.displayName="SwiperBox";var R=p;export{R as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as o,jsxs as u}from"react/jsx-runtime";import N,{useImperativeHandle as I,useRef as c}from"react";import{cn as s}from"../../helpers/utils.js";import h from"../../components/picture.js";import{withLayout as _}from"../../shared/Styles.js";import $ from"../Title/index.js";import y from"./SwiperCategory.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as v}from"../../shared/trackUrlRef.js";const l="image",m="category_banner",d=5,L=3,T=(e,a)=>{const t=[];for(let i=0;i<e.length;i+=a)t.push(e.slice(i,i+a));return t},E=({data:e,configuration:a})=>{const t=c(null);return b(t,{componentType:l,componentName:m,componentTitle:e?.name,position:a?.index+1}),u("div",{ref:t,className:s("tablet:p-3 laptop:p-4 desktop:p-6","bg-container-primary hover:bg-info-white group box-border flex h-full cursor-pointer flex-col justify-start overflow-hidden duration-300","desktop:gap-2 gap-1","rounded-box"),children:[o("div",{className:"flex items-center justify-center transition-all duration-300 group-hover:scale-110",children:o("a",{"aria-label":e?.name,href:v(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>a?.event?.primaryButton(e,a?.index),children:o(h,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] desktop:size-[116px] lg-desktop:size-[146px] size-[72px]",imgClassName:"size-full object-cover"})})}),o("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})},M=({data:e,configuration:a,index:t,isFirstItemLarger:i})=>{const r=c(null);b(r,{componentType:l,componentName:m,componentTitle:e?.name,position:a?.index+1});const n=t===0;return u("div",{ref:r,className:s("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",i?s("p-4",n?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4","rounded-box"),children:[o("a",{href:v(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-position":`''#${a?.index+1}`,onClick:()=>a?.event?.primaryButton(e,a?.index+1),children:o(h,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:s("m-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",i?s(n?"size-full max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),o("p",{className:s("text-info-primary w-full text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},S=({data:e,configuration:a})=>{const i=(a?.totalCategories??0)<=d;return o("div",{className:`gap-3 ${i?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((r,n)=>o(M,{index:n,data:r,configuration:a,isFirstItemLarger:i},n))})},C=N.forwardRef((e,a)=>{const{data:t,className:i="",key:r,event:n,...k}=e,p=(t?.isShowSelect?t?.products:t?.productData)||[],g=p.length>d,f=p.length,w=T(p,g?L:d),x=c(null);return I(a,()=>x.current),u("div",{...k,ref:x,className:s("w-full overflow-hidden",i,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&o($,{data:{title:t?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(y,{id:`Category${r}`,Slide:E,data:{list:p,configuration:{shape:t?.shape,event:n,title:t?.title,totalCategories:f}},paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),o("div",{className:"tablet:hidden block",children:o(y,{id:`Category1${r}`,Slide:S,data:{list:w,configuration:{shape:t?.shape,event:n,title:t?.title,totalCategories:f}},isHalf:g,paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),o("div",{className:"h-7"})]})});C.displayName="Category";var F=_(C);export{F as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as n,jsxs as
|
|
1
|
+
"use client";import{jsx as n,jsxs as p}from"react/jsx-runtime";import ve,{useEffect as P,useRef as E,useImperativeHandle as ye,useId as be,useState as V}from"react";import{cn as g}from"../../helpers/utils.js";import{Tabs as Se,TabsList as Te,TabsTrigger as ke,TabsContent as xe}from"../../components/tabs.js";import Ce from"../Title/index.js";import Ie from"../SwiperBox/index.js";import{withLayout as De}from"../../shared/Styles.js";import{gaTrack as B}from"../../shared/track.js";import{useMediaQuery as w}from"react-responsive";import{useRollout as Le}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as H,ShelfDisplayHorizontalItem as Me}from"./shelfDisplayItem.js";const Re="image",Ne="product_shelf",z=i=>i==null?"default":String(i).replace(/[^a-zA-Z0-9_-]/g,"")||"default",q=ve.forwardRef(({data:i,event:_,buildData:A,breakpoints:$,className:O="",recommendedData:m,target:Z="_self",metafields:j,isDisplayGudgments:v=!1,isDisplayBackImage:Q=!1,renderOriginalPrice:W,renderPriceLabel:F,renderPrice:G,onAddCart:J,onBuyNow:K,onLearnMore:U,formatPrice:X,...Y},ee)=>{const{productsTab:r=[],productsCard:te=[],title:y,isShowTab:d=!0,tabShape:se="square",isShowTag:ne=!1,isShowOriginalPrice:ae=!0,isShowRecommendedCard:oe=!1,isTile:ie=!1,tileMaxRows:f,tileExpandText:re="Show more",tileCollapseText:le="Show less",...ce}=i,b=E(!1),S=E(null),me=be(),[pe,de]=V(!1);P(()=>{de(!0)},[]);const fe=w({query:"(max-width: 768px)"}),ue=w({query:"(min-width: 1025px)"}),he=w({query:"(min-width: 1440px)"}),[u,ge]=V(!1),[we,T]=Le({threshold:0});ye(ee,()=>S.current);const k=()=>{B({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:m?.map((e,a)=>{const t=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:a+1}})}})};P(()=>{T&&m?.length&&!b.current&&(b.current=!0,k())},[T,m]);const x=(e,a)=>{if(a){const t=m?.map?.(s=>({...s,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const o=e?.map?.(t=>{const s=A?.products?.find(l=>l?.handle===t?.handle);if(s)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...s}})?.filter(t=>t);return o?.length?o:[]},C=z(me),I=(e,a)=>{const o={...ce,event:_,isShowTag:ne,isShowOriginalPrice:ae,target:Z,metafields:j,itemLength:e.length,isDisplayBackImage:Q,renderOriginalPrice:W,renderPriceLabel:F,renderPrice:G,onAddCart:J,onBuyNow:K,onLearnMore:U,formatPrice:X};if(ie&&pe&&ue){const h=he?4:3,L=typeof f=="number"&&f>0,M=L?f*h:e.length,R=L&&e.length>M,_e=R&&!u?e.slice(0,M):e;return p("div",{children:[n("div",{className:g("shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4",d?"mt-6":""),children:_e.map((c,N)=>n(H,{data:c,configuration:{...o,index:N}},c?.id||c?.handle||N))}),R&&p("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[n("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>ge(c=>!c),children:u?le:re}),n("svg",{xmlns:"http://www.w3.org/2000/svg",className:g("laptop:size-5 size-4",u&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:n("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}const t=e.length<=1&&v,s=!fe&&e.length<=2&&v,l=h=>{switch(h){case 1440:return s?e.length:4;case 1024:return s?e.length:3;default:return s?e.length:2.3}},D=a?`${C}-${z(a)}`:C;return n(Ie,{data:{list:e,configuration:o},id:D,className:`${d?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:s?"flex-1":"",Slide:s?Me:H,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:$||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:t?1:1.2},768:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:l()},1025:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:l(1024)},1440:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:l(1440)}}},D)};return p("div",{ref:S,...Y,className:g("shelf-display-wrap text-info-primary w-full",O,{"aiui-dark":i?.theme==="dark"}),children:[y&&n(Ce,{data:{title:y}}),n("div",{ref:we,children:d&&r?.length>0?p(Se,{defaultValue:r?.[0]?.tab,onValueChange:e=>{const a=r?.find(o=>o?.tab===e);if(a){if(!a.isShowRecommendedTab){B({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Re,component_name:Ne,component_title:i?.title,component_position:1,navigation:e}});return}k()}},shape:se==="rounded"?"rounded":"square",children:[n(Te,{children:r.map(e=>n(ke,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),r.map(e=>n(xe,{value:e?.tab,children:I(x(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):I(x(te,oe))})]})});q.displayName="ShelfDisplay";var Ze=De(q);export{Ze as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as Ae,jsx as s,jsxs as f}from"react/jsx-runtime";import{useAiuiContext as Ne}from"../AiuiProvider/index.js";import{formatVariantPrice as Ce}from"./shelfDisplay.js";import _e from"../../components/picture.js";import Se from"../../components/badge.js";import{cn as w}from"../../helpers/utils.js";import{Text as Te}from"../../components/text.js";import fe from"../../components/button.js";import{gaTrack as Be}from"../../shared/track.js";import{trackUrlRef as Pe}from"../../shared/trackUrlRef.js";import{Heading as Le}from"../../components/heading.js";import{useExposure as $e}from"../../hooks/useExposure.js";import{useRef as De,useEffect as Ie,useMemo as ye,useState as j}from"react";const ge="image",he="product_shelf",xe=999999999e-2,ze=e=>{const t=e?.sku,_=e?.variants,E=_?.find(O=>O?.sku===t),K=E?.image?.url||_?.[0]?.image?.url||"",re=E?.image?.altText||_?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:K,altText:re}},Fe=({items:e})=>e?.length?s("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,_)=>typeof t.icon=="string"?s("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},_):s(Te,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},_))}):null,Ke=({data:e,configuration:t})=>{const{isDisplayBackImage:_=!1,itemShape:E,metafields:K,isTopTag:re=!1,isShowTag:O,isShowOriginalPrice:$,isShowShortTitle:ve=!1,isShowPricesTag:D=!1,pricesTagTextColor:W,pricesTagBgColor:H,itemsTagTextColor:v,itemsTagBgColor:Q,formatPrice:ie,renderOriginalPrice:X,renderPriceLabel:be,renderPrice:U}=t||{},{locale:T="es",copyWriting:oe,currencyDisplay:Y}=Ne(),{discounts:Z,discountsCopy:le}=K||{},ne=De(null),[n,ae]=j([]),[ce,I]=j(""),[pe,z]=j(!1),[b,R]=j(!1),me=(i,p,m,d)=>{const{primaryFun:x,onAddCart:S,onBuyNow:te,onLearnMore:se,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&te)return te(i,p+1,m,d);if(x==="LearnMore"&&se)return se(i,p+1,m,d)}we?.primaryButton?.(i,p+1,m,d)},ke=(i,p,m,d)=>{const{secondaryFun:x,onAddCart:S,onBuyNow:te,onLearnMore:se,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&te)return te(i,p+1,m,d);if(x==="LearnMore"&&se)return se(i,p+1,m,d)}we?.secondaryButton?.(i,p+1,m,d)},o=ye(()=>{const i=e?.variants||[];if(i.length)return e?.sku?i?.find?.(p=>p?.sku===e?.sku)||i[0]:i?.[0]},[e?.sku,e?.variants]),A=o?.id?.split?.("/")||[],N=A?.[A?.length-1],y=!o?.availableForSale||o?.price?.amount===xe||o?.price===xe,k=o?.coupons?.[0],de=e?.price?.currencyCode||"USD",q=ye(()=>Ce({locale:T,amount:k?k?.variant_price4wscode:o?.price,baseAmount:k?o?.price:0,currencyCode:de,currencyDisplay:Y,customFormatPrice:ie}),[de,T,k,Y,o,ie]),{price:F,basePrice:C,discount:B,discountAmount:M}=q,{imageUrl:V,altText:ue}=ze(e),G=e?.custom_name||e?.title,P=ve&&o?.metafields?.infos?.page_short_title||G,ee=e?.custom_description||e?.description,r=()=>{if(k?.value_type==="fixed_amount"){const i=M||"",p=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(p){const[,m,d,x]=p;let S=d;return d.endsWith(".00")?S=d.replace(/\.00$/,""):d.endsWith(",00")&&(S=d.replace(/,00$/,"")),`${m}${S}${x}`}return i}return B||""};Ie(()=>{let i=[];if(B||M){const m=`${r()} ${Z?.off||le?.off||""}`;I(m)}const p=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,B&&D?1:2)||[];ae(i.concat(p))},[e?.tags,B,M,D,Z?.off,le?.off]),$e(ne,{componentType:ge,componentName:he,componentTitle:G,componentDescription:ee,position:t?.index+1});const l=async()=>{if(!pe&&!e?.custom_primary_link){z(!0);try{await me(e,t?.index,t,k)}finally{z(!1)}}},a=async()=>{if(!b&&!e?.custom_secondary_link){R(!0);try{await ke(e,t?.index,t,k)}finally{R(!1)}}},c=()=>f("div",{className:"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4",children:[f("div",{className:"shelf-display-product-content-title-desc",children:[P?s(Le,{as:"h3",title:P||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:P||""}):null,s(Te,{size:2,className:w("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:ee||""})]}),f("div",{className:"shelf-display-product-content-price-button",children:[s("div",{className:"mb-2 flex flex-wrap items-center",children:U?U(e,{price:F,basePrice:C,discount:B,discountAmount:M,variant:o,coupon:k,isSoldOut:y,isShowOriginalPrice:$}):y?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:oe?.soldOutText}):f(Ae,{children:[s("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:o?.availableForSale&&F||""}),X?X(e,{price:F,basePrice:C,discount:B,discountAmount:M,isShowOriginalPrice:$}):C&&$&&s("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:o?.availableForSale&&C||""})]})}),!U&&be?.(e,o,{isShowOriginalPrice:$}),f("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?s(fe,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:a,loading:b,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:l,loading:pe,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),u={...W?{color:W}:{},...H?{backgroundColor:H,backgroundImage:"none"}:{},...W||H?{outline:"none"}:{}},g={...v?{color:v}:{},...Q?{backgroundColor:Q,backgroundImage:"none"}:{},...v||Q?{outlineColor:v}:{}},L=()=>f("div",{className:"lg-desktop:min-h-[28px] lg-desktop:flex-[28] box-border flex min-h-6 flex-[24] flex-wrap gap-1 overflow-hidden",children:[D&&ce&&s(Se,{className:"shelf-prices-tag",variant:"fill",style:u,children:ce||""}),O&&n?.length>0&&n?.map?.((i,p)=>s(Se,{className:"shelf-items-tag",variant:"outline",style:g,children:i},p))]}),h=e?.custom_bg_image,J=e?.custom_theme;return s("div",{ref:ne,className:w("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]","laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative","md-tablet:h-[422px] shelf-display-item",h?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":J==="dark","aiui-light":J==="light"}),style:h?{backgroundImage:`url(${h})`}:void 0,children:_?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:f("div",{className:"relative inset-0 size-full",children:[s(L,{}),s(_e,{source:V,alt:ue,className:w("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":h})}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):f("div",{className:"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4",children:[s(L,{}),f("div",{className:w("shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden",{"opacity-0":h}),children:[s("a",{"aria-label":G,target:t?.target,href:Pe(`${T==="us"||!T?"":`/${T}`}/products/${e?.handle}?variant=${N}`,`${ge}_${he}`),onClick:()=>{Be({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},children:s(_e,{source:V,alt:ue,className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),s(Fe,{items:e?.socialEndorsements})]}),c()]})},e?.id||e?.handle)},Qe=({data:e,configuration:t})=>{const{itemShape:_,itemLength:E,metafields:K,isShowShortTitle:re,formatPrice:O,renderOriginalPrice:$,renderPriceLabel:ve,renderPrice:D}=t||{},{discounts:W,discountsCopy:H}=K||{},{locale:v="us",copyWriting:Q,currencyDisplay:ie}=Ne(),[X,be]=j([]),U=De(null),[T,oe]=j(!1),[Y,Z]=j(!1),le=(r,l,a,c)=>{const{primaryFun:u,onAddCart:g,onBuyNow:L,onLearnMore:h,event:J}=t||{};if(u){if(u==="AddCart"&&g)return g(r,l+1,a,c);if(u==="BuyNow"&&L)return L(r,l+1,a,c);if(u==="LearnMore"&&h)return h(r,l+1,a,c)}J?.primaryButton?.(r,l+1,a,c)},ne=(r,l,a,c)=>{const{secondaryFun:u,onAddCart:g,onBuyNow:L,onLearnMore:h,event:J}=t||{};if(u){if(u==="AddCart"&&g)return g(r,l+1,a,c);if(u==="BuyNow"&&L)return L(r,l+1,a,c);if(u==="LearnMore"&&h)return h(r,l+1,a,c)}J?.secondaryButton?.(r,l+1,a,c)},n=ye(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ae=n?.id?.split?.("/")||[],ce=ae?.[ae?.length-1],I=!n?.availableForSale||n?.price?.amount===xe||n?.price===xe,pe=t?.isShowTag,z=t?.isShowOriginalPrice,b=n?.coupons?.[0],R=!!(z&&b),me=e?.price?.currencyCode||"USD",ke=ye(()=>Ce({locale:v,amount:R?b?.variant_price4wscode:n?.price,baseAmount:R?n?.price:0,currencyCode:me,currencyDisplay:ie,customFormatPrice:O}),[me,v,R,b?.variant_price4wscode,n,O]),{price:o,basePrice:A,discount:N,discountAmount:y}=ke,{imageUrl:k,altText:de}=ze(e),q=e?.custom_name||e?.title,F=re&&n?.metafields?.infos?.page_short_title||q,C=e?.custom_description||e?.description;$e(U,{componentType:ge,componentName:he,componentTitle:q,componentDescription:C,position:t?.index+1});const B=async()=>{if(!T&&!e?.custom_primary_link){oe(!0);try{await le(e,t?.index,t,b)}finally{oe(!1)}}},M=async()=>{if(!Y&&!e?.custom_secondary_link){Z(!0);try{await ne(e,t?.index,t,b)}finally{Z(!1)}}},V=()=>E>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>E>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",G=()=>{if(b?.value_type==="fixed_amount"){const r=y||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,c,u]=l;let g=c;return c.endsWith(".00")?g=c.replace(/\.00$/,""):c.endsWith(",00")&&(g=c.replace(/,00$/,"")),`${a}${g}${u}`}return r}return N||""};Ie(()=>{let r=[];if(N||y){const a=`${G()} ${W?.off||H?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,N?1:2)||[];be(r.concat(l))},[e?.tags,N,y,W?.off,H?.off]);const P=e?.custom_bg_image,ee=e?.custom_theme;return s("div",{ref:U,className:w(V().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",P?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":ee==="dark","aiui-light":ee==="light"}),style:P?{backgroundImage:`url(${P})`}:void 0,children:f("div",{className:w(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:w(V().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":P}),children:s("a",{"aria-label":q,target:t?.target,href:Pe(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${ce}`,`${ge}_${he}`),onClick:()=>{Be({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(_e,{source:k,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),f("div",{className:w("flex flex-col items-start justify-center",V().boxItem),children:[pe&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:X?.length>0&&X?.map?.((r,l)=>s(Se,{className:"shelf-items-tag",variant:"fill",children:r},l))}),F?s(Le,{as:"h3",title:F||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:F||""}):null,C?s(Te,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:C||""}):null,s("div",{className:"mb-2 mt-5 flex flex-wrap items-center",children:D?D(e,{price:o,basePrice:A,discount:N,discountAmount:y,variant:n,coupon:b,isSoldOut:I,isShowOriginalPrice:z}):I?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:Q?.soldOutText}):f(Ae,{children:[s("div",{className:"final-price tablet:text-xl text-info-primary whitespace-nowrap text-xl font-bold",children:n?.availableForSale&&o||""}),$?$(e,{price:o,basePrice:A,discount:N,discountAmount:y,isShowOriginalPrice:z}):A&&s("div",{className:"origin-price tablet:text-xl text-info-quaternary ml-1 whitespace-nowrap text-lg font-bold line-through",children:n?.availableForSale&&A||""})]})}),!D&&ve?.(e,n,{isShowOriginalPrice:z}),f("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!I?s(fe,{disabled:I&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:M,loading:Y,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:I&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:B,loading:T,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Qe as ShelfDisplayHorizontalItem,Ke as ShelfDisplayWrapItem,ze as getProductImage};
|
|
1
|
+
import{Fragment as Te,jsx as s,jsxs as u}from"react/jsx-runtime";import{useAiuiContext as Ce}from"../AiuiProvider/index.js";import{formatVariantPrice as Be}from"./shelfDisplay.js";import _e from"../../components/picture.js";import Se from"../../components/badge.js";import{cn as w}from"../../helpers/utils.js";import{Text as Ne}from"../../components/text.js";import fe from"../../components/button.js";import{gaTrack as Pe}from"../../shared/track.js";import{trackUrlRef as Le}from"../../shared/trackUrlRef.js";import{Heading as $e}from"../../components/heading.js";import{useExposure as De}from"../../hooks/useExposure.js";import{useRef as Ie,useEffect as ze,useMemo as ye,useState as E}from"react";const ge="image",he="product_shelf",xe=999999999e-2,Ae=e=>{const t=e?.sku,_=e?.variants,O=_?.find(j=>j?.sku===t),K=O?.image?.url||_?.[0]?.image?.url||"",re=O?.image?.altText||_?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:K,altText:re}},Fe=({items:e})=>e?.length?s("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,_)=>typeof t.icon=="string"?s("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},_):s(Ne,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},_))}):null,Ke=({data:e,configuration:t})=>{const{isDisplayBackImage:_=!1,itemShape:O,metafields:K,isTopTag:re=!1,isShowTag:j,isShowOriginalPrice:$,isShowShortTitle:ve=!1,isShowPricesTag:D=!1,pricesTagTextColor:W,pricesTagBgColor:H,itemsTagTextColor:v,itemsTagBgColor:Q,formatPrice:ie,renderOriginalPrice:X,renderPriceLabel:be,renderPrice:U}=t||{},{locale:N="es",copyWriting:oe,currencyDisplay:Y}=Ce(),{discounts:Z,discountsCopy:le}=K||{},ne=Ie(null),[n,ae]=E([]),[ce,I]=E(""),[pe,z]=E(!1),[b,R]=E(!1),me=(i,p,m,d)=>{const{primaryFun:x,onAddCart:S,onBuyNow:te,onLearnMore:se,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&te)return te(i,p+1,m,d);if(x==="LearnMore"&&se)return se(i,p+1,m,d)}we?.primaryButton?.(i,p+1,m,d)},ke=(i,p,m,d)=>{const{secondaryFun:x,onAddCart:S,onBuyNow:te,onLearnMore:se,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&te)return te(i,p+1,m,d);if(x==="LearnMore"&&se)return se(i,p+1,m,d)}we?.secondaryButton?.(i,p+1,m,d)},o=ye(()=>{const i=e?.variants||[];if(i.length)return e?.sku?i?.find?.(p=>p?.sku===e?.sku)||i[0]:i?.[0]},[e?.sku,e?.variants]),A=o?.id?.split?.("/")||[],T=A?.[A?.length-1],y=!o?.availableForSale||o?.price?.amount===xe||o?.price===xe,k=o?.coupons?.[0],de=e?.price?.currencyCode||"USD",q=ye(()=>Be({locale:N,amount:k?k?.variant_price4wscode:o?.price,baseAmount:k?o?.price:0,currencyCode:de,currencyDisplay:Y,customFormatPrice:ie}),[de,N,k,Y,o,ie]),{price:F,basePrice:C,discount:B,discountAmount:M}=q,{imageUrl:V,altText:ue}=Ae(e),G=e?.custom_name||e?.title,P=ve&&o?.metafields?.infos?.page_short_title||G,ee=e?.custom_description||e?.description,r=()=>{if(k?.value_type==="fixed_amount"){const i=M||"",p=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(p){const[,m,d,x]=p;let S=d;return d.endsWith(".00")?S=d.replace(/\.00$/,""):d.endsWith(",00")&&(S=d.replace(/,00$/,"")),`${m}${S}${x}`}return i}return B||""};ze(()=>{let i=[];if(B||M){const m=`${r()} ${Z?.off||le?.off||""}`;I(m)}const p=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,B&&D?1:2)||[];ae(i.concat(p))},[e?.tags,B,M,D,Z?.off,le?.off]),De(ne,{componentType:ge,componentName:he,componentTitle:G,componentDescription:ee,position:t?.index+1});const l=async()=>{if(!pe&&!e?.custom_primary_link){z(!0);try{await me(e,t?.index,t,k)}finally{z(!1)}}},a=async()=>{if(!b&&!e?.custom_secondary_link){R(!0);try{await ke(e,t?.index,t,k)}finally{R(!1)}}},c=()=>u("div",{className:"shelf-display-product-content desktop:gap-6 flex flex-1 flex-col justify-between gap-4",children:[u("div",{className:"shelf-display-product-content-title-desc",children:[P?s($e,{as:"h3",title:P||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:P||""}):null,s(Ne,{size:2,className:w("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:ee||""})]}),u("div",{className:"shelf-display-product-content-price-button",children:[s("div",{className:"mb-2 flex flex-wrap items-center",children:U?U(e,{price:F,basePrice:C,discount:B,discountAmount:M,variant:o,coupon:k,isSoldOut:y,isShowOriginalPrice:$}):y?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:oe?.soldOutText}):u(Te,{children:[s("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:o?.availableForSale&&F||""}),X?X(e,{price:F,basePrice:C,discount:B,discountAmount:M,isShowOriginalPrice:$}):C&&$&&s("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:o?.availableForSale&&C||""})]})}),!U&&be?.(e,o,{isShowOriginalPrice:$}),u("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?s(fe,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:a,loading:b,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:l,loading:pe,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),f={...W?{color:W}:{},...H?{backgroundColor:H,backgroundImage:"none"}:{},...W||H?{outline:"none"}:{}},g={...v?{color:v}:{},...Q?{backgroundColor:Q,backgroundImage:"none"}:{},...v||Q?{outlineColor:v}:{}},L=()=>u("div",{className:"lg-desktop:min-h-[28px] box-border flex min-h-6 flex-wrap gap-1 overflow-hidden",children:[D&&ce&&s(Se,{className:"shelf-prices-tag",variant:"fill",style:f,children:ce||""}),j&&n?.length>0&&n?.map?.((i,p)=>s(Se,{className:"shelf-items-tag",variant:"outline",style:g,children:i},p))]}),h=e?.custom_bg_image,J=e?.custom_theme;return s("div",{ref:ne,className:w("shelf-display-item box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300","rounded-box relative",h?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":J==="dark","aiui-light":J==="light"}),style:h?{backgroundImage:`url(${h})`}:void 0,children:_?u(Te,{children:[s(_e,{source:V,alt:ue,className:w("absolute inset-0 size-full",{"opacity-0":h}),imgClassName:"size-full object-cover"}),u("div",{className:"desktop:p-6 relative flex flex-1 flex-col p-4",children:[s(L,{}),c()]})]}):u("div",{className:"desktop:gap-2 desktop:p-6 desktop:pt-4 flex flex-1 flex-col gap-1 p-4",children:[s(L,{}),u("div",{className:w("shelf-display-item-image lg-desktop:size-[240px] relative mx-auto size-[180px] overflow-hidden",{"opacity-0":h}),children:[s("a",{"aria-label":G,target:t?.target,href:Le(`${N==="us"||!N?"":`/${N}`}/products/${e?.handle}?variant=${T}`,`${ge}_${he}`),onClick:()=>{Pe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},className:"block size-full",children:s(_e,{source:V,alt:ue,className:"size-full",imgClassName:"size-full object-cover"})}),s(Fe,{items:e?.socialEndorsements})]}),c()]})},e?.id||e?.handle)},Qe=({data:e,configuration:t})=>{const{itemShape:_,itemLength:O,metafields:K,isShowShortTitle:re,formatPrice:j,renderOriginalPrice:$,renderPriceLabel:ve,renderPrice:D}=t||{},{discounts:W,discountsCopy:H}=K||{},{locale:v="us",copyWriting:Q,currencyDisplay:ie}=Ce(),[X,be]=E([]),U=Ie(null),[N,oe]=E(!1),[Y,Z]=E(!1),le=(r,l,a,c)=>{const{primaryFun:f,onAddCart:g,onBuyNow:L,onLearnMore:h,event:J}=t||{};if(f){if(f==="AddCart"&&g)return g(r,l+1,a,c);if(f==="BuyNow"&&L)return L(r,l+1,a,c);if(f==="LearnMore"&&h)return h(r,l+1,a,c)}J?.primaryButton?.(r,l+1,a,c)},ne=(r,l,a,c)=>{const{secondaryFun:f,onAddCart:g,onBuyNow:L,onLearnMore:h,event:J}=t||{};if(f){if(f==="AddCart"&&g)return g(r,l+1,a,c);if(f==="BuyNow"&&L)return L(r,l+1,a,c);if(f==="LearnMore"&&h)return h(r,l+1,a,c)}J?.secondaryButton?.(r,l+1,a,c)},n=ye(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ae=n?.id?.split?.("/")||[],ce=ae?.[ae?.length-1],I=!n?.availableForSale||n?.price?.amount===xe||n?.price===xe,pe=t?.isShowTag,z=t?.isShowOriginalPrice,b=n?.coupons?.[0],R=!!(z&&b),me=e?.price?.currencyCode||"USD",ke=ye(()=>Be({locale:v,amount:R?b?.variant_price4wscode:n?.price,baseAmount:R?n?.price:0,currencyCode:me,currencyDisplay:ie,customFormatPrice:j}),[me,v,R,b?.variant_price4wscode,n,j]),{price:o,basePrice:A,discount:T,discountAmount:y}=ke,{imageUrl:k,altText:de}=Ae(e),q=e?.custom_name||e?.title,F=re&&n?.metafields?.infos?.page_short_title||q,C=e?.custom_description||e?.description;De(U,{componentType:ge,componentName:he,componentTitle:q,componentDescription:C,position:t?.index+1});const B=async()=>{if(!N&&!e?.custom_primary_link){oe(!0);try{await le(e,t?.index,t,b)}finally{oe(!1)}}},M=async()=>{if(!Y&&!e?.custom_secondary_link){Z(!0);try{await ne(e,t?.index,t,b)}finally{Z(!1)}}},V=()=>O>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>O>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",G=()=>{if(b?.value_type==="fixed_amount"){const r=y||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,c,f]=l;let g=c;return c.endsWith(".00")?g=c.replace(/\.00$/,""):c.endsWith(",00")&&(g=c.replace(/,00$/,"")),`${a}${g}${f}`}return r}return T||""};ze(()=>{let r=[];if(T||y){const a=`${G()} ${W?.off||H?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,T?1:2)||[];be(r.concat(l))},[e?.tags,T,y,W?.off,H?.off]);const P=e?.custom_bg_image,ee=e?.custom_theme;return s("div",{ref:U,className:w(V().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",P?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":ee==="dark","aiui-light":ee==="light"}),style:P?{backgroundImage:`url(${P})`}:void 0,children:u("div",{className:w(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:w(V().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":P}),children:s("a",{"aria-label":q,target:t?.target,href:Le(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${ce}`,`${ge}_${he}`),onClick:()=>{Pe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(_e,{source:k,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),u("div",{className:w("flex flex-col items-start justify-center",V().boxItem),children:[pe&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:X?.length>0&&X?.map?.((r,l)=>s(Se,{className:"shelf-items-tag",variant:"fill",children:r},l))}),F?s($e,{as:"h3",title:F||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:F||""}):null,C?s(Ne,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:C||""}):null,s("div",{className:"mb-2 mt-5 flex flex-wrap items-center",children:D?D(e,{price:o,basePrice:A,discount:T,discountAmount:y,variant:n,coupon:b,isSoldOut:I,isShowOriginalPrice:z}):I?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:Q?.soldOutText}):u(Te,{children:[s("div",{className:"final-price tablet:text-xl text-info-primary whitespace-nowrap text-xl font-bold",children:n?.availableForSale&&o||""}),$?$(e,{price:o,basePrice:A,discount:T,discountAmount:y,isShowOriginalPrice:z}):A&&s("div",{className:"origin-price tablet:text-xl text-info-quaternary ml-1 whitespace-nowrap text-lg font-bold line-through",children:n?.availableForSale&&A||""})]})}),!D&&ve?.(e,n,{isShowOriginalPrice:z}),u("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!I?s(fe,{disabled:I&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:M,loading:Y,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:I&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:B,loading:N,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Qe as ShelfDisplayHorizontalItem,Ke as ShelfDisplayWrapItem,Ae as getProductImage};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as f}from"react/jsx-runtime";import ge,{useEffect as z,useRef as H,useImperativeHandle as we,useId as ye,useState as M}from"react";import{cn as w}from"../../helpers/utils.js";import{Tabs as ve,TabsList as _e,TabsTrigger as be,TabsContent as Se}from"../../components/tabs.js";import ke from"../Title/index.js";import B from"../SwiperBox/index.js";import{withLayout as De}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as
|
|
1
|
+
"use client";import{jsx as s,jsxs as f}from"react/jsx-runtime";import ge,{useEffect as z,useRef as H,useImperativeHandle as we,useId as ye,useState as M}from"react";import{cn as w}from"../../helpers/utils.js";import{Tabs as ve,TabsList as _e,TabsTrigger as be,TabsContent as Se}from"../../components/tabs.js";import ke from"../Title/index.js";import B from"../SwiperBox/index.js";import{withLayout as De}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as Te}from"react-responsive";import{useRollout as xe}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as Ce}from"../ShelfDisplay/shelfDisplayItem.js";import{ShelfDisplayHorizontalCardItem as V}from"./shelfDisplayHorizontalItem.js";const Pe="image",Ie="product_shelf",y=o=>o==null?"default":String(o).replace(/[^a-zA-Z0-9_-]/g,"")||"default",$={0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1025:{spaceBetween:16,freeMode:!1,slidesPerView:2}},A=ge.forwardRef((o,v)=>{const{isDisplayGudgments:Ne,...q}=o,{data:u,event:G,buildData:O,breakpoints:_,className:Z="",recommendedData:d,target:j="_self",metafields:Q,isDisplayBackImage:W=!1,renderOriginalPrice:F,renderPriceLabel:J,renderPrice:K,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee,...te}=q,{productsTab:r=[],productsCard:se=[],title:b,isShowTab:p=!0,tabShape:ae="square",isShowTag:ie=!1,isShowOriginalPrice:ne=!0,isShowRecommendedCard:oe=!1,isTile:re=!1,tileMaxRows:h,tileExpandText:le="Show more",tileCollapseText:de="Show less",...pe}=u,S=H(!1),k=H(null),me=ye(),[D,ce]=M(!1);z(()=>{ce(!0)},[]);const T=Te({query:"(min-width: 1025px)"}),[g,fe]=M(!1),[ue,x]=xe({threshold:0});we(v,()=>k.current);const C=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:d?.map((e,a)=>{const t=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:a+1}})}})};z(()=>{x&&d?.length&&!S.current&&(S.current=!0,C())},[x,d]);const P=(e,a)=>{if(a){const t=d?.map?.(i=>({...i,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const n=e?.map?.(t=>{const i=O?.products?.find(c=>c?.handle===t?.handle);if(i)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...i}})?.filter(t=>t);return n?.length?n:[]},m=y(me),I=(e,a)=>{const n={...pe,event:G,isShowTag:ie,isShowOriginalPrice:ne,target:j,metafields:Q,itemLength:e.length,isDisplayBackImage:W,renderOriginalPrice:F,renderPriceLabel:J,renderPrice:K,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee};if(re&&D&&T){const c=typeof h=="number"&&h>0,N=c?h*2:e.length,L=c&&e.length>N,he=L&&!g?e.slice(0,N):e;return f("div",{children:[s("div",{className:w("shelf-display-horizontal-tile grid grid-cols-2 gap-4",p?"mt-6":""),children:he.map((l,R)=>s(V,{data:l,configuration:{...n,index:R}},l?.id||l?.handle||R))}),L&&f("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[s("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>fe(l=>!l),children:g?de:le}),s("svg",{xmlns:"http://www.w3.org/2000/svg",className:w("laptop:size-5 size-4",g&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:s("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}if(D&&T){const i=a?`${m}-${y(a)}`:m;return s(B,{data:{list:e,configuration:n},id:i,className:`${p?"mt-6":""} shelf-display-horizontal-swiper-box !overflow-visible`,Slide:V,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:_||$},i)}const t=a?`${m}-${y(a)}`:m;return s(B,{data:{list:e,configuration:n},id:t,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,Slide:Ce,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:_||$},t)};return f("div",{ref:k,...te,className:w("shelf-display-horizontal-wrap text-info-primary w-full",Z,{"aiui-dark":u?.theme==="dark"}),children:[b&&s(ke,{data:{title:b}}),s("div",{ref:ue,children:p&&r?.length>0?f(ve,{defaultValue:r?.[0]?.tab,onValueChange:e=>{const a=r?.find(n=>n?.tab===e);if(a){if(!a.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Pe,component_name:Ie,component_title:u?.title,component_position:1,navigation:e}});return}C()}},shape:ae==="rounded"?"rounded":"square",children:[s(_e,{children:r.map(e=>s(be,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),r.map(e=>s(Se,{value:e?.tab,children:I(P(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):I(P(se,oe))})]})});A.displayName="ShelfDisplayHorizontal";var Ge=De(A);export{Ge as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as $e,jsx as
|
|
1
|
+
import{Fragment as $e,jsx as i,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{formatVariantPrice as Se}from"../ShelfDisplay/shelfDisplay.js";import{getProductImage as Te}from"../ShelfDisplay/shelfDisplayItem.js";import we from"../../components/picture.js";import X from"../../components/badge.js";import{cn as S}from"../../helpers/utils.js";import{Text as Y}from"../../components/text.js";import Z from"../../components/button.js";import{gaTrack as Ce}from"../../shared/track.js";import{trackUrlRef as Ne}from"../../shared/trackUrlRef.js";import{Heading as ze}from"../../components/heading.js";import{useExposure as Pe}from"../../hooks/useExposure.js";import{useRef as Be,useEffect as De,useMemo as ee,useState as T}from"react";const te="image",se="product_shelf",oe=999999999e-2,Le=({items:e})=>e?.length?i("div",{className:"shelf-display-horizontal-social-endorsements desktop:gap-2 desktop:top-2 absolute right-0 top-0 flex flex-none flex-col items-center gap-1 self-center",children:e.map((t,w)=>typeof t.icon=="string"?i("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},w):i(Y,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},w))}):null,Ke=({data:e,configuration:t})=>{const{isDisplayBackImage:w=!1,itemShape:Ie,metafields:I,isTopTag:Ee=!1,isShowTag:re,isShowOriginalPrice:x,isShowShortTitle:ie=!1,isShowPricesTag:C=!1,pricesTagTextColor:N,pricesTagBgColor:z,itemsTagTextColor:k,itemsTagBgColor:P,formatPrice:E,renderOriginalPrice:A,renderPriceLabel:le,renderPrice:B}=t||{},{locale:f="es",copyWriting:ne,currencyDisplay:F}=_e(),{discounts:M,discountsCopy:H}=I||{},O=Be(null),[j,ae]=T([]),[U,ce]=T(""),[W,R]=T(!1),[q,V]=T(!1),pe=(s,o,r,n)=>{const{primaryFun:a,onAddCart:c,onBuyNow:y,onLearnMore:h,event:$}=t||{};if(a){if(a==="AddCart"&&c)return c(s,o+1,r,n);if(a==="BuyNow"&&y)return y(s,o+1,r,n);if(a==="LearnMore"&&h)return h(s,o+1,r,n)}$?.primaryButton?.(s,o+1,r,n)},me=(s,o,r,n)=>{const{secondaryFun:a,onAddCart:c,onBuyNow:y,onLearnMore:h,event:$}=t||{};if(a){if(a==="AddCart"&&c)return c(s,o+1,r,n);if(a==="BuyNow"&&y)return y(s,o+1,r,n);if(a==="LearnMore"&&h)return h(s,o+1,r,n)}$?.secondaryButton?.(s,o+1,r,n)},l=ee(()=>{const s=e?.variants||[];if(s.length)return e?.sku?s?.find?.(o=>o?.sku===e?.sku)||s[0]:s?.[0]},[e?.sku,e?.variants]),G=l?.id?.split?.("/")||[],de=G?.[G?.length-1],u=!l?.availableForSale||l?.price?.amount===oe||l?.price===oe,p=l?.coupons?.[0],J=e?.price?.currencyCode||"USD",fe=ee(()=>Se({locale:f,amount:p?p?.variant_price4wscode:l?.price,baseAmount:p?l?.price:0,currencyCode:J,currencyDisplay:F,customFormatPrice:E}),[J,f,F,p,l,E]),{price:D,basePrice:v,discount:d,discountAmount:g}=fe,{imageUrl:ue,altText:ge}=Te(e),b=e?.custom_name||e?.title,L=ie&&l?.metafields?.infos?.page_short_title||b,K=e?.custom_description||e?.description,ye=()=>{if(p?.value_type==="fixed_amount"){const s=g||"",o=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,r,n,a]=o;let c=n;return n.endsWith(".00")?c=n.replace(/\.00$/,""):n.endsWith(",00")&&(c=n.replace(/,00$/,"")),`${r}${c}${a}`}return s}return d||""};De(()=>{let s=[];if(d||g){const r=`${ye()} ${M?.off||H?.off||""}`;ce(r)}const o=e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,d&&C?1:2)||[];ae(s.concat(o))},[e?.tags,d,g,M?.off,H?.off,C]),Pe(O,{componentType:te,componentName:se,componentTitle:b,componentDescription:K,position:t?.index+1});const he=async()=>{if(!W&&!e?.custom_primary_link){R(!0);try{await pe(e,t?.index,t,p)}finally{R(!1)}}},xe=async()=>{if(!q&&!e?.custom_secondary_link){V(!0);try{await me(e,t?.index,t,p)}finally{V(!1)}}},ke={...N?{color:N}:{},...z?{backgroundColor:z,backgroundImage:"none"}:{},...N||z?{outline:"none"}:{}},ve={...k?{color:k}:{},...P?{backgroundColor:P,backgroundImage:"none"}:{},...k||P?{outlineColor:k}:{}},be=()=>m("div",{className:"lg-desktop:h-[28px] absolute left-0 top-0 z-10 box-border flex h-6 flex-wrap gap-1 overflow-hidden",children:[C&&U&&i(X,{className:"shelf-prices-tag",variant:"fill",style:ke,children:U||""}),re&&j?.length>0&&j?.map?.((s,o)=>i(X,{className:"shelf-items-tag",variant:"outline",style:ve,children:s},o))]}),_=e?.custom_bg_image,Q=e?.custom_theme;return m("div",{ref:O,className:S("shelf-display-horizontal-item box-border flex size-full cursor-pointer overflow-hidden duration-300","rounded-box","desktop:p-6 desktop:pt-4 p-4",_?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":Q==="dark","aiui-light":Q==="light"}),style:_?{backgroundImage:`url(${_})`}:void 0,children:[m("div",{className:"shelf-display-horizontal-left laptop:flex-[196] desktop:flex-[292] lg-desktop:flex-[380] relative flex flex-none flex-col items-center justify-center gap-2",children:[i(be,{}),i("a",{"aria-label":b,target:t?.target,href:Ne(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}?variant=${de}`,`${te}_${se}`),onClick:()=>{Ce({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},className:S("desktop:size-[180px] lg-desktop:size-[205px] size-[140px]",{"opacity-0":_}),children:i(we,{source:ue,alt:ge,className:"size-full",imgClassName:"size-full object-cover"})}),i(Le,{items:e?.socialEndorsements||I?.socialEndorsements})]}),m("div",{className:"shelf-display-horizontal-content desktop:flex-[332] desktop:pl-6 desktop:pt-2 lg-desktop:flex-[420] desktop:gap-6 flex min-w-0 flex-[224] flex-col justify-between gap-4 pl-4",children:[m("div",{className:"shelf-display-horizontal-content-title-desc",children:[L?i(ze,{as:"h3",title:L||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:L||""}):null,i(Y,{size:2,className:S("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:K||""})]}),m("div",{className:"shelf-display-horizontal-content-price-button",children:[i("div",{className:"mb-2 flex flex-wrap items-center",children:B?B(e,{price:D,basePrice:v,discount:d,discountAmount:g,variant:l,coupon:p,isSoldOut:u,isShowOriginalPrice:x}):u?i("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:ne?.soldOutText}):m($e,{children:[i("div",{className:"final-price lg-desktop:text-2xl text-info-primary whitespace-nowrap text-xl font-bold !leading-[1.2]",children:l?.availableForSale&&D||""}),A?A(e,{price:D,basePrice:v,discount:d,discountAmount:g,isShowOriginalPrice:x}):v&&x&&i("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 whitespace-nowrap text-xl font-bold !leading-[1.2] line-through",children:l?.availableForSale&&v||""})]})}),!B&&le?.(e,l,{isShowOriginalPrice:x}),m("div",{className:S("shelf-flex-button-group","lg-desktop:gap-3 desktop:flex-row flex flex-col items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!u?i(Z,{disabled:u&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:xe,loading:q,className:"laptop:w-full desktop:w-auto",children:t?.secondaryButton||""}):null,t?.primaryButton?i(Z,{disabled:u&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:he,loading:W,className:"laptop:w-full desktop:w-auto",children:t?.primaryButton||""}):null]})]})]})]},e?.id||e?.handle)};export{Ke as ShelfDisplayHorizontalCardItem};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as a}from"react";import{Text as o,Checkbox as u,Button as
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as a}from"react";import{Text as o,Checkbox as u,Button as S}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";import{LoadingDots as z}from"../../components/index.js";const D=/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/,L=({subscribeMetadata:t,onSubmit:h,className:k,loading:w,...v})=>{const[i,n]=a(null),[N,B]=a(t?.termsChecked),[A,E]=a(t?.newsChecked),[c,d]=a(null),[y,p]=a(!1),[x,b]=a(""),C=s=>{s.preventDefault();const r=new FormData(s.target),m=r.get("email"),f=r.get("terms"),F=r.get("news");if(!m){n(t?.emptyError);return}if(!D.test(m)){n(t?.formatError);return}if(!f){d(t?.termsError);return}h?.({email:m,terms:f,news:F,dealsType:t?.dealsType,onSuccess:()=>{p(!0);let T=setTimeout(()=>{p(!1),clearTimeout(T)},3e3)}})};return l("div",{...v,className:g("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",k),children:[e("style",{jsx:!0,global:!0,children:`
|
|
2
2
|
.subscribe-component input:-webkit-autofill,
|
|
3
3
|
.subscribe-component input:-webkit-autofill:hover,
|
|
4
4
|
.subscribe-component input:-webkit-autofill:focus {
|
|
@@ -7,4 +7,4 @@ import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as a}from"reac
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #fff;
|
|
9
9
|
}
|
|
10
|
-
`}),l("div",{className:"laptop:flex-1",children:[e(o,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),e(o,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{className:"laptop:flex-1",onSubmit:
|
|
10
|
+
`}),l("div",{className:"laptop:flex-1",children:[e(o,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),e(o,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{className:"laptop:flex-1",onSubmit:C,children:[l("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[l("div",{className:"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1",children:[e("input",{name:"email",onFocus:()=>n(null),value:x,onChange:s=>b(s.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),e("button",{type:"button",onClick:()=>b(""),className:g("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!x}),children:"\u2715"})]}),e(S,{type:"submit",className:"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:w?e(z,{}):e(o,{html:t?.button,className:"desktop:text-base text-sm font-bold leading-[1.2]"})})]}),i&&e(o,{as:"p",html:i,className:"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"mt-4 flex flex-col gap-2",children:[l("div",{className:"laptop:items-center flex items-start gap-2",children:[e(u,{name:"terms",id:"terms",size:"base",checked:N,onCheckedChange:s=>{B(s),s&&d(null)},className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]"}),e("label",{htmlFor:"terms",children:e(o,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),c&&e(o,{as:"p",html:c,className:"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"flex items-start gap-2",children:[e(u,{name:"news",id:"news",size:"base",checked:A,onCheckedChange:s=>{E(s)},className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]"}),e("label",{htmlFor:"news",children:e(o,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),y&&e(o,{as:"p",html:t?.successMessage,className:"text-brand-0 text-base font-bold leading-[1.2]"})]})]})]})};var P=L;export{P as default};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 根据 Swiper breakpoints 生成 SSR 首绘阶段的 slide 几何 CSS。
|
|
3
|
+
*
|
|
4
|
+
* swiper.css 中 .swiper-slide 默认 width: 100%，而 slidesPerView / spaceBetween 是纯 JS 参数，
|
|
5
|
+
* 要等 Swiper 初始化后才会写成内联 width / margin-right，导致首屏「单卡 → 多卡」布局跳变。
|
|
6
|
+
* 这里把相同的公式提前写成 CSS，Swiper 初始化后内联样式优先级更高，自动接管。
|
|
7
|
+
*
|
|
8
|
+
* Swiper 只会命中「不大于视口宽度的最大断点」，且不会继承更小断点的参数，
|
|
9
|
+
* 因此每个断点都完整输出 width 与 margin-right（缺省值同 Swiper：slidesPerView=1, spaceBetween=0）。
|
|
10
|
+
*
|
|
11
|
+
* 遇到 'auto' 或非数字的 slidesPerView / spaceBetween 时整体放弃（返回空串），避免生成与实际不一致的几何。
|
|
12
|
+
*/
|
|
13
|
+
export declare const buildSsrSlideCss: (selector: string, breakpoints?: Record<number, Object>) => string;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const m=n=>Number(n.toFixed(4)),c=(n,s)=>{if(!s)return"";const u=Object.entries(s).map(([e,i])=>({point:Number(e),params:i||{}})).filter(({point:e})=>Number.isFinite(e)&&e>=0).sort((e,i)=>e.point-i.point),o=[];for(const{point:e,params:i}of u){const{slidesPerView:r=1,spaceBetween:t=0}=i;if(typeof r!="number"||!Number.isFinite(r)||r<=0||typeof t!="number"||!Number.isFinite(t)||t<0)return"";const p=m((r-1)*t);o.push(`@media (min-width: ${e}px) { ${n}:not(.swiper-initialized) .swiper-slide { width: calc((100% - ${p}px) / ${r}); margin-right: ${t}px; } }`)}return o.join(`
|
|
2
|
+
`)};export{c as buildSsrSlideCss};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as _,jsx as e,jsxs as i}from"react/jsx-runtime";import z,{useId as L,useState as d}from"react";import{cn as t}from"../../helpers/utils.js";import{Swiper as M,SwiperSlide as E}from"swiper/react";import{Navigation as P,FreeMode as $,Mousewheel as j}from"swiper/modules";import{buildSsrSlideCss as T}from"./buildSsrSlideCss.js";const A={0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},C=()=>i("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[e("span",{className:"bg-masks-0 group-hover:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:e("path",{d:"M15 6L9 12L15 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),R=()=>i("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[e("span",{className:"bg-masks-0 group-hover:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:e("path",{d:"M9 6L15 12L9 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),m=z.forwardRef(({data:n,breakpoints:f,Slide:g,className:w,id:s,itemClassName:b,showNavigation:a=!1,navigationPrevClassName:v,navigationNextClassName:S,...h},k)=>{const[x,N]=d(!0),[y,B]=d(!1),p=`swiper-ssr-${L().replace(/[^a-zA-Z0-9_-]/g,"")}`,u=f||A,l=T(`.${p}`,u),c=o=>{N(o.isBeginning),B(o.isEnd)};return i("div",{...h,ref:k,className:t(a&&"relative"),children:[l&&e("style",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:l}}),e(M,{className:t(w,l&&p),navigation:a?{nextEl:`.${s}-custom-swiper-button-next`,prevEl:`.${s}-custom-swiper-button-prev`}:!1,onProgress:c,onSlideChange:c,modules:[P,$,j],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:u,children:n?.list?.map((o,r)=>e(E,{className:t("!flex !h-[unset]",b),children:e(g,{data:o,configuration:n?.configuration?{...n?.configuration,index:r}:{index:r},jIndex:r})},s+"SwiperSlide"+r))}),a&&i(_,{children:[e("button",{className:t(`${s}-custom-swiper-button-prev`,"group absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center",!x&&"laptop:flex",v),"aria-label":"Previous slide",children:e(C,{})}),e("button",{className:t(`${s}-custom-swiper-button-next`,"group absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center",!y&&"laptop:flex",S),"aria-label":"Next slide",children:e(R,{})})]})]})});m.displayName="SwiperBox";var F=m;export{F as default};
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1234,9 +1234,6 @@ video {
|
|
|
1234
1234
|
.aspect-\[194\/194\] {
|
|
1235
1235
|
aspect-ratio: 194/194;
|
|
1236
1236
|
}
|
|
1237
|
-
.aspect-\[1\] {
|
|
1238
|
-
aspect-ratio: 1;
|
|
1239
|
-
}
|
|
1240
1237
|
.aspect-\[296\/320\] {
|
|
1241
1238
|
aspect-ratio: 296/320;
|
|
1242
1239
|
}
|
|
@@ -1374,6 +1371,10 @@ video {
|
|
|
1374
1371
|
width: 138px;
|
|
1375
1372
|
height: 138px;
|
|
1376
1373
|
}
|
|
1374
|
+
.size-\[140px\] {
|
|
1375
|
+
width: 140px;
|
|
1376
|
+
height: 140px;
|
|
1377
|
+
}
|
|
1377
1378
|
.size-\[14px\] {
|
|
1378
1379
|
width: 14px;
|
|
1379
1380
|
height: 14px;
|
|
@@ -1655,9 +1656,6 @@ video {
|
|
|
1655
1656
|
.h-\[56px\] {
|
|
1656
1657
|
height: 56px;
|
|
1657
1658
|
}
|
|
1658
|
-
.h-\[63\.6\%\] {
|
|
1659
|
-
height: 63.6%;
|
|
1660
|
-
}
|
|
1661
1659
|
.h-\[640px\] {
|
|
1662
1660
|
height: 640px;
|
|
1663
1661
|
}
|
|
@@ -1719,9 +1717,6 @@ video {
|
|
|
1719
1717
|
.max-h-\[146px\] {
|
|
1720
1718
|
max-height: 146px;
|
|
1721
1719
|
}
|
|
1722
|
-
.max-h-\[240px\] {
|
|
1723
|
-
max-height: 240px;
|
|
1724
|
-
}
|
|
1725
1720
|
.max-h-\[24px\] {
|
|
1726
1721
|
max-height: 24px;
|
|
1727
1722
|
}
|
|
@@ -2115,18 +2110,9 @@ video {
|
|
|
2115
2110
|
.flex-1 {
|
|
2116
2111
|
flex: 1 1 0%;
|
|
2117
2112
|
}
|
|
2118
|
-
.flex-\[178\] {
|
|
2119
|
-
flex: 178;
|
|
2120
|
-
}
|
|
2121
|
-
.flex-\[180\] {
|
|
2122
|
-
flex: 180;
|
|
2123
|
-
}
|
|
2124
2113
|
.flex-\[224\] {
|
|
2125
2114
|
flex: 224;
|
|
2126
2115
|
}
|
|
2127
|
-
.flex-\[24\] {
|
|
2128
|
-
flex: 24;
|
|
2129
|
-
}
|
|
2130
2116
|
.flex-none {
|
|
2131
2117
|
flex: none;
|
|
2132
2118
|
}
|
|
@@ -5408,9 +5394,6 @@ video {
|
|
|
5408
5394
|
.md-tablet\:h-\[360px\] {
|
|
5409
5395
|
height: 360px;
|
|
5410
5396
|
}
|
|
5411
|
-
.md-tablet\:h-\[422px\] {
|
|
5412
|
-
height: 422px;
|
|
5413
|
-
}
|
|
5414
5397
|
.md-tablet\:h-\[490px\] {
|
|
5415
5398
|
height: 490px;
|
|
5416
5399
|
}
|
|
@@ -5752,9 +5735,6 @@ video {
|
|
|
5752
5735
|
.tablet\:max-h-\[calc\(80vh-52px\)\] {
|
|
5753
5736
|
max-height: calc(80vh - 52px);
|
|
5754
5737
|
}
|
|
5755
|
-
.tablet\:min-h-\[393px\] {
|
|
5756
|
-
min-height: 393px;
|
|
5757
|
-
}
|
|
5758
5738
|
.tablet\:min-h-\[526px\] {
|
|
5759
5739
|
min-height: 526px;
|
|
5760
5740
|
}
|
|
@@ -6386,9 +6366,6 @@ video {
|
|
|
6386
6366
|
.laptop\:aspect-\[440\/192\] {
|
|
6387
6367
|
aspect-ratio: 440/192;
|
|
6388
6368
|
}
|
|
6389
|
-
.laptop\:aspect-\[440\/256\] {
|
|
6390
|
-
aspect-ratio: 440/256;
|
|
6391
|
-
}
|
|
6392
6369
|
.laptop\:aspect-\[440\/280\] {
|
|
6393
6370
|
aspect-ratio: 440/280;
|
|
6394
6371
|
}
|
|
@@ -6410,10 +6387,6 @@ video {
|
|
|
6410
6387
|
.laptop\:aspect-auto {
|
|
6411
6388
|
aspect-ratio: auto;
|
|
6412
6389
|
}
|
|
6413
|
-
.laptop\:size-1\/2 {
|
|
6414
|
-
width: 50%;
|
|
6415
|
-
height: 50%;
|
|
6416
|
-
}
|
|
6417
6390
|
.laptop\:size-10 {
|
|
6418
6391
|
width: 2.5rem;
|
|
6419
6392
|
height: 2.5rem;
|
|
@@ -6506,6 +6479,10 @@ video {
|
|
|
6506
6479
|
width: 86px;
|
|
6507
6480
|
height: 86px;
|
|
6508
6481
|
}
|
|
6482
|
+
.laptop\:size-\[88px\] {
|
|
6483
|
+
width: 88px;
|
|
6484
|
+
height: 88px;
|
|
6485
|
+
}
|
|
6509
6486
|
.laptop\:size-\[90\%\] {
|
|
6510
6487
|
width: 90%;
|
|
6511
6488
|
height: 90%;
|
|
@@ -6623,12 +6600,6 @@ video {
|
|
|
6623
6600
|
.laptop\:min-h-\[288px\] {
|
|
6624
6601
|
min-height: 288px;
|
|
6625
6602
|
}
|
|
6626
|
-
.laptop\:min-h-\[320px\] {
|
|
6627
|
-
min-height: 320px;
|
|
6628
|
-
}
|
|
6629
|
-
.laptop\:min-h-\[425px\] {
|
|
6630
|
-
min-height: 425px;
|
|
6631
|
-
}
|
|
6632
6603
|
.laptop\:min-h-\[448px\] {
|
|
6633
6604
|
min-height: 448px;
|
|
6634
6605
|
}
|
|
@@ -7613,9 +7584,6 @@ video {
|
|
|
7613
7584
|
.desktop\:aspect-\[427\/384\] {
|
|
7614
7585
|
aspect-ratio: 427/384;
|
|
7615
7586
|
}
|
|
7616
|
-
.desktop\:aspect-\[648\/238\] {
|
|
7617
|
-
aspect-ratio: 648/238;
|
|
7618
|
-
}
|
|
7619
7587
|
.desktop\:aspect-\[648\/256\] {
|
|
7620
7588
|
aspect-ratio: 648/256;
|
|
7621
7589
|
}
|
|
@@ -7653,6 +7621,10 @@ video {
|
|
|
7653
7621
|
width: 116px;
|
|
7654
7622
|
height: 116px;
|
|
7655
7623
|
}
|
|
7624
|
+
.desktop\:size-\[180px\] {
|
|
7625
|
+
width: 180px;
|
|
7626
|
+
height: 180px;
|
|
7627
|
+
}
|
|
7656
7628
|
.desktop\:size-\[196px\] {
|
|
7657
7629
|
width: 196px;
|
|
7658
7630
|
height: 196px;
|
|
@@ -7731,9 +7703,6 @@ video {
|
|
|
7731
7703
|
.desktop\:h-\[628px\] {
|
|
7732
7704
|
height: 628px;
|
|
7733
7705
|
}
|
|
7734
|
-
.desktop\:h-\[92\.3\%\] {
|
|
7735
|
-
height: 92.3%;
|
|
7736
|
-
}
|
|
7737
7706
|
.desktop\:h-\[96px\] {
|
|
7738
7707
|
height: 96px;
|
|
7739
7708
|
}
|
|
@@ -7759,12 +7728,6 @@ video {
|
|
|
7759
7728
|
.desktop\:min-h-\[2\.4em\] {
|
|
7760
7729
|
min-height: 2.4em;
|
|
7761
7730
|
}
|
|
7762
|
-
.desktop\:min-h-\[300px\] {
|
|
7763
|
-
min-height: 300px;
|
|
7764
|
-
}
|
|
7765
|
-
.desktop\:min-h-\[405px\] {
|
|
7766
|
-
min-height: 405px;
|
|
7767
|
-
}
|
|
7768
7731
|
.desktop\:min-h-\[448px\] {
|
|
7769
7732
|
min-height: 448px;
|
|
7770
7733
|
}
|
|
@@ -7871,9 +7834,6 @@ video {
|
|
|
7871
7834
|
.desktop\:flex-\[1260\] {
|
|
7872
7835
|
flex: 1260;
|
|
7873
7836
|
}
|
|
7874
|
-
.desktop\:flex-\[190\] {
|
|
7875
|
-
flex: 190;
|
|
7876
|
-
}
|
|
7877
7837
|
.desktop\:flex-\[292\] {
|
|
7878
7838
|
flex: 292;
|
|
7879
7839
|
}
|
|
@@ -8360,9 +8320,6 @@ video {
|
|
|
8360
8320
|
.lg-desktop\:aspect-\[8\/7\] {
|
|
8361
8321
|
aspect-ratio: 8/7;
|
|
8362
8322
|
}
|
|
8363
|
-
.lg-desktop\:aspect-\[824\/269\] {
|
|
8364
|
-
aspect-ratio: 824/269;
|
|
8365
|
-
}
|
|
8366
8323
|
.lg-desktop\:aspect-\[824\/320\] {
|
|
8367
8324
|
aspect-ratio: 824/320;
|
|
8368
8325
|
}
|
|
@@ -8421,6 +8378,10 @@ video {
|
|
|
8421
8378
|
width: 196px;
|
|
8422
8379
|
height: 196px;
|
|
8423
8380
|
}
|
|
8381
|
+
.lg-desktop\:size-\[205px\] {
|
|
8382
|
+
width: 205px;
|
|
8383
|
+
height: 205px;
|
|
8384
|
+
}
|
|
8424
8385
|
.lg-desktop\:size-\[240px\] {
|
|
8425
8386
|
width: 240px;
|
|
8426
8387
|
height: 240px;
|
|
@@ -8526,9 +8487,6 @@ video {
|
|
|
8526
8487
|
.lg-desktop\:h-\[746px\] {
|
|
8527
8488
|
height: 746px;
|
|
8528
8489
|
}
|
|
8529
|
-
.lg-desktop\:h-\[89\.5\%\] {
|
|
8530
|
-
height: 89.5%;
|
|
8531
|
-
}
|
|
8532
8490
|
.lg-desktop\:h-\[calc\(240px-100px\)\] {
|
|
8533
8491
|
height: calc(240px - 100px);
|
|
8534
8492
|
}
|
|
@@ -8547,18 +8505,12 @@ video {
|
|
|
8547
8505
|
.lg-desktop\:min-h-\[28px\] {
|
|
8548
8506
|
min-height: 28px;
|
|
8549
8507
|
}
|
|
8550
|
-
.lg-desktop\:min-h-\[309px\] {
|
|
8551
|
-
min-height: 309px;
|
|
8552
|
-
}
|
|
8553
8508
|
.lg-desktop\:min-h-\[320px\] {
|
|
8554
8509
|
min-height: 320px;
|
|
8555
8510
|
}
|
|
8556
8511
|
.lg-desktop\:min-h-\[32px\] {
|
|
8557
8512
|
min-height: 32px;
|
|
8558
8513
|
}
|
|
8559
|
-
.lg-desktop\:min-h-\[409px\] {
|
|
8560
|
-
min-height: 409px;
|
|
8561
|
-
}
|
|
8562
8514
|
.lg-desktop\:min-h-\[560px\] {
|
|
8563
8515
|
min-height: 560px;
|
|
8564
8516
|
}
|
|
@@ -8643,15 +8595,6 @@ video {
|
|
|
8643
8595
|
.lg-desktop\:flex-\[1056\] {
|
|
8644
8596
|
flex: 1056;
|
|
8645
8597
|
}
|
|
8646
|
-
.lg-desktop\:flex-\[221\] {
|
|
8647
|
-
flex: 221;
|
|
8648
|
-
}
|
|
8649
|
-
.lg-desktop\:flex-\[240\] {
|
|
8650
|
-
flex: 240;
|
|
8651
|
-
}
|
|
8652
|
-
.lg-desktop\:flex-\[28\] {
|
|
8653
|
-
flex: 28;
|
|
8654
|
-
}
|
|
8655
8598
|
.lg-desktop\:flex-\[380\] {
|
|
8656
8599
|
flex: 380;
|
|
8657
8600
|
}
|