@lanaco/lnc-react-ui/dist/SalesCampaignsSection.js

React component library

import { jsx as n, jsxs as s, Fragment as Pe } from "react/jsx-runtime";
import { forwardRef as j, useRef as ve, useEffect as re, Fragment as Le, createElement as Ee, useState as X, Suspense as Ue, memo as Me, useMemo as je } from "react";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { b as ne, l as ee, m as Oe, z as Re, A as Be, B as me } from "./utils-BUdHa0nB.js";
import { d as T, o as Ve } from "./breakpoints-BubDitvo.js";
import we from "./Icon.js";
import { D as pe } from "./ShopAvatar-4-fCYGEc.js";
import We from "./Badge.js";
import { u as Se } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { N as Ae } from "./NoListingsPhoto-J1mA9RE3.js";
import fe from "./IconButton.js";
import { u as ye } from "./useDetectMobile-B0Jog4jQ.js";
import { I as Fe } from "./index-DMmw5Ad5.js";
import { m as qe } from "./motion-Ckekul_K.js";
import { S as He, c as he, e as ue, d as Ye, a as M, g as Ze, f as Ge } from "./style-NhzYtIA7.js";
const Je = w.a`
  text-decoration: none;
  color: var(--gray-950);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.25rem;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  ${(r) => r != null && r.sponsored ? `
        border: 1px solid transparent;
        background: 
          linear-gradient(#ffffff, #ffffff) padding-box,
          linear-gradient(to bottom, #fcd34d, #fef3c7) border-box;
      ` : `
        border: 1px solid var(--gray-200, #e4e9f0);
        background: #ffffff;
      `}

  &.horizontal-campaign-item {
    flex-direction: row;

    & img {
      max-width: 13.75rem;
      max-height: 13.75rem;
    }
  }

  @media ${T("S")} {
    width: 100%;
    gap: 0;

    &.horizontal-campaign-item {
      flex-direction: column;

      & img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
`, Ke = w.div`
  border-radius: ${(r) => ne(r.theme, "edged")};
  cursor: pointer;

  position: relative;
  overflow: hidden;

  & img {
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
    object-fit: cover;

    transform: scale(1.1);
    transition: var(--transition, all 0.3s ease);
    &:hover {
      transform: scale(1.25);
    }
  }

  @media ${T("S")} {
    width: 14.5rem;
  }
`, Qe = w.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gray-950, #14161a);
  font-weight: 400;
  font-size: 0.875rem;

  & .campaign-title {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    color: var(--teal-500, #009ea8);
  }

  & .campaign-title-text {
    font-weight: 600;
    font-size: 1.375rem;
    leading-trim: none;
    line-height: 1.75rem;
  }

  & .text-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  & .title-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding-top: 0.5rem;
  }

  & .timestamp-text {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.01563rem;
    gap: 0.25rem;
    padding-top: 0.75rem;
    color: var(--gray-700, #4e555f);

    & .listings-text {
      color: var(--gray-700, #4e555f);
    }

    & .duration-text {
      color: var(--gray-700, #4e555f);

      &.urgent {
        color: var(--primary-500, #f59e0b);
      }

      &.starts-in {
        color: var(--teal-500, #009ea8);
      }
    }

    & .countdown-timer {
      color: var(--primary-500, #f59e0b);
    }
  }

  & .profile-item:hover {
    background-color: transparent;
  }

  & .campaign-date {
    font-weight: 400;
    font-size: 0.875rem;
    leading-trim: none;
    line-height: 1.25rem;
    color: var(--gray-600, #676e79);
  }

  @media ${T("S")} {
    padding: 1rem 0 0 0;

    & .campaign-title-text {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.5rem;
    }

    & .campaign-date {
      display: none;
    }

    & .timestamp-text {
      line-height: 1rem;
      padding-top: 0.5rem;
    }

    & .text-block-wrapper {
      gap: 0.25rem;
    }
    & .text-block-wrapper {
      gap: 0.25rem;
    }
  }
`, xe = (r = !1, t = !1, o = !1) => `
    display: flex;
    ${t ? "flex-wrap: wrap;" : ""}
    ${t ? "" : "flex-wrap: nowrap;"}
    ${r ? "align-items: center;" : ""}
    ${o ? "justify-content: center;" : ""}
  `, Xe = w.a`
  text-decoration: none;
  color: var(--gray-950);
  ${(r) => r.hasPermission === !0 && "cursor: pointer"};

  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }

  & .icon,
  .name {
    text-decoration: none;
  }

  ${xe(!0)}
  gap: 0.5rem;
  color: var(--gray-950, #14161a);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: ${(r) => ne(r.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 {
    ${xe(!0, !1, !0)}
    flex-shrink: 0;
    border-radius: 999px;

    & img,
    .img-placeholder {
      border-radius: 999px;
      object-fit: cover;
      height: 2.25rem;
      width: 2.25rem;
      background-color: var(--gray-200, #dddfe4);
    }

    & .no-image {
      background: white;
    }
  }

  & .name {
    flex-grow: 15;
    font-size: 1.055rem;
  }

  & .notifications-number .badge {
    font-size: 0.75rem;
  }

  & .badge {
    max-height: 1.25rem;
    min-height: 1.25rem;
    padding: 0.375rem;
    line-height: 1rem;
  }

  &:hover {
    cursor: pointer;
    background-color: var(--gray-95080, #14161acc);
  }

  @media ${T("S")} {
    padding: 0;
    font-size: 0.875rem;
  }
`, er = w.div`
  position: absolute;
  top: 0.5rem;
  ${(r) => r.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
  display: flex;
  gap: 0.25rem;
`, rr = w.div`
  border-radius: ${(r) => ne(r.theme, r.borderRadius || "slight")};
  background-color: ${(r) => r == null ? void 0 : r.color};
  color: white;
  height: 1.5rem;
  min-width: 1.5rem;
  width: ${(r) => r.fitContent === !0 ? "fit-content" : "1.5rem"};
  ${(r) => r.fitContent === !0 && "padding: 0 0.1rem;"};
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(r) => r.padding};
  & i {
    font-size: 0.813rem;
  }
`, nr = j(({ src: r, ...t }, o) => {
  const a = ve();
  return re(() => {
    var m;
    const i = (p) => {
      p.target.src = pe, p.onerror = null;
    };
    return (m = a == null ? void 0 : a.current) == null || m.addEventListener("error", i), () => {
      var p;
      (p = a == null ? void 0 : a.current) == null || p.removeEventListener("error", i);
    };
  }, []), /* @__PURE__ */ n(Le, { ref: o, children: ee(r) ? /* @__PURE__ */ n("img", { ref: a, src: r, ...t }) : /* @__PURE__ */ n("img", { src: pe, ...t }) });
}), tr = (r) => {
  const {
    uuid: t,
    hasPermission: o = !0,
    isUser: a,
    image: i,
    imageComponent: m,
    name: p,
    notifications: S = 0,
    color: l = "primary",
    size: h = "large",
    style: c,
    disabled: _,
    onClick: g = () => {
    },
    isActive: N,
    className: b,
    shopCategory: v,
    // new
    themeData: y,
    LinkComponent: C
  } = r, I = C || "a", u = {
    theme: Se(),
    color: l,
    size: h,
    style: c,
    disabled: _
  };
  return /* @__PURE__ */ Ee(
    Xe,
    {
      onClick: (f) => {
        f.stopPropagation(), o === !0 && (g == null || g());
      },
      ...u,
      key: p,
      className: `profile-item ${b}`,
      hasPermission: o,
      isActive: N,
      themeColor: (y == null ? void 0 : y.code) || "transparent",
      as: I,
      ...C ? { to: `/${a ? "user" : "shop"}/${t}` } : { href: `/${a ? "user" : "shop"}/${t}` }
    },
    /* @__PURE__ */ n("div", { className: "logo-wrapper", children: Oe(m) ? m : i }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ n("div", { className: "name", children: p }),
      !a && /* @__PURE__ */ n("div", { className: "description", children: v }),
      S > 0 && /* @__PURE__ */ n("div", { className: "notifications-number", children: /* @__PURE__ */ n(We, { className: "badge", color: "danger", size: "small", children: S > 99 ? "99+" : S }) })
    ] })
  );
}, be = (r) => {
  if (r !== void 0) {
    const t = new Date(r), o = t.getFullYear(), a = t.getMonth() + 1;
    return `${String(t.getDate()).padStart(2)}. ${a}. ${o}.`;
  }
}, ar = j((r, t) => {
  var ge;
  const o = Se(), {
    uuid: a,
    shopUuid: i,
    title: m = "",
    // description,
    // badges,
    coverPhoto: p,
    onSelect: S,
    // status,
    startDate: l,
    endDate: h,
    salesPackages: c,
    shopName: _,
    shopCategory: g,
    shopImage: N,
    shopImageComponent: b,
    className: v,
    onSelectCard: y = () => {
    },
    onSelectShop: C = () => {
    },
    upcoming: I = !1,
    upcomingCampaignText: d,
    campaignSingleText: u,
    salesCampaignTypes: f = [],
    startsInPrefixTextPlural: F,
    startsinSuffixTextPlural: q,
    startsInPrefixTextSingular: O,
    startsinSuffixTextSingular: H,
    endsInPrefixTextPlural: te,
    endsinSuffixTextPlural: ae,
    endsInPrefixTextSingular: Y,
    endsinSuffixTextSingular: oe,
    endedText: Z,
    themeData: se,
    numberOfListings: z,
    numberOfListingsTextSingular: G,
    numberOfListingsTextPlural: R,
    metadata: e,
    LinkComponent: L,
    sponsored: ie,
    ...J
  } = r, $e = L || "a", le = ve(), E = Re(l, h), B = E !== -1 && (E == null ? void 0 : E.isEnded) === !0, V = E !== -1 && !B, U = Be(l), ce = me(h), de = ce ? new Date(ce) : null, _e = /* @__PURE__ */ new Date(), K = de ? de.getTime() - _e.getTime() : null, W = K !== null && K > 0 && K < 24 * 60 * 60 * 1e3, Ce = (x, P, k, $, D) => k === 1 ? `${x} ${k} ${$}` : `${P} ${k} ${D}`, ke = () => {
    if (!h) return null;
    const x = me(h), P = x ? new Date(x) : null;
    if (!P) return null;
    const k = Ne, $ = P.getTime() - k.getTime();
    if ($ <= 0) return null;
    const D = Math.floor($ / (1e3 * 60 * 60)), De = Math.floor($ % (1e3 * 60 * 60) / (1e3 * 60)), Te = Math.floor($ % (1e3 * 60) / 1e3);
    return { hours: D, minutes: De, seconds: Te };
  }, [Ne, Ie] = X(/* @__PURE__ */ new Date());
  re(() => {
    if (!W) return;
    const x = setInterval(() => {
      Ie(/* @__PURE__ */ new Date());
    }, 1e3);
    return () => clearInterval(x);
  }, [W]);
  const A = W ? ke() : null, Q = !!(V && !B && W && A), ze = Q || B || !V && U !== null && U > 0;
  return /* @__PURE__ */ s(
    Je,
    {
      ref: le,
      theme: o,
      className: v,
      name: e == null ? void 0 : e.name,
      "data-accessor": e == null ? void 0 : e.accessor,
      onClick: (x) => y(x, le),
      as: $e,
      ...L ? { to: `/shops/${i}/campaign/${a}` } : { href: `/shops/${i}/campaign/${a}` },
      sponsored: ie,
      ...J,
      children: [
        /* @__PURE__ */ s(Ke, { theme: o, children: [
          /* @__PURE__ */ n("img", { src: p || Ae }),
          /* @__PURE__ */ n(er, { children: c == null ? void 0 : c.map((x, P) => {
            var k, $;
            return /* @__PURE__ */ n(
              rr,
              {
                color: (k = f == null ? void 0 : f.find((D) => D.value === x)) == null ? void 0 : k.color,
                theme: o,
                children: /* @__PURE__ */ n(
                  we,
                  {
                    icon: ($ = f == null ? void 0 : f.find((D) => D.value === x)) == null ? void 0 : $.icon
                  }
                )
              },
              `package__${P}`
            );
          }) })
        ] }),
        /* @__PURE__ */ s(Qe, { theme: o, children: [
          /* @__PURE__ */ n("div", { className: "text-block-wrapper", children: /* @__PURE__ */ s("div", { className: "title-block-wrapper", children: [
            /* @__PURE__ */ n("div", { className: "campaign-title", children: (ge = I ? d : u) == null ? void 0 : ge.toUpperCase() }),
            /* @__PURE__ */ n("div", { className: "campaign-title-text", children: m }),
            h && l && /* @__PURE__ */ s("div", { className: "campaign-date", children: [
              be(l),
              " - ",
              be(h)
            ] }),
            /* @__PURE__ */ s("div", { className: "timestamp-text", children: [
              z > 0 && /* @__PURE__ */ s("span", { className: "listings-text", children: [
                z,
                " ",
                z === 1 ? G : R,
                ze ? " ∙ " : ""
              ] }),
              /* @__PURE__ */ n(
                "span",
                {
                  className: `duration-text ${Q ? "urgent" : ""} ${V ? "" : "starts-in"}`,
                  children: Q ? /* @__PURE__ */ s("div", { className: "countdown-timer", children: [
                    Y,
                    " ",
                    A.hours.toString().padStart(2, "0"),
                    ":",
                    A.minutes.toString().padStart(2, "0"),
                    ":",
                    A.seconds.toString().padStart(2, "0")
                  ] }) : B ? Z || "Završena" : !V && U !== null && U > 0 ? Ce(
                    O,
                    F,
                    U,
                    H,
                    q
                  ) : null
                }
              )
            ] })
          ] }) }),
          /* @__PURE__ */ n(
            tr,
            {
              hasPermission: !0,
              image: /* @__PURE__ */ n(nr, { src: N }),
              imageComponent: b,
              themeData: se,
              isActive: !0,
              isUser: !1,
              name: _,
              shopCategory: g,
              uuid: i,
              onClick: () => C(i),
              LinkComponent: L
            }
          )
        ] })
      ]
    }
  );
}), or = w.div`
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
  position: relative;

  & .scrollable-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    & .scrollable-section__title {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      & .title__text {
        color: var(--gray-950, #14161a);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
      }
    }
  }

  & .scrollable-section__navigation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: absolute;
    top: 0;
    right: 0;
  }

  &.itemless {
    & .scrollable-section__content {
      &:has(.campaign-item:nth-child(3):last-child) {
        & .campaign-item {
          &:last-child {
            grid-column: span 2;
          }
        }
      }
    }
  }

  @media ${T("S")} {
    gap: 1.25rem;

    & .scrollable-section__header {
      & .scrollable-section__title {
        & .title__text {
          font-size: 1.375rem;
          line-height: 1.75rem;
        }
      }
    }
  }
`, sr = w(qe.div)`
  display: grid;
  grid-template-columns: repeat(${(r) => r == null ? void 0 : r.numOfColumns}, 1fr);
  gap: 1.5rem;
  width: 100%;

  @media ${Ve("M")} {
    grid-template-columns: repeat(${(r) => (r == null ? void 0 : r.tabletNumOfColumns) ?? 2}, 1fr);
  }

  @media ${T("S")} {
    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 */
    }
  }
`, ir = j(
  ({
    icon: r,
    title: t,
    numOfSlides: o = 4,
    tabletNumOfSlides: a,
    showNavigation: i = !0,
    hasNextPage: m = !1,
    className: p = "",
    handleFetchNextPage: S = () => {
    },
    children: l
  }, h) => {
    const [c, _] = X(0), [g, N] = X(1), b = ye(), v = (l == null ? void 0 : l.length) ?? 1;
    re(() => {
      const d = () => {
        N(o);
      };
      return window.addEventListener("resize", d), d(), () => window.removeEventListener("resize", d);
    }, []);
    const y = b ? l : l == null ? void 0 : l.slice(c, c + g), C = (d) => {
      var f;
      (f = d == null ? void 0 : d.target) == null || f.blur();
      const u = c + g;
      u < v && _(u), u + g >= v && m && S();
    }, I = (d) => {
      var u;
      (u = d == null ? void 0 : d.target) == null || u.blur(), c - g >= 0 && _(c - g);
    };
    return /* @__PURE__ */ s(or, { ref: h, className: p, children: [
      /* @__PURE__ */ n("div", { className: "scrollable-section__header", children: /* @__PURE__ */ s("div", { className: "scrollable-section__title", children: [
        ee(r) && /* @__PURE__ */ n(
          we,
          {
            icon: r,
            color: "primary",
            sizeInUnits: "1.5rem",
            className: "title__icon"
          }
        ),
        ee(t) && /* @__PURE__ */ s("div", { className: "title__text", children: [
          " ",
          t
        ] })
      ] }) }),
      /* @__PURE__ */ s(
        sr,
        {
          numOfColumns: o,
          tabletNumOfColumns: a,
          ...!b && {
            animate: {
              x: 0,
              opacity: 1
            },
            initial: {
              x: 10,
              opacity: 0
            }
          },
          className: "scrollable-section__content",
          children: [
            y,
            b && m && /* @__PURE__ */ n(Fe, { onIsVisible: S })
          ]
        },
        `scrollable-section__content-${c}`
      ),
      i && v > g && !b && /* @__PURE__ */ s("div", { className: "scrollable-section__navigation", children: [
        /* @__PURE__ */ n(
          fe,
          {
            icon: "angle-left",
            borderRadius: "curved",
            btnType: "tinted",
            color: "neutral",
            className: "navigation__arrow",
            disabled: c === 0,
            onClick: I
          }
        ),
        /* @__PURE__ */ n(
          fe,
          {
            icon: "angle-right",
            borderRadius: "curved",
            btnType: "tinted",
            color: "neutral",
            className: "navigation__arrow",
            disabled: c + g >= v,
            onClick: C
          }
        )
      ] })
    ] });
  }
), lr = w.div`
  display: flex;
  flex: 1;
  width: 100%;
  max-height: ${(r) => r == null ? void 0 : r.maxHeight};
  border-radius: 1.25rem;

  &:hover {
    cursor: pointer;
  }

  & img {
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    object-fit: cover;
  }
`, cr = j(
  ({
    sectionName: r,
    imageUrl: t,
    maxHeight: o = "16.25rem",
    className: a = "",
    handleClick: i = () => {
    }
  }, m) => /* @__PURE__ */ n(
    lr,
    {
      ref: m,
      maxHeight: o,
      onClick: i,
      className: `itemless-banner ${a}`,
      children: /* @__PURE__ */ n("img", { src: t, alt: `itemless-banner__${r}` })
    }
  )
), dr = w(He)`
  @media ${T("S")} {
    flex-direction: column;

    & .skeleton__square {
      width: 100%;
      height: 100%;
    }

    & > div {
      &:not(:first-of-type) {
        display: none;
      }
    }
  }
`, gr = ({ keyPrefix: r }) => /* @__PURE__ */ n(dr, { children: [1, 2, 3, 4].map((t) => /* @__PURE__ */ n(he, { children: /* @__PURE__ */ s(ue, { gap: "0.5rem", children: [
  /* @__PURE__ */ n(Ye, { size: "13.75rem", className: "skeleton__square" }),
  /* @__PURE__ */ n(M, { width: "5rem", height: "1rem" }),
  /* @__PURE__ */ n(M, { width: "100%", height: "2rem" }),
  /* @__PURE__ */ n(M, { width: "5rem", height: "0.5rem" }),
  /* @__PURE__ */ n(Ze, {}),
  /* @__PURE__ */ s(he, { gap: "0.5rem", alignItems: "center", children: [
    /* @__PURE__ */ n(Ge, { size: "3rem", className: "skeleton__circle" }),
    /* @__PURE__ */ s(ue, { children: [
      /* @__PURE__ */ n(M, { width: "5rem", height: "1rem" }),
      /* @__PURE__ */ n(M, { width: "3rem", height: "1rem" })
    ] })
  ] })
] }) }, `${r}-${t}`)) }), mr = ({
  keyPrefix: r,
  isLoading: t = !1,
  fallbackComponent: o = /* @__PURE__ */ n(Pe, {}),
  children: a
}) => /* @__PURE__ */ n(Ue, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ n(gr, { keyPrefix: r }) : a }), pr = Me(ar), zr = j(
  ({
    sellerType: r = "Shop",
    items: t = [],
    title: o,
    icon: a,
    isLoading: i,
    onSelectCard: m = () => {
    },
    onSelectShop: p = () => {
    },
    getImage: S = () => {
    },
    campaignSingleText: l,
    upcomingCampaignText: h,
    salesCampaignTypes: c = [],
    startsInPrefixTextPlural: _,
    startsinSuffixTextPlural: g,
    startsInPrefixTextSingular: N,
    startsinSuffixTextSingular: b,
    endsInPrefixTextPlural: v,
    endsinSuffixTextPlural: y,
    endsInPrefixTextSingular: C,
    endsinSuffixTextSingular: I,
    endedText: d,
    numOfSlides: u = 4,
    showNavigation: f = !0,
    numberOfListingsTextSingular: F,
    numberOfListingsTextPlural: q,
    itemlessImageUrl: O,
    itemlessMaxHeight: H,
    handleItemlessLink: te = () => {
    },
    componentName: ae,
    hasNextPage: Y = !1,
    handleFetchNextPage: oe = () => {
    },
    LinkComponent: Z
  }, se) => {
    const z = ye(), G = je(() => {
      let R = t == null ? void 0 : t.map((e, L) => /* @__PURE__ */ n(
        pr,
        {
          className: `campaign-item ${(t == null ? void 0 : t.length) === 1 ? "horizontal-campaign-item" : ""}`,
          coverPhoto: S(
            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: r,
          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: (ie, J) => m(e == null ? void 0 : e.campaignUuid, e == null ? void 0 : e.shopUuid, J),
          onSelectShop: () => p(e == null ? void 0 : e.shopUuid),
          campaignSingleText: l,
          upcomingCampaignText: h,
          upcoming: e == null ? void 0 : e.upcoming,
          salesCampaignTypes: c,
          startsInPrefixTextPlural: _,
          startsinSuffixTextPlural: g,
          startsInPrefixTextSingular: N,
          startsinSuffixTextSingular: b,
          endsInPrefixTextPlural: v,
          endsinSuffixTextPlural: y,
          endsInPrefixTextSingular: C,
          endsinSuffixTextSingular: I,
          endedText: d,
          themeData: e == null ? void 0 : e.themeData,
          numberOfListings: e == null ? void 0 : e.numberOfListings,
          numberOfListingsTextSingular: F,
          numberOfListingsTextPlural: q,
          metadata: { name: ae, accessor: e == null ? void 0 : e.accessor },
          LinkComponent: Z,
          sponsored: e == null ? void 0 : e.sponsored
        },
        `campaign__item__${L}__${e == null ? void 0 : e.startDate}___${e == null ? void 0 : e.endDate}`
      ));
      return (t == null ? void 0 : t.length) < 4 && !z && O ? [
        ...R,
        /* @__PURE__ */ n(
          cr,
          {
            imageUrl: O,
            className: "campaign-item",
            maxHeight: H,
            handleClick: te
          },
          "itemless-campaign-section-banner"
        )
      ] : R;
    }, [t]);
    return /* @__PURE__ */ n(
      mr,
      {
        isLoading: i,
        keyPrefix: "sales-campaign-skeleton",
        children: /* @__PURE__ */ n(
          ir,
          {
            icon: a,
            title: o,
            numOfSlides: u,
            tabletNumOfSlides: 2,
            showNavigation: f,
            hasNextPage: Y,
            handleFetchNextPage: oe,
            className: `lp-section lp-sales-campaigns-section${(t == null ? void 0 : t.length) < 4 && !z ? " itemless" : ""}`,
            children: G
          },
          `sales-campaign-section__${z}`
        )
      }
    );
  }
);
export {
  zr as default
};