@lanaco/lnc-react-ui 4.0.111 → 4.0.113

package/dist/SalesCampaignsSection.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as f, Fragment as ae } from "react/jsx-runtime";
-import { createElement as te, forwardRef as P, Suspense as oe, useState as E, useEffect as ne, memo as ie, useMemo as se } from "react";
-import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as N, o as G, k as O } from "./utils-BbgAIA9N.js";
-import { M as k } from "./consts-BuFChS64.js";
-import { m as Z } from "./motion-Ckekul_K.js";
-import { P as n } from "./index-S5Cd7WrG.js";
-import q from "./Icon.js";
-import le from "./Badge.js";
-import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import L from "./IconButton.js";
-import { u as H } from "./useDetectMobile-Bkvj0VMa.js";
-const ce = d.div`
+import { jsx as t, jsxs as m, Fragment as pe } from "react/jsx-runtime";
+import { createElement as xe, forwardRef as B, Suspense as be, useState as M, useEffect as we, memo as ve, useMemo as ye } from "react";
+import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { a as F, o as Q, k as Z } from "./utils-BbgAIA9N.js";
+import { M as P } from "./consts-BuFChS64.js";
+import { m as ee } from "./motion-Ckekul_K.js";
+import { P as o } from "./index-CblbdqjE.js";
+import re from "./Icon.js";
+import $e from "./Badge.js";
+import { u as X } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import q from "./IconButton.js";
+import { u as ae } from "./useDetectMobile-Bkvj0VMa.js";
+const _e = h.div`
   cursor: pointer;
   display: flex;
   gap: 1rem;
@@ -18,15 +18,15 @@ const ce = d.div`
   border-radius: 20px;
   border: 1px solid var(--gray-95008, #14161a14);
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     flex-direction: column;
     padding: 0;
     gap: 0;
     border: none;
     border-radius: 0;
   }
-`, de = d.div`
-  border-radius: ${(e) => N(e.theme, "edged")};
+`, Ce = h.div`
+  border-radius: ${(e) => F(e.theme, "edged")};
   height: 15rem;
   width: 15rem;
   min-width: 15rem;
@@ -49,12 +49,12 @@ const ce = d.div`
     }
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     width: 100%;
     max-width: 100dvh;
     height: 23.438rem;
   }
-`, me = d.div`
+`, De = h.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -75,7 +75,6 @@ const ce = d.div`
     font-weight: 600;
     font-size: 1.375rem;
     transition: var(--transition, all 0.3s ease);
-  
   }
 
   & .text-block-wrapper {
@@ -90,9 +89,9 @@ const ce = d.div`
   }
 
   & .timestamp-text {
-    font-size: 0.875rem;
-    font-weight: 400;
-    padding-top: 0.25rem;
+    font-size: 0.975rem;
+    font-weight: 500;
+    padding-top: 0.75rem;
     color: var(--gray-700, #4e555f);
   }
 
@@ -100,7 +99,7 @@ const ce = d.div`
     background-color: transparent;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     padding: 1.25rem;
 
     & .campaign-title {
@@ -114,7 +113,7 @@ const ce = d.div`
       gap: 0.25rem;
     }
   }
-`, ge = {
+`, Se = {
   "#ADE3EB": "#76D0DB",
   "#DDD6FE": "#C4B5FD",
   "#FDE68A": "#FCD34D",
@@ -126,13 +125,13 @@ const ce = d.div`
   "#E7E5E4": "#D6D3D1",
   "#FED7AA": "#FDBA74",
   default: "#C4C8CF"
-}, W = (e = !1, t = !1, i = !1) => `
+}, H = (e = !1, a = !1, i = !1) => `
     display: flex;
-    ${t ? "flex-wrap: wrap;" : ""}
-    ${t ? "" : "flex-wrap: nowrap;"}
+    ${a ? "flex-wrap: wrap;" : ""}
+    ${a ? "" : "flex-wrap: nowrap;"}
     ${e ? "align-items: center;" : ""}
     ${i ? "justify-content: center;" : ""}
-  `, he = d(Z.div)`
+  `, Te = h(ee.div)`
   text-decoration: none;
   ${(e) => e.hasPermission === !0 && "cursor: pointer"};
 
@@ -149,29 +148,34 @@ const ce = d.div`
     text-decoration: none;
   }
 
-  ${W(!0)}
+  ${H(!0)}
   gap: 0.5rem;
   padding: 0.5rem;
   color: ${(e) => e.isActive === !1 ? "var(--gray-900)" : "var(--primary-600)"};
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border-radius: ${(e) => N(e.theme, "slight")};
+  border-radius: ${(e) => F(e.theme, "slight")};
   transition: all 0.25s ease;
-
+  & .description {
+    font-size: 0.85rem;
+    color: var(--gray-600, #676e79);
+    line-height: 1rem;
+    font-weight: 400;
+  }
   & .logo-wrapper {
-    ${W(!0, !1, !0)}
+    ${H(!0, !1, !0)}
     flex-shrink: 0;
     border-radius: 999px;
     border: 3px solid
-      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : ge[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
+      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : Se[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};
 
     & img,
     .img-placeholder {
       border-radius: 999px;
       object-fit: cover;
-      height: 1.25rem;
-      width: 1.25rem;
+      height: 2.25rem;
+      width: 2.25rem;
       background-color: var(--gray-200, #dddfe4);
     }
 
@@ -188,6 +192,7 @@ const ce = d.div`
 
   & .name {
     flex-grow: 15;
+    font-size: 1.055rem;
   }
 
   & .notifications-number .badge {
@@ -206,15 +211,15 @@ const ce = d.div`
     background-color: var(--gray-95080, #14161acc);
     color: var(--gray-600, #676e79);
   }
-`, fe = d.div`
+`, ke = h.div`
   position: absolute;
   top: 0.5rem;
   ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
   display: flex;
   gap: 0.25rem;
-`, ue = (e) => `var(--${e}-700)`, pe = d.div`
-  border-radius: ${(e) => N(e.theme, e.borderRadius || "slight")};
-  background-color: ${(e) => ue(e == null ? void 0 : e.color)};
+`, Ne = h.div`
+  border-radius: ${(e) => F(e.theme, e.borderRadius || "slight")};
+  background-color: ${(e) => e == null ? void 0 : e.color};
   color: white;
   height: 1.5rem;
   min-width: 1.5rem;
@@ -228,59 +233,63 @@ const ce = d.div`
   & i {
     font-size: 0.813rem;
   }
-`, J = (e) => {
+`, te = (e) => {
   const {
-    uuid: t,
+    uuid: a,
     hasPermission: i = !0,
-    isUser: h,
-    image: u,
-    name: m,
-    notifications: v = 0,
-    color: c = "primary",
-    size: b = "large",
-    style: s,
-    disabled: C,
-    onClick: l = () => {
+    isUser: l,
+    image: p,
+    name: u,
+    notifications: y = 0,
+    color: g = "primary",
+    size: $ = "large",
+    style: c,
+    disabled: S,
+    onClick: s = () => {
     },
-    isActive: y,
-    className: p,
+    isActive: f,
+    className: b,
+    shopCategory: _,
     // new
     themeData: x
-  } = e, $ = {
-    theme: A(),
-    color: c,
-    size: b,
-    style: s,
-    disabled: C
+  } = e, w = {
+    theme: X(),
+    color: g,
+    size: $,
+    style: c,
+    disabled: S
   };
-  return /* @__PURE__ */ te(
-    he,
+  return /* @__PURE__ */ xe(
+    Te,
     {
-      onClick: (_) => {
-        _.stopPropagation(), i === !0 && (l == null || l());
+      onClick: (D) => {
+        D.stopPropagation(), i === !0 && (s == null || s());
       },
-      ...$,
-      key: m,
-      className: `profile-item ${p}`,
+      ...w,
+      key: u,
+      className: `profile-item ${b}`,
       hasPermission: i,
-      isActive: y,
+      isActive: f,
       themeColor: (x == null ? void 0 : x.code) || "transparent"
     },
-    /* @__PURE__ */ a("div", { className: "logo-wrapper", children: u }),
-    /* @__PURE__ */ a("div", { className: "name", children: m }),
-    v > 0 && /* @__PURE__ */ a("div", { className: "notifications-number", children: /* @__PURE__ */ a(le, { className: "badge", color: "danger", size: "small", children: v > 99 ? "99+" : v }) })
+    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: p }),
+    /* @__PURE__ */ m("div", { children: [
+      /* @__PURE__ */ t("div", { className: "name", children: u }),
+      !l && /* @__PURE__ */ t("div", { className: "description", children: _ }),
+      y > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t($e, { className: "badge", color: "danger", size: "small", children: y > 99 ? "99+" : y }) })
+    ] })
   );
 };
-J.propTypes = {
-  id: n.any,
-  isUserProfile: n.bool,
-  themeColor: n.string,
-  image: n.any,
-  name: n.string,
-  notifications: n.number,
-  style: n.object,
-  className: n.string,
-  color: n.oneOf([
+te.propTypes = {
+  id: o.any,
+  isUserProfile: o.bool,
+  themeColor: o.string,
+  image: o.any,
+  name: o.string,
+  notifications: o.number,
+  style: o.object,
+  className: o.string,
+  color: o.oneOf([
     "primary",
     "secondary",
     "success",
@@ -289,91 +298,127 @@ J.propTypes = {
     "information",
     "neutral"
   ]),
-  size: n.oneOf(["large"]),
-  onSelect: n.func,
-  hasPermission: n.bool
+  size: o.oneOf(["large"]),
+  onSelect: o.func,
+  hasPermission: o.bool
 };
-const V = (e, t) => {
-  if (!e || !t) return null;
-  let i = Math.floor((e == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime())), h = 1e3 * 60 * 60 * 24;
-  return Math.ceil(i / h);
-}, K = P((e, t) => {
-  const i = A(), {
-    uuid: h,
-    shopUuid: u,
-    title: m = "",
-    description: v,
-    badges: c,
-    coverPhoto: b,
-    onSelect: s,
-    status: C,
-    startDate: l,
-    endDate: y,
-    salesPackages: p,
-    shopName: x,
-    shopImage: w,
-    className: $,
-    onSelectCard: _ = () => {
+const V = (e, a) => {
+  if (!e || !a) return null;
+  let i = Math.floor((e == null ? void 0 : e.getTime()) - (a == null ? void 0 : a.getTime())), l = 1e3 * 60 * 60 * 24;
+  return Math.ceil(i / l);
+}, J = (e) => {
+  if (e !== void 0) {
+    const a = new Date(e), i = a.getFullYear(), l = a.getMonth() + 1;
+    return `${String(a.getDate()).padStart(2)}. ${l}. ${i}.`;
+  }
+}, ne = B((e, a) => {
+  var Y;
+  const i = X(), {
+    uuid: l,
+    shopUuid: p,
+    title: u = "",
+    description: y,
+    badges: g,
+    coverPhoto: $,
+    onSelect: c,
+    status: S,
+    startDate: s,
+    endDate: f,
+    salesPackages: b,
+    shopName: _,
+    shopCategory: x,
+    shopImage: C,
+    className: w,
+    onSelectCard: D = () => {
     },
-    onSelectShop: S = () => {
+    onSelectShop: T = () => {
     },
-    campaignSingleText: D,
-    salesCampaignTypes: r = [],
-    startsInPrefixTextPlural: T,
-    startsinSuffixTextPlural: B,
-    startsInPrefixTextSingular: M,
-    startsinSuffixTextSingular: o,
-    themeData: g,
-    ...Y
-  } = e, ee = l ? new Date(l) <= /* @__PURE__ */ new Date() : !1;
+    upcoming: k = !1,
+    upcomingCampaignText: I,
+    campaignSingleText: z,
+    salesCampaignTypes: v = [],
+    startsInPrefixTextPlural: n,
+    startsinSuffixTextPlural: d,
+    startsInPrefixTextSingular: L,
+    startsinSuffixTextSingular: r,
+    endsInPrefixTextPlural: R,
+    endsinSuffixTextPlural: ie,
+    endsInPrefixTextSingular: se,
+    endsinSuffixTextSingular: le,
+    themeData: ce,
+    numberOfListings: j,
+    numberOfListingsTextSingular: de,
+    numberOfListingsTextPlural: ge,
+    ...me
+  } = e, he = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
   V(
-    y ? new Date(y) : null,
-    l ? new Date(l) : null
+    f ? new Date(f) : null,
+    s ? new Date(s) : null
   );
-  const I = V(
-    l ? new Date(l) : null,
+  const ue = V(
+    s ? new Date(s) : null,
     /* @__PURE__ */ new Date()
-  );
-  return /* @__PURE__ */ f(
-    ce,
+  ), fe = V(
+    f ? new Date(f) : null,
+    /* @__PURE__ */ new Date()
+  ), G = (A, W, N, O, E) => N === 1 ? `${A} ${N} ${O}` : `${W} ${N} ${E}`;
+  return /* @__PURE__ */ m(
+    _e,
     {
-      ref: t,
+      ref: a,
       theme: i,
-      className: $,
-      onClick: _,
-      ...Y,
+      className: w,
+      onClick: D,
+      ...me,
       children: [
-        /* @__PURE__ */ f(de, { theme: i, onClick: () => s == null ? void 0 : s(), children: [
-          /* @__PURE__ */ a("img", { src: b }),
-          /* @__PURE__ */ a(fe, { children: p == null ? void 0 : p.map((U, re) => {
-            var R, j;
-            return /* @__PURE__ */ a(
-              pe,
+        /* @__PURE__ */ m(Ce, { theme: i, onClick: () => c == null ? void 0 : c(), children: [
+          /* @__PURE__ */ t("img", { src: $ }),
+          /* @__PURE__ */ t(ke, { children: b == null ? void 0 : b.map((A, W) => {
+            var N, O;
+            return /* @__PURE__ */ t(
+              Ne,
               {
-                color: (R = r == null ? void 0 : r.find((z) => z.value === U)) == null ? void 0 : R.color,
+                color: (N = v == null ? void 0 : v.find((E) => E.value === A)) == null ? void 0 : N.color,
                 theme: i,
-                children: /* @__PURE__ */ a(
-                  q,
+                children: /* @__PURE__ */ t(
+                  re,
                   {
-                    icon: (j = r == null ? void 0 : r.find((z) => z.value === U)) == null ? void 0 : j.icon
+                    icon: (O = v == null ? void 0 : v.find((E) => E.value === A)) == null ? void 0 : O.icon
                   }
                 )
               },
-              `package__${re}`
+              `package__${W}`
             );
           }) })
         ] }),
-        /* @__PURE__ */ f(me, { theme: i, children: [
-          /* @__PURE__ */ f("div", { className: "text-block-wrapper", children: [
-            /* @__PURE__ */ f("div", { className: "title-block-wrapper", children: [
-              /* @__PURE__ */ a("div", { className: "campaign-title", children: D }),
-              /* @__PURE__ */ a("div", { className: "campaign-title-text", children: m }),
-              /* @__PURE__ */ a("div", { className: "timestamp-text", children: ee ? "" : I === 1 ? `${M} ${I} ${o}` : `${T} ${I} ${B}` })
+        /* @__PURE__ */ m(De, { theme: i, children: [
+          /* @__PURE__ */ t("div", { className: "text-block-wrapper", children: /* @__PURE__ */ m("div", { className: "title-block-wrapper", children: [
+            /* @__PURE__ */ t("div", { className: "campaign-title", children: (Y = k ? I : z) == null ? void 0 : Y.toUpperCase() }),
+            /* @__PURE__ */ t("div", { className: "campaign-title-text", children: u }),
+            f && s && /* @__PURE__ */ m("div", { children: [
+              J(s),
+              " - ",
+              J(f)
             ] }),
-            /* @__PURE__ */ a("div", { children: v })
-          ] }),
-          /* @__PURE__ */ a(
-            J,
+            /* @__PURE__ */ m("div", { className: "timestamp-text", children: [
+              j > 0 && `${j} ${j === 1 ? de : ge} ∙ `,
+              he ? G(
+                se,
+                R,
+                fe,
+                le,
+                ie
+              ) : G(
+                L,
+                n,
+                ue,
+                r,
+                d
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ t(
+            te,
             {
               hasPermission: !0,
               image: (
@@ -383,19 +428,20 @@ const V = (e, t) => {
                 //   size={ImageSize.SMALL}
                 //   className={`${shopImage ? "" : "no-image"}`}
                 // />
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ t(
                   "img",
                   {
-                    src: w,
-                    className: `${w ? "" : "no-image"}`
+                    src: C,
+                    className: `${C ? "" : "no-image"}`
                   }
                 )
               ),
-              themeData: g,
+              themeData: ce,
               isActive: !0,
               isUser: !1,
-              name: x,
-              onClick: () => S(u)
+              name: _,
+              shopCategory: x,
+              onClick: () => T(p)
             }
           )
         ] })
@@ -403,13 +449,13 @@ const V = (e, t) => {
     }
   );
 });
-K.propTypes = {
-  title: n.oneOfType([n.string, n.element]),
-  numberOfListings: n.number,
-  dropdown: n.any,
-  color: n.string
+ne.propTypes = {
+  title: o.oneOfType([o.string, o.element]),
+  numberOfListings: o.number,
+  dropdown: o.any,
+  color: o.string
 };
-d.div`
+h.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -440,7 +486,7 @@ d.div`
     }
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     & .campaign-item {
       min-width: 100%;
       width: 100%;
@@ -448,19 +494,19 @@ d.div`
     }
   }
 `;
-const F = d.div`
+const U = h.div`
   width: ${(e) => e.width || "100%"};
   height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
   background-color: var(--gray-200, #dddfe4);
 
-  ${G("-90deg")}
-`, xe = d.div`
+  ${Q("-90deg")}
+`, Pe = h.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%"};
-`, X = d.div`
-  border-radius: ${(e) => N(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
+`, K = h.div`
+  border-radius: ${(e) => F(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"};
@@ -469,10 +515,10 @@ const F = d.div`
   width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
   flex-shrink: 0;
 
-  ${G()}
-`, ve = d.div`
+  ${Q()}
+`, Ee = h.div`
   background: var(--white, #fff);
-  border-radius: ${(e) => N(e.theme, "edged")};
+  border-radius: ${(e) => F(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);
 
@@ -499,59 +545,59 @@ const F = d.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     flex-direction: column;
 
     & .campaign__user {
       margin-top: 1rem;
     }
   }
-`, we = d.div`
+`, Fe = h.div`
   display: flex;
   gap: 1.5rem;
-`, be = P(({}, e) => {
-  const t = A();
-  return /* @__PURE__ */ f(ve, { ref: e, theme: t, children: [
-    /* @__PURE__ */ a("div", { className: "campaign__left-section", children: /* @__PURE__ */ a(
-      X,
+`, Ie = B(({}, e) => {
+  const a = X();
+  return /* @__PURE__ */ m(Ee, { ref: e, theme: a, children: [
+    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
+      K,
       {
-        theme: t,
+        theme: a,
         width: "15rem",
         height: "15rem",
         borderRadius: "edged"
       }
     ) }),
-    /* @__PURE__ */ f("div", { className: "campaign__right-section", children: [
-      /* @__PURE__ */ f(xe, { theme: t, children: [
-        /* @__PURE__ */ a(F, { heightCoeff: 0.75, theme: t, width: "35%" }),
-        /* @__PURE__ */ a(F, { heightCoeff: 1.25, theme: t }),
-        /* @__PURE__ */ a(F, { heightCoeff: 3, theme: t })
+    /* @__PURE__ */ m("div", { className: "campaign__right-section", children: [
+      /* @__PURE__ */ m(Pe, { theme: a, children: [
+        /* @__PURE__ */ t(U, { heightCoeff: 0.75, theme: a, width: "35%" }),
+        /* @__PURE__ */ t(U, { heightCoeff: 1.25, theme: a }),
+        /* @__PURE__ */ t(U, { heightCoeff: 3, theme: a })
       ] }),
-      /* @__PURE__ */ f("div", { className: "campaign__user", children: [
-        /* @__PURE__ */ a(
-          X,
+      /* @__PURE__ */ m("div", { className: "campaign__user", children: [
+        /* @__PURE__ */ t(
+          K,
           {
-            theme: t,
+            theme: a,
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "curved"
           }
         ),
-        /* @__PURE__ */ a(F, { theme: t, width: "75%" })
+        /* @__PURE__ */ t(U, { theme: a, width: "75%" })
       ] })
     ] })
   ] });
-}), ye = ({ itemsCount: e = 5, keyPrefix: t }) => /* @__PURE__ */ a(we, { children: Array.from({ length: e }, (i, h) => /* @__PURE__ */ a(
-  be,
+}), ze = ({ itemsCount: e = 5, keyPrefix: a }) => /* @__PURE__ */ t(Fe, { children: Array.from({ length: e }, (i, l) => /* @__PURE__ */ t(
+  Ie,
   {},
-  `${t}-skeleton-campaign-card-${h}`
-)) }), $e = ({
+  `${a}-skeleton-campaign-card-${l}`
+)) }), Ae = ({
   children: e,
-  fallbackComponent: t = /* @__PURE__ */ a(ae, {}),
+  fallbackComponent: a = /* @__PURE__ */ t(pe, {}),
   isLoading: i = !1,
-  itemsCount: h = 5,
-  keyPrefix: u
-}) => /* @__PURE__ */ a(oe, { fallback: t, children: i === !0 ? /* @__PURE__ */ a(ye, { itemsCount: h, keyPrefix: u }) : e }), _e = d.div`
+  itemsCount: l = 5,
+  keyPrefix: p
+}) => /* @__PURE__ */ t(be, { fallback: a, children: i === !0 ? /* @__PURE__ */ t(ze, { itemsCount: l, keyPrefix: p }) : e }), Oe = h.div`
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -592,56 +638,56 @@ const F = d.div`
     top: 0;
     right: 0;
   }
-`, Ce = d(Z.div)`
+`, Me = h(ee.div)`
   display: grid;
   grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumns}, 1fr);
   gap: 1.5rem;
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${P + "px"}) {
     grid-template-columns: repeat(${(e) => e == null ? void 0 : e.numOfColumnsForMobile}, 1fr);
   }
-`, Q = P(
+`, oe = B(
   ({
     icon: e,
-    title: t,
+    title: a,
     numOfSlides: i = 2,
-    numOfSlidesForMobile: h = 1,
-    showNavigation: u = !0,
-    children: m
-  }, v) => {
-    const [c, b] = E(0), [s, C] = E(1), [l, y] = E(null), [p, x] = E(null), w = H(), $ = 50, _ = (m == null ? void 0 : m.length) ?? 1;
-    ne(() => {
-      const o = () => {
-        C(w ? h : i);
+    numOfSlidesForMobile: l = 1,
+    showNavigation: p = !0,
+    children: u
+  }, y) => {
+    const [g, $] = M(0), [c, S] = M(1), [s, f] = M(null), [b, _] = M(null), x = ae(), C = 50, w = (u == null ? void 0 : u.length) ?? 1;
+    we(() => {
+      const n = () => {
+        S(x ? l : i);
       };
-      return window.addEventListener("resize", o), o(), () => window.removeEventListener("resize", o);
+      return window.addEventListener("resize", n), n(), () => window.removeEventListener("resize", n);
     }, []);
-    const S = m == null ? void 0 : m.slice(c, c + s), D = (o) => {
-      var g;
-      (g = o == null ? void 0 : o.target) == null || g.blur(), c + s < _ && b(c + s);
-    }, r = (o) => {
-      var g;
-      (g = o == null ? void 0 : o.target) == null || g.blur(), c - s >= 0 && b(c - s);
+    const D = u == null ? void 0 : u.slice(g, g + c), T = (n) => {
+      var d;
+      (d = n == null ? void 0 : n.target) == null || d.blur(), g + c < w && $(g + c);
+    }, k = (n) => {
+      var d;
+      (d = n == null ? void 0 : n.target) == null || d.blur(), g - c >= 0 && $(g - c);
     };
-    return /* @__PURE__ */ f(
-      _e,
+    return /* @__PURE__ */ m(
+      Oe,
       {
-        ref: v,
-        ...w ? { onTouchStart: (o) => {
-          var g;
-          x(null), y((g = o == null ? void 0 : o.targetTouches["0"]) == null ? void 0 : g.clientX);
-        }, onTouchMove: (o) => {
-          var g;
-          x((g = o == null ? void 0 : o.targetTouches["0"]) == null ? void 0 : g.clientX);
+        ref: y,
+        ...x ? { onTouchStart: (n) => {
+          var d;
+          _(null), f((d = n == null ? void 0 : n.targetTouches["0"]) == null ? void 0 : d.clientX);
+        }, onTouchMove: (n) => {
+          var d;
+          _((d = n == null ? void 0 : n.targetTouches["0"]) == null ? void 0 : d.clientX);
         }, onTouchEnd: () => {
-          if (!l || !p) return;
-          const o = l - p;
-          o > $ && D(), o < -$ && r();
+          if (!s || !b) return;
+          const n = s - b;
+          n > C && T(), n < -C && k();
         } } : {},
         children: [
-          /* @__PURE__ */ a("div", { className: "scrollable-section__header", children: /* @__PURE__ */ f("div", { className: "scrollable-section__title", children: [
-            O(e) && /* @__PURE__ */ a(
-              q,
+          /* @__PURE__ */ t("div", { className: "scrollable-section__header", children: /* @__PURE__ */ m("div", { className: "scrollable-section__title", children: [
+            Z(e) && /* @__PURE__ */ t(
+              re,
               {
                 icon: e,
                 color: "primary",
@@ -649,13 +695,13 @@ const F = d.div`
                 className: "title__icon"
               }
             ),
-            O(t) && /* @__PURE__ */ a("div", { className: "title__text", children: t })
+            Z(a) && /* @__PURE__ */ t("div", { className: "title__text", children: a })
           ] }) }),
-          /* @__PURE__ */ a(
-            Ce,
+          /* @__PURE__ */ t(
+            Me,
             {
               numOfColumns: i,
-              numOfColumnsForMobile: h,
+              numOfColumnsForMobile: l,
               animate: {
                 x: 0,
                 opacity: 1
@@ -664,33 +710,33 @@ const F = d.div`
                 x: 10,
                 opacity: 0
               },
-              children: S
+              children: D
             },
-            `scrollable-section__content-${c}`
+            `scrollable-section__content-${g}`
           ),
-          u && _ > s && !w && /* @__PURE__ */ f("div", { className: "scrollable-section__navigation", children: [
-            /* @__PURE__ */ a(
-              L,
+          p && w > c && !x && /* @__PURE__ */ m("div", { className: "scrollable-section__navigation", children: [
+            /* @__PURE__ */ t(
+              q,
               {
                 icon: "angle-left",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
                 className: "navigation__arrow",
-                disabled: c === 0,
-                onClick: r
+                disabled: g === 0,
+                onClick: k
               }
             ),
-            /* @__PURE__ */ a(
-              L,
+            /* @__PURE__ */ t(
+              q,
               {
                 icon: "angle-right",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
                 className: "navigation__arrow",
-                disabled: c + s >= _,
-                onClick: D
+                disabled: g + c >= w,
+                onClick: T
               }
             )
           ] })
@@ -699,41 +745,48 @@ const F = d.div`
     );
   }
 );
-Q.propTypes = {
-  icon: n.string,
-  title: n.string,
-  numOfSlides: n.number,
-  numOfSlidesForMobile: n.number,
-  showNavigation: n.bool
+oe.propTypes = {
+  icon: o.string,
+  title: o.string,
+  numOfSlides: o.number,
+  numOfSlidesForMobile: o.number,
+  showNavigation: o.bool
 };
-const De = ie(K), Ue = P(
+const Ue = ve(ne), Je = B(
   ({
     sellerType: e = "Shop",
-    items: t = [],
+    items: a = [],
     title: i,
-    icon: h,
-    isLoading: u,
-    onSelectCard: m = () => {
+    icon: l,
+    isLoading: p,
+    onSelectCard: u = () => {
     },
-    onSelectShop: v = () => {
+    onSelectShop: y = () => {
     },
-    getImage: c = () => {
+    getImage: g = () => {
     },
-    campaignSingleText: b,
-    salesCampaignTypes: s = [],
-    startsInPrefixTextPlural: C,
-    startsinSuffixTextPlural: l,
-    startsInPrefixTextSingular: y,
-    startsinSuffixTextSingular: p,
-    numOfSlides: x = 2,
-    numOfSlidesForMobile: w = 1,
-    showNavigation: $ = !0
-  }, _) => {
-    const S = H(), D = se(() => t == null ? void 0 : t.map((r, T) => /* @__PURE__ */ a(
-      De,
+    campaignSingleText: $,
+    upcomingCampaignText: c,
+    salesCampaignTypes: S = [],
+    startsInPrefixTextPlural: s,
+    startsinSuffixTextPlural: f,
+    startsInPrefixTextSingular: b,
+    startsinSuffixTextSingular: _,
+    endsInPrefixTextPlural: x,
+    endsinSuffixTextPlural: C,
+    endsInPrefixTextSingular: w,
+    endsinSuffixTextSingular: D,
+    numOfSlides: T = 2,
+    numOfSlidesForMobile: k = 1,
+    showNavigation: I = !0,
+    numberOfListingsTextSingular: z,
+    numberOfListingsTextPlural: v
+  }, n) => {
+    const d = ae(), L = ye(() => a == null ? void 0 : a.map((r, R) => /* @__PURE__ */ t(
+      Ue,
       {
         className: "campaign-item",
-        coverPhoto: c(
+        coverPhoto: g(
           r == null ? void 0 : r.coverPhoto,
           (r == null ? void 0 : r.uuid) || (r == null ? void 0 : r.campaignUuid)
         ),
@@ -744,36 +797,46 @@ const De = ie(K), Ue = P(
         shopImage: r == null ? void 0 : r.profileImage,
         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: () => m(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
-        onSelectShop: () => v(r == null ? void 0 : r.shopUuid),
-        campaignSingleText: b,
-        salesCampaignTypes: s,
-        startsInPrefixTextPlural: C,
-        startsinSuffixTextPlural: l,
-        startsInPrefixTextSingular: y,
-        startsinSuffixTextSingular: p,
-        themeData: r == null ? void 0 : r.themeData
+        onSelectCard: () => u(r == null ? void 0 : r.campaignUuid, r == null ? void 0 : r.shopUuid),
+        onSelectShop: () => y(r == null ? void 0 : r.shopUuid),
+        campaignSingleText: $,
+        upcomingCampaignText: c,
+        upcoming: r == null ? void 0 : r.upcoming,
+        salesCampaignTypes: S,
+        startsInPrefixTextPlural: s,
+        startsinSuffixTextPlural: f,
+        startsInPrefixTextSingular: b,
+        startsinSuffixTextSingular: _,
+        endsInPrefixTextPlural: x,
+        endsinSuffixTextPlural: C,
+        endsInPrefixTextSingular: w,
+        endsinSuffixTextSingular: D,
+        themeData: r == null ? void 0 : r.themeData,
+        numberOfListings: r == null ? void 0 : r.numberOfListings,
+        numberOfListingsTextSingular: z,
+        numberOfListingsTextPlural: v
       },
-      `campaign__item__${T}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
-    )), [t]);
-    return /* @__PURE__ */ a(
-      $e,
+      `campaign__item__${R}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
+    )), [a]);
+    return /* @__PURE__ */ t(
+      Ae,
       {
-        isLoading: u,
-        itemsCount: S ? 1 : 2,
+        isLoading: p,
+        itemsCount: d ? 1 : 2,
         keyPrefix: "sales-camp",
-        children: /* @__PURE__ */ a(
-          Q,
+        children: /* @__PURE__ */ t(
+          oe,
           {
-            icon: h,
+            icon: l,
             title: i,
-            numOfSlides: x,
-            numOfSlidesForMobile: w,
-            showNavigation: $,
-            children: D
+            numOfSlides: T,
+            numOfSlidesForMobile: k,
+            showNavigation: I,
+            children: L
           }
         )
       }
@@ -781,5 +844,5 @@ const De = ie(K), Ue = P(
   }
 );
 export {
-  Ue as default
+  Je as default
 };