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

React component library

import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
import { createElement as ae, useState as P, useEffect as j, forwardRef as V, useRef as Q, useImperativeHandle as ne, Suspense as se, memo as le, useMemo as ce } from "react";
import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { a as z, l as X, m as ee } from "./utils-DtRLzzTZ.js";
import { M as T } from "./consts-C1uHV4xc.js";
import { m as de } from "./motion-Ckekul_K.js";
import { P as i } from "./index-S5Cd7WrG.js";
import ge from "./Icon.js";
import he from "./Badge.js";
import { u as M } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as re } from "./useDetectMobile-BC6EGaBc.js";
import fe from "./FlexBox.js";
import { I as Y } from "./index-wy-PXQR9.js";
import U from "./IconButton.js";
const me = f.div`
  cursor: pointer;
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid var(--gray-95008, #14161a14);

  @media (max-width: ${T + "px"}) {
    flex-direction: column;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 0;
  }
`, pe = f.div`
  border-radius: ${(e) => z(e.theme, "edged")};
  height: 15rem;
  width: 15rem;
  min-width: 15rem;
  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 (max-width: ${T + "px"}) {
    width: 100%;
    max-width: 100dvh;
    height: 23.438rem;
  }
`, ue = f.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;
    letter-spacing: 0.1rem;
    color: var(--primary-500, #f59e0b);
  }

  & .campaign-title-text {
    font-weight: 600;
    font-size: 1.375rem;
    transition: var(--transition, all 0.3s ease);
    &:hover {
      color: var(--primary-500, #f59e0b);
      font-size: 1.4rem;
    }
  }

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

  & .title-block-wrapper {
    display: flex;
    flex-direction: column;
  }

  & .timestamp-text {
    font-size: 0.875rem;
    font-weight: 400;
    padding-top: 0.25rem;
    color: var(--gray-700, #4e555f);
  }

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

  @media (max-width: ${T + "px"}) {
    padding: 1.25rem;

    & .campaign-title {
      font-size: 0.875rem;
    }

    & .text-block-wrapper {
      gap: 0.25rem;
    }
    & .text-block-wrapper {
      gap: 0.25rem;
    }
  }
`, we = {
  "#ADE3EB": "#76D0DB",
  "#DDD6FE": "#C4B5FD",
  "#FDE68A": "#FCD34D",
  "#A7F3D0": "#6EE7B7",
  "#BADFFF": "#87C6FA",
  "#FECDD3": "#FDA4AF",
  "#EFE2CF": "#EAD2AF",
  "#DDDFE4": "#C4C8CF",
  "#E7E5E4": "#D6D3D1",
  "#FED7AA": "#FDBA74",
  default: "#C4C8CF"
}, q = (e = !1, o = !1, l = !1) => `
    display: flex;
    ${o ? "flex-wrap: wrap;" : ""}
    ${o ? "" : "flex-wrap: nowrap;"}
    ${e ? "align-items: center;" : ""}
    ${l ? "justify-content: center;" : ""}
  `, be = f(de.div)`
  text-decoration: none;
  ${(e) => e.hasPermission === !0 && "cursor: pointer"};

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

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

  ${q(!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) => z(e.theme, "slight")};
  transition: all 0.25s ease;

  & .logo-wrapper {
    ${q(!0, !1, !0)}
    flex-shrink: 0;
    border-radius: 999px;
    border: 3px solid
      ${(e) => e.isActive === !1 ? "var(--gray-300, #c4c8cf)" : we[e.themeColor] ?? "var(--gray-300, #c4c8cf)"};

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

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

  &.user-profile-item {
    & .logo-wrapper {
      border: 3px solid transparent;
    }
  }

  & .name {
    flex-grow: 15;
  }

  & .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);
    color: var(--gray-600, #676e79);
  }
`, xe = f.div`
  position: absolute;
  top: 0.5rem;
  ${(e) => e.alignToLeft === !0 ? "left: 0.5rem;" : "right: 0.5rem;"}
  display: flex;
  gap: 0.25rem;
`, ve = (e) => `var(--${e}-700)`, ye = f.div`
  border-radius: ${(e) => z(e.theme, e.borderRadius || "slight")};
  background-color: ${(e) => ve(e == null ? void 0 : e.color)};
  color: white;
  height: 1.5rem;
  min-width: 1.5rem;
  width: ${(e) => e.fitContent === !0 ? "fit-content" : "1.5rem"};
  ${(e) => e.fitContent === !0 && "padding: 0 0.1rem;"};
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(e) => e.padding};
  & i {
    font-size: 0.813rem;
  }
`, te = (e) => {
  const {
    uuid: o,
    hasPermission: l = !0,
    isUser: a,
    image: u,
    name: n,
    notifications: c = 0,
    color: w = "primary",
    size: b = "large",
    style: D,
    disabled: s,
    onSelect: d = () => {
    },
    isActive: v,
    className: x,
    // new
    themeData: m
  } = e, C = {
    theme: M(),
    color: w,
    size: b,
    style: D,
    disabled: s
  };
  return /* @__PURE__ */ ae(
    be,
    {
      onClick: (r) => {
        r.stopPropagation(), l === !0 && (d == null || d());
      },
      ...C,
      key: n,
      animate: {
        y: 0,
        opacity: 1
      },
      className: `profile-item ${x}`,
      exit: {
        opacity: 0
      },
      hasPermission: l,
      initial: {
        y: -10,
        opacity: 0
      },
      isActive: v,
      themeColor: (m == null ? void 0 : m.code) || "transparent"
    },
    /* @__PURE__ */ t("div", { className: "logo-wrapper", children: u }),
    /* @__PURE__ */ t("div", { className: "name", children: n }),
    c > 0 && /* @__PURE__ */ t("div", { className: "notifications-number", children: /* @__PURE__ */ t(he, { className: "badge", color: "danger", size: "small", children: c > 99 ? "99+" : c }) })
  );
};
te.propTypes = {
  id: i.any,
  isUserProfile: i.bool,
  themeColor: i.string,
  image: i.any,
  name: i.string,
  notifications: i.number,
  style: i.object,
  className: i.string,
  color: i.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral"
  ]),
  size: i.oneOf(["large"]),
  onSelect: i.func,
  hasPermission: i.bool
};
const J = (e, o) => {
  if (!e || !o) return null;
  let l = Math.floor((e == null ? void 0 : e.getTime()) - (o == null ? void 0 : o.getTime())), a = 1e3 * 60 * 60 * 24;
  return Math.ceil(l / a);
}, oe = (e) => {
  const o = M(), {
    uuid: l,
    shopUuid: a,
    title: u = "",
    description: n,
    badges: c,
    coverPhoto: w,
    onSelect: b,
    status: D,
    startDate: s,
    endDate: d,
    salesPackages: v,
    shopName: x,
    shopImage: m,
    onSelectCard: g = () => {
    },
    onSelectShop: C = () => {
    },
    campaignSingleText: r,
    salesCampaignTypes: $ = [],
    startsInPrefixTextPlural: S,
    startsinSuffixTextPlural: B,
    startsInPrefixTextSingular: N,
    startsinSuffixTextSingular: R,
    themeData: H,
    ...W
  } = e, h = s ? new Date(s) <= /* @__PURE__ */ new Date() : !1;
  J(
    d ? new Date(d) : null,
    s ? new Date(s) : null
  );
  const y = J(
    s ? new Date(s) : null,
    /* @__PURE__ */ new Date()
  );
  return /* @__PURE__ */ p(
    me,
    {
      theme: o,
      onClick: g,
      ...W,
      children: [
        /* @__PURE__ */ p(pe, { theme: o, onClick: () => b == null ? void 0 : b(), children: [
          /* @__PURE__ */ t("img", { src: w }),
          /* @__PURE__ */ t(xe, { children: v == null ? void 0 : v.map((I, A) => {
            var E, L;
            return /* @__PURE__ */ t(
              ye,
              {
                color: (E = $ == null ? void 0 : $.find((_) => _.value === I)) == null ? void 0 : E.color,
                theme: o,
                children: /* @__PURE__ */ t(
                  ge,
                  {
                    icon: (L = $ == null ? void 0 : $.find((_) => _.value === I)) == null ? void 0 : L.icon
                  }
                )
              },
              `package__${A}`
            );
          }) })
        ] }),
        /* @__PURE__ */ p(ue, { theme: o, children: [
          /* @__PURE__ */ p("div", { className: "text-block-wrapper", children: [
            /* @__PURE__ */ p("div", { className: "title-block-wrapper", children: [
              /* @__PURE__ */ t("div", { className: "campaign-title", children: r }),
              /* @__PURE__ */ t("div", { className: "campaign-title-text", children: u }),
              /* @__PURE__ */ t("div", { className: "timestamp-text", children: h ? "" : y === 1 ? `${N} ${y} ${R}` : `${S} ${y} ${B}` })
            ] }),
            /* @__PURE__ */ t("div", { children: n })
          ] }),
          /* @__PURE__ */ t(
            te,
            {
              hasPermission: !0,
              image: (
                // <ShopFallbackImage
                //   image={shopImage}
                //   uuid={shopUuid}
                //   size={ImageSize.SMALL}
                //   className={`${shopImage ? "" : "no-image"}`}
                // />
                /* @__PURE__ */ t(
                  "img",
                  {
                    src: m,
                    className: `${m ? "" : "no-image"}`
                  }
                )
              ),
              themeData: H,
              isActive: !0,
              isUser: !1,
              name: x,
              onClick: () => C(a)
            }
          )
        ] })
      ]
    }
  );
};
oe.propTypes = {
  title: i.oneOfType([i.string, i.element]),
  numberOfListings: i.number,
  dropdown: i.any,
  color: i.string
};
const $e = f.div`
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;

  & .hover-left-arrow {
    display: none;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
  }

  & .hover-right-arrow {
    display: none;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    z-index: ${(e) => X(e.arrowsZIndex) ? e.arrowsZIndex : 20};
  }

  & .clip-loader-wrapper {
    margin: auto;
    padding: 0 1rem;
  }

  @media (max-width: ${T + "px"}) {
    gap: 1.25rem;
    & .hover-left-arrow,
    .hover-right-arrow {
      display: flex;
    }
  }
`, De = f.div`
  display: flex;
  align-items: center;

  justify-content: space-between;
  gap: 1rem;

  font-weight: 600;
  font-size: 1.5rem;

  & .btns-group {
    display: flex;
    gap: 0.375rem;
  }

  @media (max-width: ${T + "px"}) {
    padding: 0 1rem;
    & .btns-group {
      display: none;
    }
  }
`, ke = f.div`
  position: relative;
  padding: ${(e) => e.padding};

  & button {
    white-space: nowrap;
  }

  & .badge-button {
    ${(e) => e.showTimesBtn === !0 && "padding-left: 0.5rem; padding-right: 0.5rem;"}
  }

  & .gradient {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 4;
    transition: ${"0.3s"};
    right: ${(e) => e.noArrows !== !0 ? "6rem" : "0"};
    width: 2rem;
    background: #fff;
    height: 100%;
    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
    mask-image: linear-gradient(to left, black 10%, transparent 50%);
  }

  & .scrollable-container {
    scroll-behavior: smooth;
    overflow: hidden;
    -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 */
    }
  }
  & .scroll-arrow-right,
  & .scroll-arrow-left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    visibility: ${(e) => e.arrowsVisibleOnHover === !1 && e.hasOverflow ? "visible" : "hidden"};
    z-index: 4;
    transition: ${"0.3s"};
  }
  & .scroll-arrow-right {
    ${(e) => e.rightAlignArrows === !0 ? "right: 0" : "right: 0.7rem"};
  }
  & .scroll-arrow-left {
    ${(e) => e.rightAlignArrows === !0 ? "right: 2.625rem" : "left: 0.7rem"};
  }
  & .scrollable-container:hover > .scroll-arrow-left,
  & .scrollable-container:hover > .scroll-arrow-right {
    visibility: ${(e) => e.hasOverflow ? "visible" : "hidden"};
  }

  @media (max-width: ${T + "px"}) {
    & .scroll-arrow-left,
    & .scroll-arrow-right {
      display: none;
    }

    & .gradient {
      right: 0;
    }
  }
`, Ce = (e, o) => {
  const [l, a] = P({
    trigger: null,
    direction: null
  }), u = (n) => n.touches || n.originalEvent.touches;
  return j(() => {
    const n = typeof e == "string" || e instanceof String ? document.getElementById(e) : e.current;
    let c = null, w = null;
    if (n) {
      const b = (s) => {
        const d = u(s)[0];
        c = d.clientX, w = d.clientY;
      }, D = (s) => {
        if (!c || !w)
          return;
        const d = s.touches[0].clientX, v = s.touches[0].clientY, x = c - d, m = w - v;
        Math.abs(x) > Math.abs(m) ? x > 0 ? a((g) => ({
          trigger: !g.trigger,
          direction: F.LEFT
        })) : a((g) => ({
          trigger: !g.trigger,
          direction: F.RIGHT
        })) : m > 0 ? a((g) => ({
          trigger: !g.trigger,
          direction: F.UP
        })) : a((g) => ({
          trigger: !g.trigger,
          direction: F.DOWN
        })), c = null, w = null;
      };
      return n.addEventListener("touchstart", b), n.addEventListener("touchmove", D), () => {
        n.removeEventListener("touchstart", b), n.addEventListener("touchmove", D);
      };
    }
  }, []), l;
}, F = {
  UP: "up",
  DOWN: "down",
  RIGHT: "right",
  LEFT: "left"
}, ie = V(
  ({
    title: e,
    columnGap: o = "2rem",
    rowGap: l = "1.25rem",
    scrollBySize: a = 300,
    wrapForMobile: u = !1,
    wrap: n = !1,
    children: c,
    methodsRef: w,
    arrowsVisibleOnHover: b = !0,
    rightAlignArrows: D = !1,
    padding: s = "0",
    showTimesBtn: d,
    noArrows: v,
    onShowEnd: x,
    arrowsZIndex: m,
    ...g
  }, C) => {
    const r = re(), $ = M(), [S, B] = P(!1), [N, R] = P(!1), [H, W] = P(!0), h = Q(), y = Ce(h);
    j(() => {
      (y == null ? void 0 : y.direction) === F.RIGHT && N !== !0 ? A() : (y == null ? void 0 : y.direction) === F.LEFT && S !== !0 && I();
    }, [y]);
    const I = () => {
      var k;
      (k = h.current) == null || k.scrollBy(a, 0);
    }, A = () => {
      var k;
      (k = h.current) == null || k.scrollBy(-a, 0);
    }, [E, L] = P(!1);
    j(() => {
      var k, Z;
      L(
        ((k = h == null ? void 0 : h.current) == null ? void 0 : k.scrollWidth) > ((Z = h == null ? void 0 : h.current) == null ? void 0 : Z.clientWidth)
      );
    }, [c]), ne(w, () => ({
      scrollToEnd() {
        _();
      },
      scrollLeft() {
        A();
      },
      scrollRight() {
        I();
      }
    }));
    const _ = () => {
      h.current.scrollLeft = h.current.scrollWidth;
    };
    return /* @__PURE__ */ p($e, { arrowsZIndex: m, children: [
      /* @__PURE__ */ p(De, { children: [
        /* @__PURE__ */ t("div", { children: e }),
        /* @__PURE__ */ p("div", { className: "btns-group", children: [
          /* @__PURE__ */ t(
            U,
            {
              borderRadius: "curved",
              btnType: "tinted",
              className: "scroll-arrow-left",
              color: "neutral",
              disabled: N,
              icon: "angle-left",
              onClick: A
            }
          ),
          /* @__PURE__ */ t(
            U,
            {
              borderRadius: "curved",
              btnType: "tinted",
              className: "scroll-arrow-right",
              color: "neutral",
              disabled: S,
              icon: "angle-right",
              onClick: I
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ t(
        U,
        {
          borderRadius: "curved",
          btnType: "tinted",
          className: "hover-left-arrow scroll-arrow-left",
          color: "neutral",
          disabled: N,
          icon: "angle-left",
          onClick: A
        }
      ),
      /* @__PURE__ */ t(
        U,
        {
          borderRadius: "curved",
          btnType: "tinted",
          className: "hover-right-arrow scroll-arrow-right",
          color: "neutral",
          disabled: S,
          icon: "angle-right",
          onClick: I
        }
      ),
      /* @__PURE__ */ t(
        ke,
        {
          ref: C,
          arrowsVisibleOnHover: b,
          hasOverflow: E,
          noArrows: v,
          padding: s,
          rightAlignArrows: D,
          showTimesBtn: d,
          theme: $,
          ...g,
          children: /* @__PURE__ */ p(
            fe,
            {
              ref: h,
              className: "scrollable-container",
              columnGap: o,
              rowGap: l,
              wrap: n || u && r ? "Wrap" : "NoWrap",
              children: [
                /* @__PURE__ */ t(
                  Y,
                  {
                    isHorizontal: !0,
                    onIsNotVisible: () => {
                      N === !0 && R(!1);
                    },
                    onIsVisible: () => {
                      N === !1 && R(!0);
                    }
                  }
                ),
                c,
                /* @__PURE__ */ t(
                  Y,
                  {
                    isHorizontal: !0,
                    onIsNotVisible: () => {
                      S === !0 && B(!1), W(!0);
                    },
                    onIsVisible: () => {
                      S === !1 && B(!0), W(!1), x == null || x();
                    }
                  }
                ),
                H && E && /* @__PURE__ */ t("div", { className: "gradient" })
              ]
            }
          )
        }
      )
    ] });
  }
);
ie.propTypes = {
  title: i.string,
  rowGap: i.string,
  columnGap: i.string,
  scrollBySize: i.number,
  wrapForMobile: i.bool,
  wrap: i.bool,
  methodsRef: i.any,
  arrowsVisibleOnHover: i.bool,
  rightAlignArrows: i.bool,
  padding: i.string
};
const Se = f.div`
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & .arrow-icon {
    & i {
      transition: all 0.25s ease;
      transform: ${(e) => e.expanded === !0 ? "rotate(-180deg)" : "rotate(0)"};
    }
  }

  & .badge-button {
    white-space: nowrap;
    font-weight: 500;
  }

  & .campaign-item {
    min-width: calc(50% - 0.87rem);
    width: calc(50% - 0.87rem);
    margin-right: 1.25rem;
  }

  @media (max-width: ${T + "px"}) {
    & .campaign-item {
      min-width: 100%;
      width: 100%;
      margin-right: 0;
    }
  }
`, O = f.div`
  width: ${(e) => e.width || "100%"};
  height: ${(e) => (e.heightCoeff || 1) * 1.125}rem;
  background-color: var(--gray-200, #dddfe4);

  ${ee("-90deg")}
`, Ne = f.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%"};
`, K = f.div`
  border-radius: ${(e) => z(e.theme, (e == null ? void 0 : e.borderRadius) ?? "regular")};
  background: var(--gray-200, #dddfe4);
  position: relative;
  max-height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
  max-width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
  height: ${(e) => (e == null ? void 0 : e.height) ?? "5rem"};
  width: ${(e) => (e == null ? void 0 : e.width) ?? "5rem"};
  flex-shrink: 0;

  ${ee()}
`, Ie = f.div`
  background: var(--white, #fff);
  border-radius:  ${(e) => z(e.theme, "edged")};
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-95012, #14161a1f);

  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  width: 100%;

  & .campaign__left-section {
    position: relative;
  }

  & .campaign__right-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 18rem;
    width: 100%;
  }

  & .campaign__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
`, Te = V(({}, e) => {
  const o = M();
  return /* @__PURE__ */ p(Ie, { ref: e, theme: o, children: [
    /* @__PURE__ */ t("div", { className: "campaign__left-section", children: /* @__PURE__ */ t(
      K,
      {
        theme: o,
        width: "15rem",
        height: "15rem",
        borderRadius: "edged"
      }
    ) }),
    /* @__PURE__ */ p("div", { className: "campaign__right-section", children: [
      /* @__PURE__ */ p(Ne, { theme: o, children: [
        /* @__PURE__ */ t(O, { heightCoeff: 0.75, theme: o, width: "35%" }),
        /* @__PURE__ */ t(O, { heightCoeff: 1.25, theme: o }),
        /* @__PURE__ */ t(O, { heightCoeff: 3, theme: o })
      ] }),
      /* @__PURE__ */ p("div", { className: "campaign__user", children: [
        /* @__PURE__ */ t(
          K,
          {
            theme: o,
            width: "2.5rem",
            height: "2.5rem",
            borderRadius: "curved"
          }
        ),
        /* @__PURE__ */ t(O, { theme: o, width: "75%" })
      ] })
    ] })
  ] });
}), Ae = ({ itemsCount: e = 5, keyPrefix: o }) => /* @__PURE__ */ t(G, { children: Array.from({ length: e }, (l, a) => /* @__PURE__ */ t(
  Te,
  {},
  `${o}-skeleton-campaign-card-${a}`
)) }), Fe = ({
  children: e,
  fallbackComponent: o = /* @__PURE__ */ t(G, {}),
  isLoading: l = !1,
  itemsCount: a = 5,
  keyPrefix: u
}) => /* @__PURE__ */ t(se, { fallback: o, children: l === !0 ? /* @__PURE__ */ t(Ae, { itemsCount: a, keyPrefix: u }) : e }), Ee = le(oe), Ze = V(
  ({
    sellerType: e = "Shop",
    items: o = [],
    title: l,
    isLoading: a,
    onSelectCard: u = () => {
    },
    onSelectShop: n = () => {
    },
    // new
    customScrollSize: c,
    campaignSingleText: w,
    salesCampaignTypes: b = [],
    startsInPrefixTextPlural: D,
    startsinSuffixTextPlural: s,
    startsInPrefixTextSingular: d,
    startsinSuffixTextSingular: v
  }, x) => {
    const m = Q(), g = re(), C = ce(() => o == null ? void 0 : o.map((r, $) => /* @__PURE__ */ t(
      Ee,
      {
        className: "campaign-item",
        coverPhoto: r == null ? void 0 : r.coverPhoto,
        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,
        shopName: r == null ? void 0 : r.shopName,
        shopUuid: r == null ? void 0 : r.shopUuid,
        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: () => n(r == null ? void 0 : r.shopUuid),
        campaignSingleText: w,
        salesCampaignTypes: b,
        startsInPrefixTextPlural: D,
        startsinSuffixTextPlural: s,
        startsInPrefixTextSingular: d,
        startsinSuffixTextSingular: v,
        themeData: r == null ? void 0 : r.themeData
      },
      `campaign__item__${$}__${r == null ? void 0 : r.startDate}___${r == null ? void 0 : r.endDate}`
    )), [o]);
    return /* @__PURE__ */ t(G, { children: (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(Se, { ref: x, className: "row-section-scroll", children: /* @__PURE__ */ t(
      ie,
      {
        arrowsVisibleOnHover: !1,
        columnGap: "0",
        methodsRef: m,
        mobileHoverScrollButtons: !0,
        noArrows: !0,
        padding: "0.25rem 0",
        rightAlignArrows: !0,
        scrollBySize: g ? window.innerWidth : c > 0 ? c : window.innerWidth,
        showTimesBtn: !1,
        title: l,
        onShowEnd: () => {
        },
        arrowsZIndex: 11,
        children: /* @__PURE__ */ t(
          Fe,
          {
            isLoading: a,
            itemsCount: 2,
            keyPrefix: "sales-camp",
            children: C
          }
        )
      }
    ) }) });
  }
);
export {
  Ze as default
};