@lanaco/lnc-react-ui 4.0.160 → 4.0.162

package/dist/SalesCampaignsSection.js

@@ -1,17 +1,18 @@
-import { jsx as n, jsxs as g, Fragment as De } from "react/jsx-runtime";
-import { forwardRef as M, useRef as he, useEffect as Q, Fragment as Te, createElement as Pe, useState as U, Suspense as ze, memo as Me, useMemo as Le } from "react";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as O, k as K, l as Ue, o as pe } from "./utils-BdsZgOUE.js";
-import { M as k } from "./consts-BuFChS64.js";
-import { m as fe } from "./motion-Ckekul_K.js";
+import { jsx as n, jsxs as c, Fragment as De } from "react/jsx-runtime";
+import { forwardRef as z, useRef as he, useEffect as ee, Fragment as Te, createElement as Pe, useState as K, Suspense as ze, memo as Me, useMemo as Le } from "react";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as M, k as Q, l as Ue, o as fe } from "./utils-BdsZgOUE.js";
+import { M as T } from "./consts-BuFChS64.js";
+import { m as pe } from "./motion-Ckekul_K.js";
 import { P as a } from "./index-CblbdqjE.js";
 import ue from "./Icon.js";
 import { D as se } from "./ShopAvatar-4-fCYGEc.js";
 import Oe from "./Badge.js";
-import { u as ee } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as re } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import le from "./IconButton.js";
 import { u as xe } from "./useDetectMobile-Bkvj0VMa.js";
-const Ee = h.div`
+import { I as Ee } from "./index-C0LcDEqa.js";
+const je = m.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -19,13 +20,13 @@ const Ee = h.div`
   border-radius: 1.25rem;
   border: 1px solid var(--gray-200, #e4e9f0);
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     flex-direction: column;
     padding: 1rem;
     gap: 0;
   }
-`, je = h.div`
-  border-radius: ${(e) => O(e.theme, "edged")};
+`, Re = m.div`
+  border-radius: ${(e) => M(e.theme, "edged")};
   height: 13.75rem;
   width: 13.75rem;
   min-width: 13.75rem;
@@ -47,7 +48,7 @@ const Ee = h.div`
       transform: scale(1.25);
     }
   }
-`, Re = h.div`
+`, Be = m.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -130,7 +131,7 @@ const Ee = h.div`
     color: var(--gray-600, #676e79);
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     padding: 1rem 0 0 0;
 
     & .campaign-title-text {
@@ -161,7 +162,7 @@ const Ee = h.div`
     ${t ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${o ? "justify-content: center;" : ""}
-  `, Be = h(fe.div)`
+  `, Fe = m(pe.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -185,7 +186,7 @@ const Ee = h.div`
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: ${(e) => O(e.theme, "slight")};
+  border-radius: ${(e) => M(e.theme, "slight")};
   transition: all 0.25s ease;
   & .description {
     font-size: 0.85rem;
@@ -233,18 +234,18 @@ const Ee = h.div`
     background-color: var(--gray-95080, #14161acc);
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     padding: 0;
     font-size: 0.875rem;
   }
-`, Fe = h.div`
+`, We = m.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, We = h.div`
-  border-radius: ${(e) => O(e.theme, e.borderRadius || "slight")};
+`, Ve = m.div`
+  border-radius: ${(e) => M(e.theme, e.borderRadius || "slight")};
   background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
   height: 1.5rem;
@@ -259,63 +260,63 @@ const Ee = h.div`
   & i {
     font-size: 0.813rem;
   }
-`, Ae = M(({ src: e, ...t }, o) => {
+`, Ae = z(({ src: e, ...t }, o) => {
   const i = he();
-  return Q(() => {
-    var f;
-    const l = (s) => {
+  return ee(() => {
+    var h;
+    const d = (s) => {
       s.target.src = se, s.onerror = null;
     };
-    return (f = i == null ? void 0 : i.current) == null || f.addEventListener("error", l), () => {
+    return (h = i == null ? void 0 : i.current) == null || h.addEventListener("error", d), () => {
       var s;
-      (s = i == null ? void 0 : i.current) == null || s.removeEventListener("error", l);
+      (s = i == null ? void 0 : i.current) == null || s.removeEventListener("error", d);
     };
-  }, []), /* @__PURE__ */ n(Te, { ref: o, children: K(e) ? /* @__PURE__ */ n("img", { ref: i, src: e, ...t }) : /* @__PURE__ */ n("img", { src: se, ...t }) });
+  }, []), /* @__PURE__ */ n(Te, { ref: o, children: Q(e) ? /* @__PURE__ */ n("img", { ref: i, src: e, ...t }) : /* @__PURE__ */ n("img", { src: se, ...t }) });
 }), we = (e) => {
   const {
     uuid: t,
     hasPermission: o = !0,
     isUser: i,
-    image: l,
-    imageComponent: f,
+    image: d,
+    imageComponent: h,
     name: s,
-    notifications: m = 0,
-    color: c = "primary",
-    size: w = "large",
-    style: N,
-    disabled: I,
-    onClick: $ = () => {
+    notifications: f = 0,
+    color: l = "primary",
+    size: b = "large",
+    style: p,
+    disabled: S,
+    onClick: u = () => {
     },
-    isActive: D,
-    className: b,
-    shopCategory: v,
+    isActive: v,
+    className: k,
+    shopCategory: I,
     // new
-    themeData: y
-  } = e, _ = {
-    theme: ee(),
-    color: c,
-    size: w,
-    style: N,
-    disabled: I
+    themeData: $
+  } = e, x = {
+    theme: re(),
+    color: l,
+    size: b,
+    style: p,
+    disabled: S
   };
   return /* @__PURE__ */ Pe(
-    Be,
+    Fe,
     {
-      onClick: (d) => {
-        d.stopPropagation(), o === !0 && ($ == null || $());
+      onClick: (_) => {
+        _.stopPropagation(), o === !0 && (u == null || u());
       },
-      ..._,
+      ...x,
       key: s,
-      className: `profile-item ${b}`,
+      className: `profile-item ${k}`,
       hasPermission: o,
-      isActive: D,
-      themeColor: (y == null ? void 0 : y.code) || "transparent"
+      isActive: v,
+      themeColor: ($ == null ? void 0 : $.code) || "transparent"
     },
-    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Ue(f) ? f : l }),
-    /* @__PURE__ */ g("div", { children: [
+    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Ue(h) ? h : d }),
+    /* @__PURE__ */ c("div", { children: [
       /* @__PURE__ */ n("div", { className: "name", children: s }),
-      !i && /* @__PURE__ */ n("div", { className: "description", children: v }),
-      m > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Oe, { className: "badge", color: "danger", size: "small", children: m > 99 ? "99+" : m }) })
+      !i && /* @__PURE__ */ n("div", { className: "description", children: I }),
+      f > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(Oe, { className: "badge", color: "danger", size: "small", children: f > 99 ? "99+" : f }) })
     ] })
   );
 };
@@ -350,92 +351,92 @@ const de = (e, t) => {
     const t = new Date(e), o = t.getFullYear(), i = t.getMonth() + 1;
     return `${String(t.getDate()).padStart(2)}. ${i}. ${o}.`;
   }
-}, be = M((e, t) => {
+}, be = z((e, t) => {
   var ie;
-  const o = ee(), {
+  const o = re(), {
     // uuid,
     shopUuid: i,
-    title: l = "",
+    title: d = "",
     // description,
     // badges,
-    coverPhoto: f,
+    coverPhoto: h,
     onSelect: s,
     // status,
-    startDate: m,
-    endDate: c,
-    salesPackages: w,
-    shopName: N,
-    shopCategory: I,
-    shopImage: $,
-    shopImageComponent: D,
-    className: b,
-    onSelectCard: v = () => {
+    startDate: f,
+    endDate: l,
+    salesPackages: b,
+    shopName: p,
+    shopCategory: S,
+    shopImage: u,
+    shopImageComponent: v,
+    className: k,
+    onSelectCard: I = () => {
     },
-    onSelectShop: y = () => {
+    onSelectShop: $ = () => {
     },
-    upcoming: T = !1,
-    upcomingCampaignText: _,
-    campaignSingleText: d,
-    salesCampaignTypes: p = [],
+    upcoming: g = !1,
+    upcomingCampaignText: x,
+    campaignSingleText: _,
+    salesCampaignTypes: C = [],
     startsInPrefixTextPlural: W,
-    startsinSuffixTextPlural: A,
-    startsInPrefixTextSingular: V,
-    startsinSuffixTextSingular: re,
+    startsinSuffixTextPlural: V,
+    startsInPrefixTextSingular: A,
+    startsinSuffixTextSingular: ne,
     endsInPrefixTextPlural: H,
     endsinSuffixTextPlural: G,
-    endsInPrefixTextSingular: X,
-    endsinSuffixTextSingular: L,
-    themeData: Y,
-    numberOfListings: P,
-    numberOfListingsTextSingular: r,
-    numberOfListingsTextPlural: Z,
-    metadata: C,
-    ...q
-  } = e, ne = he(), te = m ? new Date(m) <= /* @__PURE__ */ new Date() : !1, $e = de(
-    m ? new Date(m) : null,
+    endsInPrefixTextSingular: L,
+    endsinSuffixTextSingular: X,
+    themeData: te,
+    numberOfListings: N,
+    numberOfListingsTextSingular: Y,
+    numberOfListingsTextPlural: U,
+    metadata: r,
+    ...Z
+  } = e, q = he(), O = f ? new Date(f) <= /* @__PURE__ */ new Date() : !1, $e = de(
+    f ? new Date(f) : null,
     /* @__PURE__ */ new Date()
   ), E = de(
-    c ? new Date(c) : null,
+    l ? new Date(l) : null,
     /* @__PURE__ */ new Date()
-  ), _e = E !== null && E <= 2 && E > 0, ae = c ? new Date(c).getTime() : null, Ce = Date.now(), J = ae !== null ? ae - Ce : null, j = J !== null && J > 0 && J < 24 * 60 * 60 * 1e3, oe = (x, B, u, z, S) => u === 1 ? `${x} ${u} ${z}` : `${B} ${u} ${S}`, Se = () => {
-    if (!c) return null;
-    const x = ke, u = new Date(c).getTime() - x.getTime();
-    if (u <= 0) return null;
-    const z = Math.floor(u / (1e3 * 60 * 60)), S = Math.floor(u % (1e3 * 60 * 60) / (1e3 * 60)), Ie = Math.floor(u % (1e3 * 60) / 1e3);
-    return { hours: z, minutes: S, seconds: Ie };
-  }, [ke, Ne] = U(/* @__PURE__ */ new Date());
-  Q(() => {
+  ), _e = E !== null && E <= 2 && E > 0, ae = l ? new Date(l).getTime() : null, Ce = Date.now(), J = ae !== null ? ae - Ce : null, j = J !== null && J > 0 && J < 24 * 60 * 60 * 1e3, oe = (y, B, w, P, D) => w === 1 ? `${y} ${w} ${P}` : `${B} ${w} ${D}`, Se = () => {
+    if (!l) return null;
+    const y = ke, w = new Date(l).getTime() - y.getTime();
+    if (w <= 0) return null;
+    const P = Math.floor(w / (1e3 * 60 * 60)), D = Math.floor(w % (1e3 * 60 * 60) / (1e3 * 60)), Ne = Math.floor(w % (1e3 * 60) / 1e3);
+    return { hours: P, minutes: D, seconds: Ne };
+  }, [ke, Ie] = K(/* @__PURE__ */ new Date());
+  ee(() => {
     if (!j) return;
-    const x = setInterval(() => {
-      Ne(/* @__PURE__ */ new Date());
+    const y = setInterval(() => {
+      Ie(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(x);
+    return () => clearInterval(y);
   }, [j]);
   const R = j ? Se() : null;
-  return /* @__PURE__ */ g(
-    Ee,
+  return /* @__PURE__ */ c(
+    je,
     {
-      ref: ne,
+      ref: q,
       theme: o,
-      className: b,
-      name: C == null ? void 0 : C.name,
-      "data-accessor": C == null ? void 0 : C.accessor,
-      onClick: (x) => v(x, ne),
-      ...q,
+      className: k,
+      name: r == null ? void 0 : r.name,
+      "data-accessor": r == null ? void 0 : r.accessor,
+      onClick: (y) => I(y, q),
+      ...Z,
       children: [
-        /* @__PURE__ */ g(je, { theme: o, onClick: () => s == null ? void 0 : s(), children: [
-          /* @__PURE__ */ n("img", { src: f }),
-          /* @__PURE__ */ n(Fe, { children: w == null ? void 0 : w.map((x, B) => {
-            var u, z;
+        /* @__PURE__ */ c(Re, { theme: o, onClick: () => s == null ? void 0 : s(), children: [
+          /* @__PURE__ */ n("img", { src: h }),
+          /* @__PURE__ */ n(We, { children: b == null ? void 0 : b.map((y, B) => {
+            var w, P;
             return /* @__PURE__ */ n(
-              We,
+              Ve,
               {
-                color: (u = p == null ? void 0 : p.find((S) => S.value === x)) == null ? void 0 : u.color,
+                color: (w = C == null ? void 0 : C.find((D) => D.value === y)) == null ? void 0 : w.color,
                 theme: o,
                 children: /* @__PURE__ */ n(
                   ue,
                   {
-                    icon: (z = p == null ? void 0 : p.find((S) => S.value === x)) == null ? void 0 : z.icon
+                    icon: (P = C == null ? void 0 : C.find((D) => D.value === y)) == null ? void 0 : P.icon
                   }
                 )
               },
@@ -443,20 +444,20 @@ const de = (e, t) => {
             );
           }) })
         ] }),
-        /* @__PURE__ */ g(Re, { theme: o, children: [
-          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ g("div", { className: "title-block-wrapper", children: [
-            /* @__PURE__ */ n("div", { className: "campaign-title", children: (ie = T ? _ : d) == null ? void 0 : ie.toUpperCase() }),
-            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: l }),
-            c && m && /* @__PURE__ */ g("div", { className: "campaign-date", children: [
-              ge(m),
+        /* @__PURE__ */ c(Be, { theme: o, children: [
+          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ c("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ n("div", { className: "campaign-title", children: (ie = g ? x : _) == null ? void 0 : ie.toUpperCase() }),
+            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: d }),
+            l && f && /* @__PURE__ */ c("div", { className: "campaign-date", children: [
+              ge(f),
               " - ",
-              ge(c)
+              ge(l)
             ] }),
-            /* @__PURE__ */ g("div", { className: "timestamp-text", children: [
-              P > 0 && /* @__PURE__ */ g("span", { className: "listings-text", children: [
-                P,
+            /* @__PURE__ */ c("div", { className: "timestamp-text", children: [
+              N > 0 && /* @__PURE__ */ c("span", { className: "listings-text", children: [
+                N,
                 " ",
-                P === 1 ? r : Z,
+                N === 1 ? Y : U,
                 " ",
                 "∙",
                 " "
@@ -464,27 +465,27 @@ const de = (e, t) => {
               /* @__PURE__ */ n(
                 "span",
                 {
-                  className: `duration-text ${_e ? "urgent" : ""} ${te ? "" : "starts-in"}`,
-                  children: j && R ? /* @__PURE__ */ g("div", { className: "countdown-timer", children: [
-                    X,
+                  className: `duration-text ${_e ? "urgent" : ""} ${O ? "" : "starts-in"}`,
+                  children: j && R ? /* @__PURE__ */ c("div", { className: "countdown-timer", children: [
+                    L,
                     " ",
                     R.hours.toString().padStart(2, "0"),
                     ":",
                     R.minutes.toString().padStart(2, "0"),
                     ":",
                     R.seconds.toString().padStart(2, "0")
-                  ] }) : te ? oe(
-                    X,
+                  ] }) : O ? oe(
+                    L,
                     H,
                     E,
-                    L,
+                    X,
                     G
                   ) : oe(
-                    V,
+                    A,
                     W,
                     $e,
-                    re,
-                    A
+                    ne,
+                    V
                   )
                 }
               )
@@ -494,14 +495,14 @@ const de = (e, t) => {
             we,
             {
               hasPermission: !0,
-              image: /* @__PURE__ */ n(Ae, { src: $ }),
-              imageComponent: D,
-              themeData: Y,
+              image: /* @__PURE__ */ n(Ae, { src: u }),
+              imageComponent: v,
+              themeData: te,
               isActive: !0,
               isUser: !1,
-              name: N,
-              shopCategory: I,
-              onClick: () => y(i)
+              name: p,
+              shopCategory: S,
+              onClick: () => $(i)
             }
           )
         ] })
@@ -515,7 +516,7 @@ be.propTypes = {
   dropdown: a.any,
   color: a.string
 };
-h.div`
+m.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -546,7 +547,7 @@ h.div`
     }
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -554,19 +555,19 @@ h.div`
     }
   }
 `;
-const F = h.div`
+const F = m.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${pe("-90deg")}
-`, Ve = h.div`
+  ${fe("-90deg")}
+`, He = m.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%"};
-`, me = h.div`
-  border-radius: ${(e) => O(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, me = m.div`
+  border-radius: ${(e) => M(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"};
@@ -575,10 +576,10 @@ const F = h.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${pe()}
-`, He = h.div`
+  ${fe()}
+`, Ge = m.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => O(e.theme, "edged")};
+  border-radius: ${(e) => M(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);
 
@@ -605,19 +606,19 @@ const F = h.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, Ge = h.div`
+`, Xe = m.div`
   display: flex;
   gap: 1.5rem;
-`, Xe = M(({}, e) => {
-  const t = ee();
-  return /* @__PURE__ */ g(He, { ref: e, theme: t, children: [
+`, Ye = z(({}, e) => {
+  const t = re();
+  return /* @__PURE__ */ c(Ge, { ref: e, theme: t, children: [
     /* @__PURE__ */ n("div", { className: "campaign__left-section", children: /* @__PURE__ */ n(
       me,
       {
@@ -627,13 +628,13 @@ const F = h.div`
         borderRadius: "edged"
       }
     ) }),
-    /* @__PURE__ */ g("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ g(Ve, { theme: t, children: [
+    /* @__PURE__ */ c("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ c(He, { theme: t, children: [
         /* @__PURE__ */ n(F, { heightCoeff: 0.75, theme: t, width: "35%" }),
         /* @__PURE__ */ n(F, { heightCoeff: 1.25, theme: t }),
         /* @__PURE__ */ n(F, { heightCoeff: 3, theme: t })
       ] }),
-      /* @__PURE__ */ g("div", { className: "campaign__user", children: [
+      /* @__PURE__ */ c("div", { className: "campaign__user", children: [
         /* @__PURE__ */ n(
           me,
           {
@@ -647,17 +648,17 @@ const F = h.div`
       ] })
     ] })
   ] });
-}), Ye = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ n(Ge, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ n(
-  Xe,
+}), Ze = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ n(Xe, { children: Array.from({ length: e }, (o, i) => /* @__PURE__ */ n(
+  Ye,
   {},
   `${t}-skeleton-campaign-card-${i}`
-)) }), Ze = ({
+)) }), qe = ({
   children: e,
   fallbackComponent: t = /* @__PURE__ */ n(De, {}),
   isLoading: o = !1,
   itemsCount: i = 5,
-  keyPrefix: l
-}) => /* @__PURE__ */ n(ze, { fallback: t, children: o === !0 ? /* @__PURE__ */ n(Ye, { itemsCount: i, keyPrefix: l }) : e }), qe = h.div`
+  keyPrefix: d
+}) => /* @__PURE__ */ n(ze, { fallback: t, children: o === !0 ? /* @__PURE__ */ n(Ze, { itemsCount: i, keyPrefix: d }) : e }), Je = m.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -696,7 +697,9 @@ const F = h.div`
     right: 0;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
+    gap: 1.25rem;
+
     & .scrollable-section__header {
       & .scrollable-section__title {
         & .title__text {
@@ -706,13 +709,13 @@ const F = h.div`
       }
     }
   }
-`, Je = h(fe.div)`
+`, Ke = m(pe.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
   width: 100%;
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${T + "px"}) {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -734,25 +737,36 @@ const F = h.div`
       /* Safari and Chrome */
     }
   }
-`, ve = M(
-  ({ icon: e, title: t, numOfSlides: o = 2, showNavigation: i = !0, children: l }, f) => {
-    const [s, m] = U(0), [c, w] = U(1), [N, I] = U(null), [$, D] = U(null), b = xe(), v = (l == null ? void 0 : l.length) ?? 1;
-    Q(() => {
-      const d = () => {
-        w(o);
+`, ve = z(
+  ({
+    icon: e,
+    title: t,
+    numOfSlides: o = 2,
+    showNavigation: i = !0,
+    hasNextPage: d = !1,
+    handleFetchNextPage: h = () => {
+    },
+    children: s
+  }, f) => {
+    const [l, b] = K(0), [p, S] = K(1), u = xe(), v = (s == null ? void 0 : s.length) ?? 1;
+    ee(() => {
+      const g = () => {
+        S(o);
       };
-      return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
+      return window.addEventListener("resize", g), g(), () => window.removeEventListener("resize", g);
     }, []);
-    const y = b ? l : l == null ? void 0 : l.slice(s, s + c), T = (d) => {
-      var p;
-      (p = d == null ? void 0 : d.target) == null || p.blur(), s + c < v && m(s + c);
-    }, _ = (d) => {
-      var p;
-      (p = d == null ? void 0 : d.target) == null || p.blur(), s - c >= 0 && m(s - c);
+    const k = u ? s : s == null ? void 0 : s.slice(l, l + p), I = (g) => {
+      var _;
+      (_ = g == null ? void 0 : g.target) == null || _.blur();
+      const x = l + p;
+      x < v && b(x), x + p >= v && d && h();
+    }, $ = (g) => {
+      var x;
+      (x = g == null ? void 0 : g.target) == null || x.blur(), l - p >= 0 && b(l - p);
     };
-    return /* @__PURE__ */ g(qe, { ref: f, children: [
-      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ g("div", { className: "scrollable-section__title", children: [
-        K(e) && /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(Je, { ref: f, children: [
+      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ c("div", { className: "scrollable-section__title", children: [
+        Q(e) && /* @__PURE__ */ n(
           ue,
           {
             icon: e,
@@ -761,16 +775,16 @@ const F = h.div`
             className: "title__icon"
           }
         ),
-        K(t) && /* @__PURE__ */ g("div", { className: "title__text", children: [
+        Q(t) && /* @__PURE__ */ c("div", { className: "title__text", children: [
           " ",
           t
         ] })
       ] }) }),
-      /* @__PURE__ */ n(
-        Je,
+      /* @__PURE__ */ c(
+        Ke,
         {
           numOfColumns: o,
-          ...!b && {
+          ...!u && {
             animate: {
               x: 0,
               opacity: 1
@@ -780,11 +794,14 @@ const F = h.div`
               opacity: 0
             }
           },
-          children: y
+          children: [
+            k,
+            u && d && /* @__PURE__ */ n(Ee, { onIsVisible: h })
+          ]
         },
-        `scrollable-section__content-${s}`
+        `scrollable-section__content-${l}`
       ),
-      i && v > c && !b && /* @__PURE__ */ g("div", { className: "scrollable-section__navigation", children: [
+      i && v > p && !u && /* @__PURE__ */ c("div", { className: "scrollable-section__navigation", children: [
         /* @__PURE__ */ n(
           le,
           {
@@ -793,8 +810,8 @@ const F = h.div`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: s === 0,
-            onClick: _
+            disabled: l === 0,
+            onClick: $
           }
         ),
         /* @__PURE__ */ n(
@@ -805,8 +822,8 @@ const F = h.div`
             btnType: "tinted",
             color: "neutral",
             className: "navigation__arrow",
-            disabled: s + c >= v,
-            onClick: T
+            disabled: l + p >= v,
+            onClick: I
           }
         )
       ] })
@@ -818,9 +835,10 @@ ve.propTypes = {
   title: a.string,
   numOfSlides: a.number,
   numOfSlidesForMobile: a.number,
+  handleFetchNextPage: a.func,
   showNavigation: a.bool
 };
-const Ke = h.div`
+const Qe = m.div`
   display: flex;
   flex: 1;
   width: 100%;
@@ -837,20 +855,20 @@ const Ke = h.div`
     border-radius: 1.25rem;
     object-fit: cover;
   }
-`, ye = M(
+`, ye = z(
   ({
     sectionName: e,
     imageUrl: t,
     maxHeight: o = "16.25rem",
     className: i = "",
-    handleClick: l = () => {
+    handleClick: d = () => {
     }
-  }, f) => /* @__PURE__ */ n(
-    Ke,
+  }, h) => /* @__PURE__ */ n(
+    Qe,
     {
-      ref: f,
+      ref: h,
       maxHeight: o,
-      onClick: l,
+      onClick: d,
       className: `itemless-banner ${i}`,
       children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${e}` })
     }
@@ -863,46 +881,49 @@ ye.propTypes = {
   className: a.string,
   handleClick: a.func
 };
-const Qe = Me(be), hr = M(
+const er = Me(be), pr = z(
   ({
     sellerType: e = "Shop",
     items: t = [],
     title: o,
     icon: i,
-    isLoading: l,
-    onSelectCard: f = () => {
+    isLoading: d,
+    onSelectCard: h = () => {
     },
     onSelectShop: s = () => {
     },
-    getImage: m = () => {
+    getImage: f = () => {
     },
-    campaignSingleText: c,
-    upcomingCampaignText: w,
-    salesCampaignTypes: N = [],
-    startsInPrefixTextPlural: I,
-    startsinSuffixTextPlural: $,
-    startsInPrefixTextSingular: D,
-    startsinSuffixTextSingular: b,
-    endsInPrefixTextPlural: v,
-    endsinSuffixTextPlural: y,
-    endsInPrefixTextSingular: T,
-    endsinSuffixTextSingular: _,
-    numOfSlides: d = 2,
-    showNavigation: p = !0,
+    campaignSingleText: l,
+    upcomingCampaignText: b,
+    salesCampaignTypes: p = [],
+    startsInPrefixTextPlural: S,
+    startsinSuffixTextPlural: u,
+    startsInPrefixTextSingular: v,
+    startsinSuffixTextSingular: k,
+    endsInPrefixTextPlural: I,
+    endsinSuffixTextPlural: $,
+    endsInPrefixTextSingular: g,
+    endsinSuffixTextSingular: x,
+    numOfSlides: _ = 2,
+    showNavigation: C = !0,
     numberOfListingsTextSingular: W,
-    numberOfListingsTextPlural: A,
-    itemlessImageUrl: V,
-    itemlessLink: re,
+    numberOfListingsTextPlural: V,
+    itemlessImageUrl: A,
+    itemlessLink: ne,
     handleItemlessLink: H = () => {
     },
-    componentName: G
-  }, X) => {
-    const L = xe(), Y = Le(() => {
-      let P = t == null ? void 0 : t.map((r, Z) => /* @__PURE__ */ n(
-        Qe,
+    componentName: G,
+    hasNextPage: L = !1,
+    handleFetchNextPage: X = () => {
+    }
+  }, te) => {
+    const N = xe(), Y = Le(() => {
+      let U = t == null ? void 0 : t.map((r, Z) => /* @__PURE__ */ n(
+        er,
         {
           className: "campaign-item",
-          coverPhoto: m(
+          coverPhoto: f(
             r == null ? void 0 : r.coverPhoto,
             (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
           ),
@@ -918,62 +939,64 @@ const Qe = Me(be), hr = M(
           startDate: r == null ? void 0 : r.startDate,
           title: r == null ? void 0 : r.name,
           uuid: r == null ? void 0 : r.campaignUuid,
-          onSelectCard: (C, q) => f(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid, q),
+          onSelectCard: (q, O) => h(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid, O),
           onSelectShop: () => s(r == null ? void 0 : r.shopUuid),
-          campaignSingleText: c,
-          upcomingCampaignText: w,
+          campaignSingleText: l,
+          upcomingCampaignText: b,
           upcoming: r == null ? void 0 : r.upcoming,
-          salesCampaignTypes: N,
-          startsInPrefixTextPlural: I,
-          startsinSuffixTextPlural: $,
-          startsInPrefixTextSingular: D,
-          startsinSuffixTextSingular: b,
-          endsInPrefixTextPlural: v,
-          endsinSuffixTextPlural: y,
-          endsInPrefixTextSingular: T,
-          endsinSuffixTextSingular: _,
+          salesCampaignTypes: p,
+          startsInPrefixTextPlural: S,
+          startsinSuffixTextPlural: u,
+          startsInPrefixTextSingular: v,
+          startsinSuffixTextSingular: k,
+          endsInPrefixTextPlural: I,
+          endsinSuffixTextPlural: $,
+          endsInPrefixTextSingular: g,
+          endsinSuffixTextSingular: x,
           themeData: r == null ? void 0 : r.themeData,
           numberOfListings: r == null ? void 0 : r.numberOfListings,
           numberOfListingsTextSingular: W,
-          numberOfListingsTextPlural: A,
+          numberOfListingsTextPlural: V,
           metadata: { name: G, accessor: r == null ? void 0 : r.accessor }
         },
         `campaign__item__${Z}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
       ));
-      return (t == null ? void 0 : t.length) < 2 && !L ? [
-        ...P,
+      return (t == null ? void 0 : t.length) < 2 && !N ? [
+        ...U,
         /* @__PURE__ */ n(
           ye,
           {
-            imageUrl: V,
+            imageUrl: A,
             className: "campaign-item",
             handleClick: H
           },
           "itemless-campaign-section-banner"
         )
-      ] : P;
+      ] : U;
     }, [t]);
     return /* @__PURE__ */ n(
-      Ze,
+      qe,
       {
-        isLoading: l,
-        itemsCount: L ? 1 : 2,
+        isLoading: d,
+        itemsCount: N ? 1 : 2,
         keyPrefix: "sales-camp",
         children: /* @__PURE__ */ n(
           ve,
           {
             icon: i,
             title: o,
-            numOfSlides: d,
-            showNavigation: p,
+            numOfSlides: _,
+            showNavigation: C,
+            hasNextPage: L,
+            handleFetchNextPage: X,
             children: Y
           },
-          `sales-campaign-section__${L}`
+          `sales-campaign-section__${N}`
         )
       }
     );
   }
 );
 export {
-  hr as default
+  pr as default
 };