@lanaco/lnc-react-ui 4.0.169 → 4.0.171

package/dist/SalesCampaignsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./utils-Dl9xPH4c.cjs"),D=require("./consts-goSZX3xP.cjs"),ce=require("./motion-B_VPZaJq.cjs"),s=require("./index-BpbMKBf_.cjs"),de=require("./Icon.cjs"),te=require("./ShopAvatar-CV3lj34D.cjs"),je=require("./Badge.cjs"),J=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),se=require("./IconButton.cjs"),ge=require("./useDetectMobile-zkbzoOGV.cjs"),$e=require("./index-Be-_NM9Q.cjs"),Te=p.styled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),S=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./utils-Dl9xPH4c.cjs"),L=require("./consts-goSZX3xP.cjs"),ie=require("./motion-B_VPZaJq.cjs"),s=require("./index-BpbMKBf_.cjs"),le=require("./Icon.cjs"),ne=require("./ShopAvatar-CV3lj34D.cjs"),Se=require("./Badge.cjs"),ce=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),te=require("./IconButton.cjs"),de=require("./useDetectMobile-zkbzoOGV.cjs"),je=require("./index-Be-_NM9Q.cjs"),c=require("./style-BAcV7F53.cjs"),Pe=S.styled.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -6,13 +6,13 @@
   border-radius: 1.25rem;
   border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
     padding: 1rem;
     gap: 0;
   }
-`,Pe=p.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"edged")};
+`,_e=S.styled.div`
+  border-radius: ${n=>C.getBorderRadiusValueWithUnits(n.theme,"edged")};
   height: 13.75rem;
   width: 13.75rem;
   min-width: 13.75rem;
@@ -34,7 +34,7 @@
       transform: scale(1.25);
     }
   }
-`,Se=p.styled.div`
+`,Te=S.styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -117,7 +117,7 @@
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -142,15 +142,15 @@
       gap: 0.25rem;
     }
   }
-`,ae=(e=!1,t=!1,a=!1)=>`
+`,se=(n=!1,t=!1,o=!1)=>`
     display: flex;
     ${t?"flex-wrap: wrap;":""}
     ${t?"":"flex-wrap: nowrap;"}
-    ${e?"align-items: center;":""}
-    ${a?"justify-content: center;":""}
-  `,Ie=p.styled(ce.motion.div)`
+    ${n?"align-items: center;":""}
+    ${o?"justify-content: center;":""}
+  `,ke=S.styled(ie.motion.div)`
   text-decoration: none;
-  ${e=>e.hasPermission===!0&&"cursor: pointer"};
+  ${n=>n.hasPermission===!0&&"cursor: pointer"};
 
   &:focus,
   &:hover,
@@ -165,14 +165,14 @@
     text-decoration: none;
   }
 
-  ${ae(!0)}
+  ${se(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: var(--gray-950, #14161a);
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"slight")};
+  border-radius: ${n=>C.getBorderRadiusValueWithUnits(n.theme,"slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -181,7 +181,7 @@
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${ae(!0,!1,!0)}
+    ${se(!0,!1,!0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -220,132 +220,33 @@
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
     padding: 0;
     font-size: 0.875rem;
   }
-`,Ce=p.styled.div`
+`,Ie=S.styled.div`
   position: absolute;
   top: 0.5rem;
-  ${e=>e.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
+  ${n=>n.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`,ke=p.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
-  background-color: ${e=>e==null?void 0:e.color};
+`,$e=S.styled.div`
+  border-radius: ${n=>C.getBorderRadiusValueWithUnits(n.theme,n.borderRadius||"slight")};
+  background-color: ${n=>n==null?void 0:n.color};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
-  width: ${e=>e.fitContent===!0?"fit-content":"1.5rem"};
-  ${e=>e.fitContent===!0&&"padding: 0 0.1rem;"};
+  width: ${n=>n.fitContent===!0?"fit-content":"1.5rem"};
+  ${n=>n.fitContent===!0&&"padding: 0 0.1rem;"};
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${e=>e.padding};
+  padding: ${n=>n.padding};
   & i {
     font-size: 0.813rem;
   }
-`,De=c.forwardRef(({src:e,...t},a)=>{const o=c.useRef();return c.useEffect(()=>{var m;const d=i=>{i.target.src=te.DefaultShopImage,i.onerror=null};return(m=o==null?void 0:o.current)==null||m.addEventListener("error",d),()=>{var i;(i=o==null?void 0:o.current)==null||i.removeEventListener("error",d)}},[]),n.jsx(c.Fragment,{ref:a,children:w.isDefinedNotEmptyString(e)?n.jsx("img",{ref:o,src:e,...t}):n.jsx("img",{src:te.DefaultShopImage,...t})})}),pe=e=>{const{uuid:t,hasPermission:a=!0,isUser:o,image:d,imageComponent:m,name:i,notifications:h=0,color:l="primary",size:b="large",style:u,disabled:P,onClick:f=()=>{},isActive:v,className:S,shopCategory:I,themeData:j}=e,x={theme:J.useTheme(),color:l,size:b,style:u,disabled:P};return c.createElement(Ie,{onClick:$=>{$.stopPropagation(),a===!0&&(f==null||f())},...x,key:i,className:`profile-item ${S}`,hasPermission:a,isActive:v,themeColor:(j==null?void 0:j.code)||"transparent"},n.jsx("div",{className:"logo-wrapper",children:w.isDefined(m)?m:d}),n.jsxs("div",{children:[n.jsx("div",{className:"name",children:i}),!o&&n.jsx("div",{className:"description",children:I}),h>0&&n.jsx("div",{className:"notifications-number",children:n.jsx(je,{className:"badge",color:"danger",size:"small",children:h>99?"99+":h})})]}))};pe.propTypes={id:s.PropTypes.any,isUserProfile:s.PropTypes.bool,themeColor:s.PropTypes.string,image:s.PropTypes.any,name:s.PropTypes.string,notifications:s.PropTypes.number,style:s.PropTypes.object,className:s.PropTypes.string,color:s.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:s.PropTypes.oneOf(["large"]),onSelect:s.PropTypes.func,hasPermission:s.PropTypes.bool};const oe=(e,t)=>{if(!e||!t)return null;const a=e.getTime()-t.getTime(),o=24*60*60*1e3;return Math.floor(a/o)},ie=e=>{if(e!==void 0){const t=new Date(e),a=t.getFullYear(),o=t.getMonth()+1;return`${String(t.getDate()).padStart(2)}. ${o}. ${a}.`}},me=c.forwardRef((e,t)=>{var ne;const a=J.useTheme(),{shopUuid:o,title:d="",coverPhoto:m,onSelect:i,startDate:h,endDate:l,salesPackages:b,shopName:u,shopCategory:P,shopImage:f,shopImageComponent:v,className:S,onSelectCard:I=()=>{},onSelectShop:j=()=>{},upcoming:g=!1,upcomingCampaignText:x,campaignSingleText:$,salesCampaignTypes:T=[],startsInPrefixTextPlural:q,startsinSuffixTextPlural:W,startsInPrefixTextSingular:V,startsinSuffixTextSingular:K,endsInPrefixTextPlural:F,endsinSuffixTextPlural:X,endsInPrefixTextSingular:E,endsinSuffixTextSingular:Z,themeData:Q,numberOfListings:C,numberOfListingsTextSingular:A,numberOfListingsTextPlural:M,metadata:r,...G}=e,H=c.useRef(),z=h?new Date(h)<=new Date:!1,fe=oe(h?new Date(h):null,new Date),R=oe(l?new Date(l):null,new Date),xe=R!==null&&R<=2&&R>0,ee=l?new Date(l).getTime():null,ye=Date.now(),Y=ee!==null?ee-ye:null,L=Y!==null&&Y>0&&Y<24*60*60*1e3,re=(_,U,y,N,k)=>y===1?`${_} ${y} ${N}`:`${U} ${y} ${k}`,we=()=>{if(!l)return null;const _=be,y=new Date(l).getTime()-_.getTime();if(y<=0)return null;const N=Math.floor(y/(1e3*60*60)),k=Math.floor(y%(1e3*60*60)/(1e3*60)),_e=Math.floor(y%(1e3*60)/1e3);return{hours:N,minutes:k,seconds:_e}},[be,ve]=c.useState(new Date);c.useEffect(()=>{if(!L)return;const _=setInterval(()=>{ve(new Date)},1e3);return()=>clearInterval(_)},[L]);const O=L?we():null;return n.jsxs(Te,{ref:H,theme:a,className:S,name:r==null?void 0:r.name,"data-accessor":r==null?void 0:r.accessor,onClick:_=>I(_,H),...G,children:[n.jsxs(Pe,{theme:a,onClick:()=>i==null?void 0:i(),children:[n.jsx("img",{src:m}),n.jsx(Ce,{children:b==null?void 0:b.map((_,U)=>{var y,N;return n.jsx(ke,{color:(y=T==null?void 0:T.find(k=>k.value===_))==null?void 0:y.color,theme:a,children:n.jsx(de,{icon:(N=T==null?void 0:T.find(k=>k.value===_))==null?void 0:N.icon})},`package__${U}`)})})]}),n.jsxs(Se,{theme:a,children:[n.jsx("div",{className:"text-block-wrapper",children:n.jsxs("div",{className:"title-block-wrapper",children:[n.jsx("div",{className:"campaign-title",children:(ne=g?x:$)==null?void 0:ne.toUpperCase()}),n.jsx("div",{className:"campaign-title-text",children:d}),l&&h&&n.jsxs("div",{className:"campaign-date",children:[ie(h)," - ",ie(l)]}),n.jsxs("div",{className:"timestamp-text",children:[C>0&&n.jsxs("span",{className:"listings-text",children:[C," ",C===1?A:M," ","∙"," "]}),n.jsx("span",{className:`duration-text ${xe?"urgent":""} ${z?"":"starts-in"}`,children:L&&O?n.jsxs("div",{className:"countdown-timer",children:[E," ",O.hours.toString().padStart(2,"0"),":",O.minutes.toString().padStart(2,"0"),":",O.seconds.toString().padStart(2,"0")]}):z?re(E,F,R,Z,X):re(V,q,fe,K,W)})]})]})}),n.jsx(pe,{hasPermission:!0,image:n.jsx(De,{src:f}),imageComponent:v,themeData:Q,isActive:!0,isUser:!1,name:u,shopCategory:P,onClick:()=>j(o)})]})]})});me.propTypes={title:s.PropTypes.oneOfType([s.PropTypes.string,s.PropTypes.element]),numberOfListings:s.PropTypes.number,dropdown:s.PropTypes.any,color:s.PropTypes.string};p.styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  & .arrow-icon {
-    & i {
-      transition: all 0.25s ease;
-      transform: ${e=>e.expanded===!0?"rotate(-180deg)":"rotate(0)"};
-    }
-  }
-
-  & .badge-button {
-    white-space: nowrap;
-    font-weight: 500;
-  }
-
-  & .gradient {
-    background: transparent !important;
-  }
-
-  & .campaign-item {
-    min-width: calc(50% - 0.87rem);
-    width: calc(50% - 0.87rem);
-    margin-right: 1rem;
-
-    &:nth-child(${e=>e==null?void 0:e.lastItemIdx}) {
-      margin-right: 0;
-    }
-  }
-
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
-    & .campaign-item {
-      min-width: 100%;
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-`;const B=p.styled.div`
-  width: ${e=>e.width||"100%"};
-  height: ${e=>(e.heightCoeff||1)*1.125}rem;
-  background-color: var(--gray-200, #dddfe4);
-
-  ${w.linearGradientAnimation("-90deg")}
-`,Ne=p.styled.div`
-  display: flex;
-  flex-direction: ${e=>e!=null&&e.row?"row":"column"};
-  gap: ${e=>(e==null?void 0:e.gap)??"0.5rem"};
-  width: ${e=>(e==null?void 0:e.width)??"100%"};
-`,le=p.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
-  background: var(--gray-200, #dddfe4);
-  position: relative;
-  max-height: ${e=>(e==null?void 0:e.height)??"5rem"};
-  max-width: ${e=>(e==null?void 0:e.width)??"5rem"};
-  height: ${e=>(e==null?void 0:e.height)??"5rem"};
-  width: ${e=>(e==null?void 0:e.width)??"5rem"};
-  flex-shrink: 0;
-
-  ${w.linearGradientAnimation()}
-`,Ee=p.styled.div`
-  background: var(--white, #fff);
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"edged")};
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
-  border: 1px solid var(--gray-95012, #14161a1f);
-
-  display: flex;
-  gap: 1rem;
-  padding: 1.25rem;
-  width: 100%;
-
-  & .campaign__left-section {
-    position: relative;
-  }
-
-  & .campaign__right-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: 18rem;
-    width: 100%;
-  }
-
-  & .campaign__user {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
-    flex-direction: column;
-
-    & .campaign__user {
-      margin-top: 1rem;
-    }
-  }
-`,Me=p.styled.div`
-  display: flex;
-  gap: 1.5rem;
-`,ze=c.forwardRef(({},e)=>{const t=J.useTheme();return n.jsxs(Ee,{ref:e,theme:t,children:[n.jsx("div",{className:"campaign__left-section",children:n.jsx(le,{theme:t,width:"15rem",height:"15rem",borderRadius:"edged"})}),n.jsxs("div",{className:"campaign__right-section",children:[n.jsxs(Ne,{theme:t,children:[n.jsx(B,{heightCoeff:.75,theme:t,width:"35%"}),n.jsx(B,{heightCoeff:1.25,theme:t}),n.jsx(B,{heightCoeff:3,theme:t})]}),n.jsxs("div",{className:"campaign__user",children:[n.jsx(le,{theme:t,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),n.jsx(B,{theme:t,width:"75%"})]})]})]})}),Re=({itemsCount:e=5,keyPrefix:t})=>n.jsx(Me,{children:Array.from({length:e},(a,o)=>n.jsx(ze,{},`${t}-skeleton-campaign-card-${o}`))}),Le=({children:e,fallbackComponent:t=n.jsx(n.Fragment,{}),isLoading:a=!1,itemsCount:o=5,keyPrefix:d})=>n.jsx(c.Suspense,{fallback:t,children:a===!0?n.jsx(Re,{itemsCount:o,keyPrefix:d}):e}),Oe=p.styled.div`
+`,Ce=d.forwardRef(({src:n,...t},o)=>{const a=d.useRef();return d.useEffect(()=>{var h;const g=i=>{i.target.src=ne.DefaultShopImage,i.onerror=null};return(h=a==null?void 0:a.current)==null||h.addEventListener("error",g),()=>{var i;(i=a==null?void 0:a.current)==null||i.removeEventListener("error",g)}},[]),r.jsx(d.Fragment,{ref:o,children:C.isDefinedNotEmptyString(n)?r.jsx("img",{ref:a,src:n,...t}):r.jsx("img",{src:ne.DefaultShopImage,...t})})}),pe=n=>{const{uuid:t,hasPermission:o=!0,isUser:a,image:g,imageComponent:h,name:i,notifications:m=0,color:l="primary",size:w="large",style:u,disabled:T,onClick:f=()=>{},isActive:b,className:k,shopCategory:I,themeData:j}=n,x={theme:ce.useTheme(),color:l,size:w,style:u,disabled:T};return d.createElement(ke,{onClick:P=>{P.stopPropagation(),o===!0&&(f==null||f())},...x,key:i,className:`profile-item ${k}`,hasPermission:o,isActive:b,themeColor:(j==null?void 0:j.code)||"transparent"},r.jsx("div",{className:"logo-wrapper",children:C.isDefined(h)?h:g}),r.jsxs("div",{children:[r.jsx("div",{className:"name",children:i}),!a&&r.jsx("div",{className:"description",children:I}),m>0&&r.jsx("div",{className:"notifications-number",children:r.jsx(Se,{className:"badge",color:"danger",size:"small",children:m>99?"99+":m})})]}))};pe.propTypes={id:s.PropTypes.any,isUserProfile:s.PropTypes.bool,themeColor:s.PropTypes.string,image:s.PropTypes.any,name:s.PropTypes.string,notifications:s.PropTypes.number,style:s.PropTypes.object,className:s.PropTypes.string,color:s.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:s.PropTypes.oneOf(["large"]),onSelect:s.PropTypes.func,hasPermission:s.PropTypes.bool};const oe=(n,t)=>{if(!n||!t)return null;const o=n.getTime()-t.getTime(),a=24*60*60*1e3;return Math.floor(o/a)},ae=n=>{if(n!==void 0){const t=new Date(n),o=t.getFullYear(),a=t.getMonth()+1;return`${String(t.getDate()).padStart(2)}. ${a}. ${o}.`}},ge=d.forwardRef((n,t)=>{var re;const o=ce.useTheme(),{shopUuid:a,title:g="",coverPhoto:h,onSelect:i,startDate:m,endDate:l,salesPackages:w,shopName:u,shopCategory:T,shopImage:f,shopImageComponent:b,className:k,onSelectCard:I=()=>{},onSelectShop:j=()=>{},upcoming:p=!1,upcomingCampaignText:x,campaignSingleText:P,salesCampaignTypes:_=[],startsInPrefixTextPlural:B,startsinSuffixTextPlural:W,startsInPrefixTextSingular:V,startsinSuffixTextSingular:J,endsInPrefixTextPlural:F,endsinSuffixTextPlural:X,endsInPrefixTextSingular:E,endsinSuffixTextSingular:Z,themeData:K,numberOfListings:D,numberOfListingsTextSingular:G,numberOfListingsTextPlural:z,metadata:e,...A}=n,H=d.useRef(),M=m?new Date(m)<=new Date:!1,ue=oe(m?new Date(m):null,new Date),R=oe(l?new Date(l):null,new Date),fe=R!==null&&R<=2&&R>0,Q=l?new Date(l).getTime():null,xe=Date.now(),Y=Q!==null?Q-xe:null,O=Y!==null&&Y>0&&Y<24*60*60*1e3,ee=(v,q,y,N,$)=>y===1?`${v} ${y} ${N}`:`${q} ${y} ${$}`,ye=()=>{if(!l)return null;const v=we,y=new Date(l).getTime()-v.getTime();if(y<=0)return null;const N=Math.floor(y/(1e3*60*60)),$=Math.floor(y%(1e3*60*60)/(1e3*60)),ve=Math.floor(y%(1e3*60)/1e3);return{hours:N,minutes:$,seconds:ve}},[we,be]=d.useState(new Date);d.useEffect(()=>{if(!O)return;const v=setInterval(()=>{be(new Date)},1e3);return()=>clearInterval(v)},[O]);const U=O?ye():null;return r.jsxs(Pe,{ref:H,theme:o,className:k,name:e==null?void 0:e.name,"data-accessor":e==null?void 0:e.accessor,onClick:v=>I(v,H),...A,children:[r.jsxs(_e,{theme:o,onClick:()=>i==null?void 0:i(),children:[r.jsx("img",{src:h}),r.jsx(Ie,{children:w==null?void 0:w.map((v,q)=>{var y,N;return r.jsx($e,{color:(y=_==null?void 0:_.find($=>$.value===v))==null?void 0:y.color,theme:o,children:r.jsx(le,{icon:(N=_==null?void 0:_.find($=>$.value===v))==null?void 0:N.icon})},`package__${q}`)})})]}),r.jsxs(Te,{theme:o,children:[r.jsx("div",{className:"text-block-wrapper",children:r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:(re=p?x:P)==null?void 0:re.toUpperCase()}),r.jsx("div",{className:"campaign-title-text",children:g}),l&&m&&r.jsxs("div",{className:"campaign-date",children:[ae(m)," - ",ae(l)]}),r.jsxs("div",{className:"timestamp-text",children:[D>0&&r.jsxs("span",{className:"listings-text",children:[D," ",D===1?G:z," ","∙"," "]}),r.jsx("span",{className:`duration-text ${fe?"urgent":""} ${M?"":"starts-in"}`,children:O&&U?r.jsxs("div",{className:"countdown-timer",children:[E," ",U.hours.toString().padStart(2,"0"),":",U.minutes.toString().padStart(2,"0"),":",U.seconds.toString().padStart(2,"0")]}):M?ee(E,F,R,Z,X):ee(V,B,ue,J,W)})]})]})}),r.jsx(pe,{hasPermission:!0,image:r.jsx(Ce,{src:f}),imageComponent:b,themeData:K,isActive:!0,isUser:!1,name:u,shopCategory:T,onClick:()=>j(a)})]})]})});ge.propTypes={title:s.PropTypes.oneOfType([s.PropTypes.string,s.PropTypes.element]),numberOfListings:s.PropTypes.number,dropdown:s.PropTypes.any,color:s.PropTypes.string};const De=S.styled.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -384,7 +285,7 @@
     right: 0;
   }
 
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
     gap: 1.25rem;
 
     & .scrollable-section__header {
@@ -396,13 +297,13 @@
       }
     }
   }
-`,Ue=p.styled(ce.motion.div)`
+`,Ne=S.styled(ie.motion.div)`
   display: grid;
-  grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumns}, 1fr);
+  grid-template-columns: repeat(${n=>n==null?void 0:n.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -424,11 +325,11 @@
       /* Safari and Chrome */
     }
   }
-`,he=c.forwardRef(({icon:e,title:t,numOfSlides:a=2,showNavigation:o=!0,hasNextPage:d=!1,handleFetchNextPage:m=()=>{},children:i},h)=>{const[l,b]=c.useState(0),[u,P]=c.useState(1),f=ge.useDetectMobile(),v=(i==null?void 0:i.length)??1;c.useEffect(()=>{const g=()=>{P(a)};return window.addEventListener("resize",g),g(),()=>window.removeEventListener("resize",g)},[]);const S=f?i:i==null?void 0:i.slice(l,l+u),I=g=>{var $;($=g==null?void 0:g.target)==null||$.blur();const x=l+u;x<v&&b(x),x+u>=v&&d&&m()},j=g=>{var x;(x=g==null?void 0:g.target)==null||x.blur(),l-u>=0&&b(l-u)};return n.jsxs(Oe,{ref:h,children:[n.jsx("div",{className:"scrollable-section__header",children:n.jsxs("div",{className:"scrollable-section__title",children:[w.isDefinedNotEmptyString(e)&&n.jsx(de,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),w.isDefinedNotEmptyString(t)&&n.jsxs("div",{className:"title__text",children:[" ",t]})]})}),n.jsxs(Ue,{numOfColumns:a,...!f&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:[S,f&&d&&n.jsx($e.InfiniteScrollEndElement,{onIsVisible:m})]},`scrollable-section__content-${l}`),o&&v>u&&!f&&n.jsxs("div",{className:"scrollable-section__navigation",children:[n.jsx(se,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l===0,onClick:j}),n.jsx(se,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l+u>=v,onClick:I})]})]})});he.propTypes={icon:s.PropTypes.string,title:s.PropTypes.string,numOfSlides:s.PropTypes.number,numOfSlidesForMobile:s.PropTypes.number,handleFetchNextPage:s.PropTypes.func,showNavigation:s.PropTypes.bool};const Be=p.styled.div`
+`,he=d.forwardRef(({icon:n,title:t,numOfSlides:o=2,showNavigation:a=!0,hasNextPage:g=!1,handleFetchNextPage:h=()=>{},children:i},m)=>{const[l,w]=d.useState(0),[u,T]=d.useState(1),f=de.useDetectMobile(),b=(i==null?void 0:i.length)??1;d.useEffect(()=>{const p=()=>{T(o)};return window.addEventListener("resize",p),p(),()=>window.removeEventListener("resize",p)},[]);const k=f?i:i==null?void 0:i.slice(l,l+u),I=p=>{var P;(P=p==null?void 0:p.target)==null||P.blur();const x=l+u;x<b&&w(x),x+u>=b&&g&&h()},j=p=>{var x;(x=p==null?void 0:p.target)==null||x.blur(),l-u>=0&&w(l-u)};return r.jsxs(De,{ref:m,children:[r.jsx("div",{className:"scrollable-section__header",children:r.jsxs("div",{className:"scrollable-section__title",children:[C.isDefinedNotEmptyString(n)&&r.jsx(le,{icon:n,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),C.isDefinedNotEmptyString(t)&&r.jsxs("div",{className:"title__text",children:[" ",t]})]})}),r.jsxs(Ne,{numOfColumns:o,...!f&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:[k,f&&g&&r.jsx(je.InfiniteScrollEndElement,{onIsVisible:h})]},`scrollable-section__content-${l}`),a&&b>u&&!f&&r.jsxs("div",{className:"scrollable-section__navigation",children:[r.jsx(te,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l===0,onClick:j}),r.jsx(te,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l+u>=b,onClick:I})]})]})});he.propTypes={icon:s.PropTypes.string,title:s.PropTypes.string,numOfSlides:s.PropTypes.number,numOfSlidesForMobile:s.PropTypes.number,handleFetchNextPage:s.PropTypes.func,showNavigation:s.PropTypes.bool};const Le=S.styled.div`
   display: flex;
   flex: 1;
   width: 100%;
-  max-height: ${e=>e==null?void 0:e.maxHeight};
+  max-height: ${n=>n==null?void 0:n.maxHeight};
   border-radius: 1.25rem;
 
   &:hover {
@@ -441,4 +342,19 @@
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`,ue=c.forwardRef(({sectionName:e,imageUrl:t,maxHeight:a="16.25rem",className:o="",handleClick:d=()=>{}},m)=>n.jsx(Be,{ref:m,maxHeight:a,onClick:d,className:`itemless-banner ${o}`,children:n.jsx("img",{src:t,alt:`itemless-banner__${e}`})}));ue.propTypes={sectionName:s.PropTypes.string,imageUrl:s.PropTypes.string,maxHeight:s.PropTypes.string,className:s.PropTypes.string,handleClick:s.PropTypes.func};const qe=c.memo(me),We=c.forwardRef(({sellerType:e="Shop",items:t=[],title:a,icon:o,isLoading:d,onSelectCard:m=()=>{},onSelectShop:i=()=>{},getImage:h=()=>{},campaignSingleText:l,upcomingCampaignText:b,salesCampaignTypes:u=[],startsInPrefixTextPlural:P,startsinSuffixTextPlural:f,startsInPrefixTextSingular:v,startsinSuffixTextSingular:S,endsInPrefixTextPlural:I,endsinSuffixTextPlural:j,endsInPrefixTextSingular:g,endsinSuffixTextSingular:x,numOfSlides:$=2,showNavigation:T=!0,numberOfListingsTextSingular:q,numberOfListingsTextPlural:W,itemlessImageUrl:V,itemlessLink:K,handleItemlessLink:F=()=>{},componentName:X,hasNextPage:E=!1,handleFetchNextPage:Z=()=>{}},Q)=>{const C=ge.useDetectMobile(),A=c.useMemo(()=>{let M=t==null?void 0:t.map((r,G)=>n.jsx(qe,{className:"campaign-item",coverPhoto:h(r==null?void 0:r.coverPhoto,(r==null?void 0:r.uuid)||(r==null?void 0:r.campaignUuid)),description:r==null?void 0:r.description,endDate:r==null?void 0:r.endDate,salesPackages:r==null?void 0:r.salesPackages,sellerType:e,shopImage:r==null?void 0:r.profileImage,shopImageComponent:r==null?void 0:r.profileImageComponent,shopName:r==null?void 0:r.shopName,shopUuid:r==null?void 0:r.shopUuid,shopCategory:r==null?void 0:r.shopCategory,startDate:r==null?void 0:r.startDate,title:r==null?void 0:r.name,uuid:r==null?void 0:r.campaignUuid,onSelectCard:(H,z)=>m(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid,z),onSelectShop:()=>i(r==null?void 0:r.shopUuid),campaignSingleText:l,upcomingCampaignText:b,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:u,startsInPrefixTextPlural:P,startsinSuffixTextPlural:f,startsInPrefixTextSingular:v,startsinSuffixTextSingular:S,endsInPrefixTextPlural:I,endsinSuffixTextPlural:j,endsInPrefixTextSingular:g,endsinSuffixTextSingular:x,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:q,numberOfListingsTextPlural:W,metadata:{name:X,accessor:r==null?void 0:r.accessor}},`campaign__item__${G}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`));return(t==null?void 0:t.length)<2&&!C?[...M,n.jsx(ue,{imageUrl:V,className:"campaign-item",handleClick:F},"itemless-campaign-section-banner")]:M},[t]);return n.jsx(Le,{isLoading:d,itemsCount:C?1:2,keyPrefix:"sales-camp",children:n.jsx(he,{icon:o,title:a,numOfSlides:$,showNavigation:T,hasNextPage:E,handleFetchNextPage:Z,children:A},`sales-campaign-section__${C}`)})});module.exports=We;
+`,me=d.forwardRef(({sectionName:n,imageUrl:t,maxHeight:o="16.25rem",className:a="",handleClick:g=()=>{}},h)=>r.jsx(Le,{ref:h,maxHeight:o,onClick:g,className:`itemless-banner ${a}`,children:r.jsx("img",{src:t,alt:`itemless-banner__${n}`})}));me.propTypes={sectionName:s.PropTypes.string,imageUrl:s.PropTypes.string,maxHeight:s.PropTypes.string,className:s.PropTypes.string,handleClick:s.PropTypes.func};const Ee=S.styled(c.SkeletonRowWrapper)`
+  @media (max-width: ${L.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
+
+    & .skeleton__image {
+      width: 100%;
+      height: 100%;
+    }
+
+    & > div {
+      &:last-of-type {
+        display: none;
+      }
+    }
+  }
+`,ze=({keyPrefix:n})=>r.jsxs(Ee,{children:[r.jsxs(c.SkeletonRowWrapper,{children:[r.jsx(c.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-1`),r.jsxs(c.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(c.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(c.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(c.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(c.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]}),r.jsxs(c.SkeletonRowWrapper,{noGradient:!0,children:[r.jsx(c.SkeletonSquarePlaceholder,{width:"13.75rem",height:"13.75rem",className:"skeleton__image"},`${n}-2`),r.jsxs(c.SkeletonColumnWrapper,{noGradient:!0,children:[r.jsx(c.SkeletonLinePlaceholder,{height:"1rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"1.75rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"1.25rem"}),r.jsx(c.SkeletonLinePlaceholder,{height:"2rem"}),r.jsxs(c.SkeletonRowWrapper,{alignItems:"center",noGradient:!0,children:[r.jsx(c.SkeletonCirclePlaceholder,{width:"2.5rem",height:"2.5rem"}),r.jsx(c.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]})]}),Me=({keyPrefix:n,isLoading:t=!1,fallbackComponent:o=r.jsx(r.Fragment,{}),children:a})=>r.jsx(d.Suspense,{fallbackComponent:o,children:t===!0?r.jsx(ze,{keyPrefix:n}):a}),Re=d.memo(ge),Oe=d.forwardRef(({sellerType:n="Shop",items:t=[],title:o,icon:a,isLoading:g,onSelectCard:h=()=>{},onSelectShop:i=()=>{},getImage:m=()=>{},campaignSingleText:l,upcomingCampaignText:w,salesCampaignTypes:u=[],startsInPrefixTextPlural:T,startsinSuffixTextPlural:f,startsInPrefixTextSingular:b,startsinSuffixTextSingular:k,endsInPrefixTextPlural:I,endsinSuffixTextPlural:j,endsInPrefixTextSingular:p,endsinSuffixTextSingular:x,numOfSlides:P=2,showNavigation:_=!0,numberOfListingsTextSingular:B,numberOfListingsTextPlural:W,itemlessImageUrl:V,itemlessLink:J,handleItemlessLink:F=()=>{},componentName:X,hasNextPage:E=!1,handleFetchNextPage:Z=()=>{}},K)=>{const D=de.useDetectMobile(),G=d.useMemo(()=>{let z=t==null?void 0:t.map((e,A)=>r.jsx(Re,{className:"campaign-item",coverPhoto:m(e==null?void 0:e.coverPhoto,(e==null?void 0:e.uuid)||(e==null?void 0:e.campaignUuid)),description:e==null?void 0:e.description,endDate:e==null?void 0:e.endDate,salesPackages:e==null?void 0:e.salesPackages,sellerType:n,shopImage:e==null?void 0:e.profileImage,shopImageComponent:e==null?void 0:e.profileImageComponent,shopName:e==null?void 0:e.shopName,shopUuid:e==null?void 0:e.shopUuid,shopCategory:e==null?void 0:e.shopCategory,startDate:e==null?void 0:e.startDate,title:e==null?void 0:e.name,uuid:e==null?void 0:e.campaignUuid,onSelectCard:(H,M)=>h(e==null?void 0:e.campaignUuid,e==null?void 0:e.shopUuid,M),onSelectShop:()=>i(e==null?void 0:e.shopUuid),campaignSingleText:l,upcomingCampaignText:w,upcoming:e==null?void 0:e.upcoming,salesCampaignTypes:u,startsInPrefixTextPlural:T,startsinSuffixTextPlural:f,startsInPrefixTextSingular:b,startsinSuffixTextSingular:k,endsInPrefixTextPlural:I,endsinSuffixTextPlural:j,endsInPrefixTextSingular:p,endsinSuffixTextSingular:x,themeData:e==null?void 0:e.themeData,numberOfListings:e==null?void 0:e.numberOfListings,numberOfListingsTextSingular:B,numberOfListingsTextPlural:W,metadata:{name:X,accessor:e==null?void 0:e.accessor}},`campaign__item__${A}__${e==null?void 0:e.startDate}___${e==null?void 0:e.endDate}`));return(t==null?void 0:t.length)<2&&!D?[...z,r.jsx(me,{imageUrl:V,className:"campaign-item",handleClick:F},"itemless-campaign-section-banner")]:z},[t]);return r.jsx(Me,{isLoading:g,keyPrefix:"sales-campaign-skeleton",children:r.jsx(he,{icon:a,title:o,numOfSlides:P,showNavigation:_,hasNextPage:E,handleFetchNextPage:Z,children:G},`sales-campaign-section__${D}`)})});module.exports=Oe;