@lanaco/lnc-react-ui 4.0.142 → 4.0.144

package/dist/SalesCampaignsSection.cjs

@@ -1,20 +1,18 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./utils-Dl9xPH4c.cjs"),M=require("./consts-goSZX3xP.cjs"),oe=require("./motion-B_VPZaJq.cjs"),s=require("./index-BpbMKBf_.cjs"),ie=require("./Icon.cjs"),ee=require("./ShopAvatar-CV3lj34D.cjs"),ve=require("./Badge.cjs"),H=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),re=require("./IconButton.cjs"),le=require("./useDetectMobile-zkbzoOGV.cjs"),_e=h.styled.div`
+"use strict";const t=require("react/jsx-runtime"),d=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./utils-Dl9xPH4c.cjs"),S=require("./consts-goSZX3xP.cjs"),se=require("./motion-B_VPZaJq.cjs"),a=require("./index-BpbMKBf_.cjs"),oe=require("./Icon.cjs"),Q=require("./ShopAvatar-CV3lj34D.cjs"),ve=require("./Badge.cjs"),F=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),ee=require("./IconButton.cjs"),ie=require("./useDetectMobile-zkbzoOGV.cjs"),_e=p.styled.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
   padding: 1.25rem;
-  border-radius: 20px;
-  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 1.25rem;
+  border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
-    padding: 0;
+    padding: 1rem;
     gap: 0;
-    border: none;
-    border-radius: 0;
   }
-`,Te=h.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"edged")};
+`,je=p.styled.div`
+  border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,"edged")};
   height: 13.75rem;
   width: 13.75rem;
   min-width: 13.75rem;
@@ -37,12 +35,11 @@
     }
   }
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
-    max-width: 100dvh;
-    height: 23.438rem;
+    height: 100%;
   }
-`,je=h.styled.div`
+`,Se=p.styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -55,6 +52,7 @@
   & .campaign-title {
     font-weight: 500;
     font-size: 0.75rem;
+    line-height: 1rem;
     letter-spacing: 0.1rem;
     color: var(--teal-500, #009ea8);
   }
@@ -62,7 +60,8 @@
   & .campaign-title-text {
     font-weight: 600;
     font-size: 1.375rem;
-    transition: var(--transition, all 0.3s ease);
+    leading-trim: none;
+    line-height: 1.75rem;
   }
 
   & .text-block-wrapper {
@@ -75,6 +74,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.1875rem;
+    padding-top: 0.5rem;
   }
 
   & .timestamp-text {
@@ -114,11 +114,30 @@
     background-color: transparent;
   }
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
-    padding: 1.25rem;
+  & .campaign-date {
+    font-weight: 400;
+    font-size: 0.875rem;
+    leading-trim: none;
+    line-height: 1.25rem;
+    color: var(--gray-600, #676e79);
+  }
+
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+    padding: 1rem 0 0 0;
+
+    & .campaign-title-text {
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    & .campaign-date {
+      display: none;
+    }
 
-    & .campaign-title {
-      font-size: 0.875rem;
+    & .timestamp-text {
+      line-height: 1rem;
+      padding-top: 0.5rem;
     }
 
     & .text-block-wrapper {
@@ -128,13 +147,13 @@
       gap: 0.25rem;
     }
   }
-`,te=(e=!1,n=!1,a=!1)=>`
+`,re=(e=!1,n=!1,s=!1)=>`
     display: flex;
     ${n?"flex-wrap: wrap;":""}
     ${n?"":"flex-wrap: nowrap;"}
     ${e?"align-items: center;":""}
-    ${a?"justify-content: center;":""}
-  `,Se=h.styled(oe.motion.div)`
+    ${s?"justify-content: center;":""}
+  `,Te=p.styled(se.motion.div)`
   text-decoration: none;
   ${e=>e.hasPermission===!0&&"cursor: pointer"};
 
@@ -151,14 +170,14 @@
     text-decoration: none;
   }
 
-  ${te(!0)}
+  ${re(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
-  color: var(--gray-950);
+  color: var(--gray-950, #14161a);
   font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"slight")};
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,"slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -167,7 +186,7 @@
     font-weight: 400;
   }
   & .logo-wrapper {
-    ${te(!0,!1,!0)}
+    ${re(!0,!1,!0)}
     flex-shrink: 0;
     border-radius: 999px;
 
@@ -205,14 +224,19 @@
     cursor: pointer;
     background-color: var(--gray-95080, #14161acc);
   }
-`,$e=h.styled.div`
+
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+    padding: 0;
+    font-size: 0.875rem;
+  }
+`,$e=p.styled.div`
   position: absolute;
   top: 0.5rem;
   ${e=>e.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`,Pe=h.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
+`,Pe=p.styled.div`
+  border-radius: ${e=>x.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
   background-color: ${e=>e==null?void 0:e.color};
   color: white;
   height: 1.5rem;
@@ -227,7 +251,7 @@
   & i {
     font-size: 0.813rem;
   }
-`,Ce=c.forwardRef(({src:e,...n},a)=>{const o=c.useRef();return c.useEffect(()=>{var d;const u=g=>{g.target.src=ee.DefaultShopImage,g.onerror=null};return(d=o==null?void 0:o.current)==null||d.addEventListener("error",u),()=>{var g;(g=o==null?void 0:o.current)==null||g.removeEventListener("error",u)}},[]),t.jsx(c.Fragment,{ref:a,children:w.isDefinedNotEmptyString(e)?t.jsx("img",{ref:o,src:e,...n}):t.jsx("img",{src:ee.DefaultShopImage,...n})})}),ce=e=>{const{uuid:n,hasPermission:a=!0,isUser:o,image:u,imageComponent:d,name:g,notifications:l=0,color:m="primary",size:p="large",style:I,disabled:T,onClick:v=()=>{},isActive:j,className:S,shopCategory:_,themeData:b}=e,D={theme:H.useTheme(),color:m,size:p,style:I,disabled:T};return c.createElement(Se,{onClick:P=>{P.stopPropagation(),a===!0&&(v==null||v())},...D,key:g,className:`profile-item ${S}`,hasPermission:a,isActive:j,themeColor:(b==null?void 0:b.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:w.isDefined(d)?d:u}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:g}),!o&&t.jsx("div",{className:"description",children:_}),l>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(ve,{className:"badge",color:"danger",size:"small",children:l>99?"99+":l})})]}))};ce.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 ne=(e,n)=>{if(!e||!n)return null;const a=e.getTime()-n.getTime(),o=24*60*60*1e3;return a>=0?Math.ceil(a/o):Math.floor(a/o)},se=e=>{if(e!==void 0){const n=new Date(e),a=n.getFullYear(),o=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${o}. ${a}.`}},de=c.forwardRef((e,n)=>{var Q;const a=H.useTheme(),{shopUuid:o,title:u="",coverPhoto:d,onSelect:g,startDate:l,endDate:m,salesPackages:p,shopName:I,shopCategory:T,shopImage:v,shopImageComponent:j,className:S,onSelectCard:_=()=>{},onSelectShop:b=()=>{},upcoming:$=!1,upcomingCampaignText:D,campaignSingleText:P,salesCampaignTypes:x=[],startsInPrefixTextPlural:L,startsinSuffixTextPlural:R,startsInPrefixTextSingular:z,startsinSuffixTextSingular:i,endsInPrefixTextPlural:f,endsinSuffixTextPlural:X,endsInPrefixTextSingular:F,endsinSuffixTextSingular:O,themeData:A,numberOfListings:k,numberOfListingsTextSingular:r,numberOfListingsTextPlural:Z,...me}=e,Y=l?new Date(l)<=new Date:!1,pe=ne(l?new Date(l):null,new Date),U=ne(m?new Date(m):null,new Date),he=U!==null&&U<=2&&U>0,J=m?new Date(m).getTime():null,fe=Date.now(),G=J!==null?J-fe:null,B=G!==null&&G>0&&G<24*60*60*1e3,K=(C,W,y,E,N)=>y===1?`${C} ${y} ${E}`:`${W} ${y} ${N}`,xe=()=>{if(!m)return null;const C=ye,y=new Date(m).getTime()-C.getTime();if(y<=0)return null;const E=Math.floor(y/(1e3*60*60)),N=Math.floor(y%(1e3*60*60)/(1e3*60)),be=Math.floor(y%(1e3*60)/1e3);return{hours:E,minutes:N,seconds:be}},[ye,we]=c.useState(new Date);c.useEffect(()=>{if(!B)return;const C=setInterval(()=>{we(new Date)},1e3);return()=>clearInterval(C)},[B]);const q=B?xe():null;return t.jsxs(_e,{ref:n,theme:a,className:S,onClick:_,...me,children:[t.jsxs(Te,{theme:a,onClick:()=>g==null?void 0:g(),children:[t.jsx("img",{src:d}),t.jsx($e,{children:p==null?void 0:p.map((C,W)=>{var y,E;return t.jsx(Pe,{color:(y=x==null?void 0:x.find(N=>N.value===C))==null?void 0:y.color,theme:a,children:t.jsx(ie,{icon:(E=x==null?void 0:x.find(N=>N.value===C))==null?void 0:E.icon})},`package__${W}`)})})]}),t.jsxs(je,{theme:a,children:[t.jsx("div",{className:"text-block-wrapper",children:t.jsxs("div",{className:"title-block-wrapper",children:[t.jsx("div",{className:"campaign-title",children:(Q=$?D:P)==null?void 0:Q.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:u}),m&&l&&t.jsxs("div",{children:[se(l)," - ",se(m)]}),t.jsxs("div",{className:"timestamp-text",children:[k>0&&t.jsxs("span",{className:"listings-text",children:[k," ",k===1?r:Z," ","∙"," "]}),t.jsx("span",{className:`duration-text ${he?"urgent":""} ${Y?"":"starts-in"}`,children:B&&q?t.jsxs("div",{className:"countdown-timer",children:[F," ",q.hours.toString().padStart(2,"0"),":",q.minutes.toString().padStart(2,"0"),":",q.seconds.toString().padStart(2,"0")]}):Y?K(F,f,U,O,X):K(z,L,pe,i,R)})]})]})}),t.jsx(ce,{hasPermission:!0,image:t.jsx(Ce,{src:v}),imageComponent:j,themeData:A,isActive:!0,isUser:!1,name:I,shopCategory:T,onClick:()=>b(o)})]})]})});de.propTypes={title:s.PropTypes.oneOfType([s.PropTypes.string,s.PropTypes.element]),numberOfListings:s.PropTypes.number,dropdown:s.PropTypes.any,color:s.PropTypes.string};h.styled.div`
+`,Ie=d.forwardRef(({src:e,...n},s)=>{const o=d.useRef();return d.useEffect(()=>{var u;const l=i=>{i.target.src=Q.DefaultShopImage,i.onerror=null};return(u=o==null?void 0:o.current)==null||u.addEventListener("error",l),()=>{var i;(i=o==null?void 0:o.current)==null||i.removeEventListener("error",l)}},[]),t.jsx(d.Fragment,{ref:s,children:x.isDefinedNotEmptyString(e)?t.jsx("img",{ref:o,src:e,...n}):t.jsx("img",{src:Q.DefaultShopImage,...n})})}),le=e=>{const{uuid:n,hasPermission:s=!0,isUser:o,image:l,imageComponent:u,name:i,notifications:m=0,color:c="primary",size:y="large",style:P,disabled:I,onClick:_=()=>{},isActive:C,className:w,shopCategory:b,themeData:v}=e,T={theme:F.useTheme(),color:c,size:y,style:P,disabled:I};return d.createElement(Te,{onClick:g=>{g.stopPropagation(),s===!0&&(_==null||_())},...T,key:i,className:`profile-item ${w}`,hasPermission:s,isActive:C,themeColor:(v==null?void 0:v.code)||"transparent"},t.jsx("div",{className:"logo-wrapper",children:x.isDefined(u)?u:l}),t.jsxs("div",{children:[t.jsx("div",{className:"name",children:i}),!o&&t.jsx("div",{className:"description",children:b}),m>0&&t.jsx("div",{className:"notifications-number",children:t.jsx(ve,{className:"badge",color:"danger",size:"small",children:m>99?"99+":m})})]}))};le.propTypes={id:a.PropTypes.any,isUserProfile:a.PropTypes.bool,themeColor:a.PropTypes.string,image:a.PropTypes.any,name:a.PropTypes.string,notifications:a.PropTypes.number,style:a.PropTypes.object,className:a.PropTypes.string,color:a.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:a.PropTypes.oneOf(["large"]),onSelect:a.PropTypes.func,hasPermission:a.PropTypes.bool};const te=(e,n)=>{if(!e||!n)return null;const s=e.getTime()-n.getTime(),o=24*60*60*1e3;return s>=0?Math.ceil(s/o):Math.floor(s/o)},ne=e=>{if(e!==void 0){const n=new Date(e),s=n.getFullYear(),o=n.getMonth()+1;return`${String(n.getDate()).padStart(2)}. ${o}. ${s}.`}},ce=d.forwardRef((e,n)=>{var K;const s=F.useTheme(),{shopUuid:o,title:l="",coverPhoto:u,onSelect:i,startDate:m,endDate:c,salesPackages:y,shopName:P,shopCategory:I,shopImage:_,shopImageComponent:C,className:w,onSelectCard:b=()=>{},onSelectShop:v=()=>{},upcoming:k=!1,upcomingCampaignText:T,campaignSingleText:g,salesCampaignTypes:h=[],startsInPrefixTextPlural:U,startsinSuffixTextPlural:B,startsInPrefixTextSingular:q,startsinSuffixTextSingular:A,endsInPrefixTextPlural:W,endsinSuffixTextPlural:G,endsInPrefixTextSingular:N,endsinSuffixTextSingular:V,themeData:E,numberOfListings:r,numberOfListingsTextSingular:X,numberOfListingsTextPlural:me,...pe}=e,H=m?new Date(m)<=new Date:!1,he=te(m?new Date(m):null,new Date),M=te(c?new Date(c):null,new Date),ue=M!==null&&M<=2&&M>0,Y=c?new Date(c).getTime():null,fe=Date.now(),Z=Y!==null?Y-fe:null,z=Z!==null&&Z>0&&Z<24*60*60*1e3,J=(j,R,f,D,$)=>f===1?`${j} ${f} ${D}`:`${R} ${f} ${$}`,xe=()=>{if(!c)return null;const j=ye,f=new Date(c).getTime()-j.getTime();if(f<=0)return null;const D=Math.floor(f/(1e3*60*60)),$=Math.floor(f%(1e3*60*60)/(1e3*60)),be=Math.floor(f%(1e3*60)/1e3);return{hours:D,minutes:$,seconds:be}},[ye,we]=d.useState(new Date);d.useEffect(()=>{if(!z)return;const j=setInterval(()=>{we(new Date)},1e3);return()=>clearInterval(j)},[z]);const L=z?xe():null;return t.jsxs(_e,{ref:n,theme:s,className:w,onClick:b,...pe,children:[t.jsxs(je,{theme:s,onClick:()=>i==null?void 0:i(),children:[t.jsx("img",{src:u}),t.jsx($e,{children:y==null?void 0:y.map((j,R)=>{var f,D;return t.jsx(Pe,{color:(f=h==null?void 0:h.find($=>$.value===j))==null?void 0:f.color,theme:s,children:t.jsx(oe,{icon:(D=h==null?void 0:h.find($=>$.value===j))==null?void 0:D.icon})},`package__${R}`)})})]}),t.jsxs(Se,{theme:s,children:[t.jsx("div",{className:"text-block-wrapper",children:t.jsxs("div",{className:"title-block-wrapper",children:[t.jsx("div",{className:"campaign-title",children:(K=k?T:g)==null?void 0:K.toUpperCase()}),t.jsx("div",{className:"campaign-title-text",children:l}),c&&m&&t.jsxs("div",{className:"campaign-date",children:[ne(m)," - ",ne(c)]}),t.jsxs("div",{className:"timestamp-text",children:[r>0&&t.jsxs("span",{className:"listings-text",children:[r," ",r===1?X:me," ","∙"," "]}),t.jsx("span",{className:`duration-text ${ue?"urgent":""} ${H?"":"starts-in"}`,children:z&&L?t.jsxs("div",{className:"countdown-timer",children:[N," ",L.hours.toString().padStart(2,"0"),":",L.minutes.toString().padStart(2,"0"),":",L.seconds.toString().padStart(2,"0")]}):H?J(N,W,M,V,G):J(q,U,he,A,B)})]})]})}),t.jsx(le,{hasPermission:!0,image:t.jsx(Ie,{src:_}),imageComponent:C,themeData:E,isActive:!0,isUser:!1,name:P,shopCategory:I,onClick:()=>v(o)})]})]})});ce.propTypes={title:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.element]),numberOfListings:a.PropTypes.number,dropdown:a.PropTypes.any,color:a.PropTypes.string};p.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -258,26 +282,26 @@
     }
   }
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
       margin-right: 0;
     }
   }
-`;const V=h.styled.div`
+`;const O=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")}
-`,Ie=h.styled.div`
+  ${x.linearGradientAnimation("-90deg")}
+`,Ce=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%"};
-`,ae=h.styled.div`
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
+`,ae=p.styled.div`
+  border-radius: ${e=>x.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"};
@@ -286,10 +310,10 @@
   width: ${e=>(e==null?void 0:e.width)??"5rem"};
   flex-shrink: 0;
 
-  ${w.linearGradientAnimation()}
-`,De=h.styled.div`
+  ${x.linearGradientAnimation()}
+`,ke=p.styled.div`
   background: var(--white, #fff);
-  border-radius: ${e=>w.getBorderRadiusValueWithUnits(e.theme,"edged")};
+  border-radius: ${e=>x.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);
 
@@ -316,17 +340,17 @@
     gap: 0.5rem;
   }
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`,Ne=h.styled.div`
+`,Ne=p.styled.div`
   display: flex;
   gap: 1.5rem;
-`,ke=c.forwardRef(({},e)=>{const n=H.useTheme();return t.jsxs(De,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(ae,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs(Ie,{theme:n,children:[t.jsx(V,{heightCoeff:.75,theme:n,width:"35%"}),t.jsx(V,{heightCoeff:1.25,theme:n}),t.jsx(V,{heightCoeff:3,theme:n})]}),t.jsxs("div",{className:"campaign__user",children:[t.jsx(ae,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(V,{theme:n,width:"75%"})]})]})]})}),Ee=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Ne,{children:Array.from({length:e},(a,o)=>t.jsx(ke,{},`${n}-skeleton-campaign-card-${o}`))}),Me=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:a=!1,itemsCount:o=5,keyPrefix:u})=>t.jsx(c.Suspense,{fallback:n,children:a===!0?t.jsx(Ee,{itemsCount:o,keyPrefix:u}):e}),Le=h.styled.div`
+`,De=d.forwardRef(({},e)=>{const n=F.useTheme();return t.jsxs(ke,{ref:e,theme:n,children:[t.jsx("div",{className:"campaign__left-section",children:t.jsx(ae,{theme:n,width:"15rem",height:"15rem",borderRadius:"edged"})}),t.jsxs("div",{className:"campaign__right-section",children:[t.jsxs(Ce,{theme:n,children:[t.jsx(O,{heightCoeff:.75,theme:n,width:"35%"}),t.jsx(O,{heightCoeff:1.25,theme:n}),t.jsx(O,{heightCoeff:3,theme:n})]}),t.jsxs("div",{className:"campaign__user",children:[t.jsx(ae,{theme:n,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),t.jsx(O,{theme:n,width:"75%"})]})]})]})}),Ee=({itemsCount:e=5,keyPrefix:n})=>t.jsx(Ne,{children:Array.from({length:e},(s,o)=>t.jsx(De,{},`${n}-skeleton-campaign-card-${o}`))}),Me=({children:e,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:s=!1,itemsCount:o=5,keyPrefix:l})=>t.jsx(d.Suspense,{fallback:n,children:s===!0?t.jsx(Ee,{itemsCount:o,keyPrefix:l}):e}),ze=p.styled.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -346,9 +370,6 @@
       align-items: center;
       gap: 0.5rem;
 
-      & .title__icon {
-      }
-
       & .title__text {
         color: var(--gray-950, #14161a);
         font-size: 1.5rem;
@@ -367,16 +388,46 @@
     top: 0;
     right: 0;
   }
-`,Re=h.styled(oe.motion.div)`
+
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+    & .scrollable-section__header {
+      & .scrollable-section__title {
+        & .title__text {
+          font-size: 1.375rem;
+          line-height: 1.75rem;
+        }
+      }
+    }
+  }
+`,Le=p.styled(se.motion.div)`
   display: grid;
   grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${M.MOBILE_SIZE_PX+"px"}) {
-    grid-template-columns: repeat(${e=>e==null?void 0:e.numOfColumnsForMobile}, 1fr);
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    justify-content: flex-start;
+    gap: 1rem;
+
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
   }
-`,ge=c.forwardRef(({icon:e,title:n,numOfSlides:a=2,numOfSlidesForMobile:o=1,showNavigation:u=!0,children:d},g)=>{const[l,m]=c.useState(0),[p,I]=c.useState(1),[T,v]=c.useState(null),[j,S]=c.useState(null),_=le.useDetectMobile(),b=50,$=(d==null?void 0:d.length)??1;c.useEffect(()=>{const i=()=>{I(_?o:a)};return window.addEventListener("resize",i),i(),()=>window.removeEventListener("resize",i)},[]);const D=d==null?void 0:d.slice(l,l+p),P=i=>{var f;(f=i==null?void 0:i.target)==null||f.blur(),l+p<$&&m(l+p)},x=i=>{var f;(f=i==null?void 0:i.target)==null||f.blur(),l-p>=0&&m(l-p)},L=i=>{var f;S(null),v((f=i==null?void 0:i.targetTouches["0"])==null?void 0:f.clientX)},R=i=>{var f;S((f=i==null?void 0:i.targetTouches["0"])==null?void 0:f.clientX)},z=()=>{if(!T||!j)return;const i=T-j;i>b&&P(),i<-b&&x()};return t.jsxs(Le,{ref:g,..._?{onTouchStart:L,onTouchMove:R,onTouchEnd:z}:{},children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[w.isDefinedNotEmptyString(e)&&t.jsx(ie,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),w.isDefinedNotEmptyString(n)&&t.jsx("div",{className:"title__text",children:n})]})}),t.jsx(Re,{numOfColumns:a,numOfColumnsForMobile:o,animate:{x:0,opacity:1},initial:{x:10,opacity:0},children:D},`scrollable-section__content-${l}`),u&&$>p&&!_&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(re,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l===0,onClick:x}),t.jsx(re,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:l+p>=$,onClick:P})]})]})});ge.propTypes={icon:s.PropTypes.string,title:s.PropTypes.string,numOfSlides:s.PropTypes.number,numOfSlidesForMobile:s.PropTypes.number,showNavigation:s.PropTypes.bool};const ze=h.styled.div`
+`,de=d.forwardRef(({icon:e,title:n,numOfSlides:s=2,showNavigation:o=!0,children:l},u)=>{const[i,m]=d.useState(0),[c,y]=d.useState(1),[P,I]=d.useState(null),[_,C]=d.useState(null),w=ie.useDetectMobile(),b=(l==null?void 0:l.length)??1;d.useEffect(()=>{const g=()=>{y(s)};return window.addEventListener("resize",g),g(),()=>window.removeEventListener("resize",g)},[]);const v=w?l:l==null?void 0:l.slice(i,i+c),k=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i+c<b&&m(i+c)},T=g=>{var h;(h=g==null?void 0:g.target)==null||h.blur(),i-c>=0&&m(i-c)};return t.jsxs(ze,{ref:u,children:[t.jsx("div",{className:"scrollable-section__header",children:t.jsxs("div",{className:"scrollable-section__title",children:[x.isDefinedNotEmptyString(e)&&t.jsx(oe,{icon:e,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),x.isDefinedNotEmptyString(n)&&t.jsx("div",{className:"title__text",children:n})]})}),t.jsx(Le,{numOfColumns:s,...!w&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},children:v},`scrollable-section__content-${i}`),o&&b>c&&!w&&t.jsxs("div",{className:"scrollable-section__navigation",children:[t.jsx(ee,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i===0,onClick:T}),t.jsx(ee,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:i+c>=b,onClick:k})]})]})});de.propTypes={icon:a.PropTypes.string,title:a.PropTypes.string,numOfSlides:a.PropTypes.number,numOfSlidesForMobile:a.PropTypes.number,showNavigation:a.PropTypes.bool};const Re=p.styled.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -393,4 +444,4 @@
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`,ue=c.forwardRef(({sectionName:e,imageUrl:n,maxHeight:a="16.25rem",className:o="",handleClick:u=()=>{}})=>t.jsx(ze,{maxHeight:a,onClick:u,className:`itemless-banner ${o}`,children:t.jsx("img",{src:n,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 Oe=c.memo(de),Ue=c.forwardRef(({sellerType:e="Shop",items:n=[],title:a,icon:o,isLoading:u,onSelectCard:d=()=>{},onSelectShop:g=()=>{},getImage:l=()=>{},campaignSingleText:m,upcomingCampaignText:p,salesCampaignTypes:I=[],startsInPrefixTextPlural:T,startsinSuffixTextPlural:v,startsInPrefixTextSingular:j,startsinSuffixTextSingular:S,endsInPrefixTextPlural:_,endsinSuffixTextPlural:b,endsInPrefixTextSingular:$,endsinSuffixTextSingular:D,numOfSlides:P=2,numOfSlidesForMobile:x=1,showNavigation:L=!0,numberOfListingsTextSingular:R,numberOfListingsTextPlural:z,itemlessImageUrl:i,itemlessLink:f,handleItemlessLink:X=()=>{}},F)=>{const O=le.useDetectMobile(),A=c.useMemo(()=>{let k=n==null?void 0:n.map((r,Z)=>t.jsx(Oe,{className:"campaign-item",coverPhoto:l(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:()=>d(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid),onSelectShop:()=>g(r==null?void 0:r.shopUuid),campaignSingleText:m,upcomingCampaignText:p,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:I,startsInPrefixTextPlural:T,startsinSuffixTextPlural:v,startsInPrefixTextSingular:j,startsinSuffixTextSingular:S,endsInPrefixTextPlural:_,endsinSuffixTextPlural:b,endsInPrefixTextSingular:$,endsinSuffixTextSingular:D,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:R,numberOfListingsTextPlural:z},`campaign__item__${Z}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`));return(n==null?void 0:n.length)<2&&!O?[...k,t.jsx(ue,{imageUrl:i,className:"campaign-item",handleClick:X})]:k},[n]);return t.jsx(Me,{isLoading:u,itemsCount:O?1:2,keyPrefix:"sales-camp",children:t.jsx(ge,{icon:o,title:a,numOfSlides:P,numOfSlidesForMobile:x,showNavigation:L,children:A})})});module.exports=Ue;
+`,ge=d.forwardRef(({sectionName:e,imageUrl:n,maxHeight:s="16.25rem",className:o="",handleClick:l=()=>{}})=>t.jsx(Re,{maxHeight:s,onClick:l,className:`itemless-banner ${o}`,children:t.jsx("img",{src:n,alt:`itemless-banner__${e}`})}));ge.propTypes={sectionName:a.PropTypes.string,imageUrl:a.PropTypes.string,maxHeight:a.PropTypes.string,className:a.PropTypes.string,handleClick:a.PropTypes.func};const Oe=d.memo(ce),Ue=d.forwardRef(({sellerType:e="Shop",items:n=[],title:s,icon:o,isLoading:l,onSelectCard:u=()=>{},onSelectShop:i=()=>{},getImage:m=()=>{},campaignSingleText:c,upcomingCampaignText:y,salesCampaignTypes:P=[],startsInPrefixTextPlural:I,startsinSuffixTextPlural:_,startsInPrefixTextSingular:C,startsinSuffixTextSingular:w,endsInPrefixTextPlural:b,endsinSuffixTextPlural:v,endsInPrefixTextSingular:k,endsinSuffixTextSingular:T,numOfSlides:g=2,showNavigation:h=!0,numberOfListingsTextSingular:U,numberOfListingsTextPlural:B,itemlessImageUrl:q,itemlessLink:A,handleItemlessLink:W=()=>{}},G)=>{const N=ie.useDetectMobile(),V=d.useMemo(()=>{let E=n==null?void 0:n.map((r,X)=>t.jsx(Oe,{className:"campaign-item",coverPhoto:m(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:()=>u(r==null?void 0:r.campaignUuid,r==null?void 0:r.shopUuid),onSelectShop:()=>i(r==null?void 0:r.shopUuid),campaignSingleText:c,upcomingCampaignText:y,upcoming:r==null?void 0:r.upcoming,salesCampaignTypes:P,startsInPrefixTextPlural:I,startsinSuffixTextPlural:_,startsInPrefixTextSingular:C,startsinSuffixTextSingular:w,endsInPrefixTextPlural:b,endsinSuffixTextPlural:v,endsInPrefixTextSingular:k,endsinSuffixTextSingular:T,themeData:r==null?void 0:r.themeData,numberOfListings:r==null?void 0:r.numberOfListings,numberOfListingsTextSingular:U,numberOfListingsTextPlural:B},`campaign__item__${X}__${r==null?void 0:r.startDate}___${r==null?void 0:r.endDate}`));return(n==null?void 0:n.length)<2&&!N?[...E,t.jsx(ge,{imageUrl:q,className:"campaign-item",handleClick:W})]:E},[n]);return t.jsx(Me,{isLoading:l,itemsCount:N?1:2,keyPrefix:"sales-camp",children:t.jsx(de,{icon:o,title:s,numOfSlides:g,showNavigation:h,children:V},`sales-campaign-section__${N}`)})});module.exports=Ue;