@ashtuka/react-lib 1.0.40 → 1.0.42

package/dist/modules/HeaderV5Module/HeaderV5Module-B9tK4bOZ.mjs

@@ -0,0 +1,576 @@
+import { jsx as n, jsxs as r, Fragment as $ } from "react/jsx-runtime";
+import * as b from "react";
+import { useState as H, useEffect as V } from "react";
+import { c as M } from "../../chunks/index-BDjvzGbZ.mjs";
+import { a as j, S as E } from "../../chunks/breakpoints-BOwHOeQN.mjs";
+import { u as U } from "../../hooks/useOnScreen-CpqVO1-u.mjs";
+import { g as q } from "../../utils/getAbsUrl-C3tTvhge.mjs";
+import { L as k } from "../../types/Locale-D0KYJGGt.mjs";
+import { L as x, a as X } from "../../chunks/LoadAbleImg-jaQDlIaY.mjs";
+import G from "react-localization";
+import { S as J } from "../../chunks/Service-uGKXRZVE.mjs";
+const Q = "_header__logo_nkota_1", Y = "_header__logo_icon_nkota_8", D = {
+  header__logo: Q,
+  header__logo_icon: Y
+}, O = "https://polis.ua/static/img/logo/logoWithFlagLine.png", ee = ({ lang: e, logoText: t }) => /* @__PURE__ */ n("div", { className: D.header__logo, children: /* @__PURE__ */ r("a", { href: q(e, "https://polis.ua/"), children: [
+  /* @__PURE__ */ n("img", { className: D.header__logo_icon, src: O, alt: "Logo" }),
+  t && /* @__PURE__ */ n("span", { children: t })
+] }) }), ne = (e) => /* @__PURE__ */ b.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M10 8L14 12L10 16", stroke: "#2D2B2B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), te = "_tabList_1lx61_1", ae = "_header__submenu_1lx61_13", se = "_submenu__item_link_1lx61_24", oe = "_withTab_1lx61_40", N = {
+  tabList: te,
+  header__submenu: ae,
+  submenu__item_link: se,
+  withTab: oe
+}, R = ({
+  menuItemList: e,
+  withSubmenu: t = !1,
+  closeMenu: a
+}) => {
+  const i = (s, _) => {
+    s.preventDefault(), a && a(), _ && window.open(_, "_self");
+  };
+  return /* @__PURE__ */ n("ul", { className: M({ [N.tabList]: t, [N.header__submenu]: !t }), children: e.map((s) => /* @__PURE__ */ n("li", { className: N.submenu__item, children: /* @__PURE__ */ r(
+    "a",
+    {
+      className: M(N.submenu__item_link, { [N.withTab]: t }),
+      href: s.navigateTo,
+      onClick: (_) => i(_, s.navigateTo),
+      children: [
+        /* @__PURE__ */ n("img", { src: s.imgAddress, alt: "Icon" }),
+        s.label,
+        s.new && /* @__PURE__ */ n("span", { children: "new" })
+      ]
+    }
+  ) }, s.label)) });
+}, _e = "_list__item_1vua7_1", ie = "_list__item_btn_1vua7_24", re = "_active_1vua7_35", le = "_submenu__container_1vua7_74", ce = "_withTab_1vua7_131", he = "_withBanner_1vua7_138", de = "_submenu_1vua7_74", ue = "_submenu_item_1vua7_157", me = "_submenu_item__title_1vua7_175", L = {
+  list__item: _e,
+  list__item_btn: ie,
+  active: re,
+  submenu__container: le,
+  withTab: ce,
+  withBanner: he,
+  submenu: de,
+  submenu_item: ue,
+  submenu_item__title: me
+}, P = ({
+  title: e,
+  isActive: t,
+  onClick: a,
+  id: i,
+  imgIcon: s,
+  children: _,
+  withSubmenu: d,
+  isHeaderBanner: u
+}) => {
+  const m = () => a(i);
+  return /* @__PURE__ */ r("li", { className: M(L.list__item, { [L.active]: t }), children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        className: M(L.list__item_btn, { [L.active]: t }),
+        type: "button",
+        onClick: m,
+        children: [
+          /* @__PURE__ */ r("span", { children: [
+            s && /* @__PURE__ */ n("img", { src: s, alt: "Icon" }),
+            e
+          ] }),
+          /* @__PURE__ */ n(ne, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: M(L.submenu__container, {
+          [L.withTab]: d,
+          [L.withBanner]: u
+        }),
+        children: _
+      }
+    )
+  ] });
+}, pe = ({ itemList: e, title: t, isActive: a, onClick: i, id: s, imgIcon: _, closeMenu: d }) => /* @__PURE__ */ n(P, { id: s, title: t, isActive: a, onClick: i, imgIcon: _, children: /* @__PURE__ */ n(R, { menuItemList: e, closeMenu: d }) }), be = ({
+  itemList: e,
+  title: t,
+  isActive: a,
+  onClick: i,
+  id: s,
+  imgIcon: _,
+  closeMenu: d,
+  isHeaderBanner: u
+}) => /* @__PURE__ */ n(
+  P,
+  {
+    id: s,
+    title: t,
+    isActive: a,
+    onClick: i,
+    imgIcon: _,
+    withSubmenu: !0,
+    isHeaderBanner: u,
+    children: /* @__PURE__ */ n("ul", { className: L.submenu, children: e.map((m) => /* @__PURE__ */ r("li", { className: L.submenu_item, children: [
+      /* @__PURE__ */ n("p", { className: L.submenu_item__title, children: m.title }),
+      /* @__PURE__ */ n(R, { menuItemList: m.childList, closeMenu: d, withSubmenu: !0 })
+    ] }, m.id)) })
+  }
+), we = "_header__menu_91w0p_1", ge = "_mobile_91w0p_1", fe = "_withBanner_91w0p_10", ve = "_open_91w0p_13", ke = "_menu__list_91w0p_17", Le = "_list__item_91w0p_42", Me = "_list__item_link_91w0p_65", Ce = "_shadow_91w0p_105", C = {
+  header__menu: we,
+  mobile: ge,
+  withBanner: fe,
+  open: ve,
+  menu__list: ke,
+  list__item: Le,
+  list__item_link: Me,
+  shadow: Ce
+}, Be = (e, t, a) => e ? [
+  C.header__menu,
+  C.mobile,
+  a && C.withBanner,
+  t && C.open
+].filter(Boolean).join(" ") : C.header__menu, Z = ({
+  isMenuOpen: e,
+  submenuHandler: t,
+  menuItems: a,
+  isUpBanner: i,
+  activeSubMenu: s,
+  closeMenu: _,
+  isHeaderBanner: d
+}) => {
+  const u = U(E, j), m = () => _ == null ? void 0 : _(), f = (o) => {
+    u && t && t(s === o ? null : o);
+  }, w = (o, c) => {
+    o.preventDefault(), _ && _(), c && window.open(c, "_self");
+  };
+  return /* @__PURE__ */ r("nav", { className: Be(u, e == null ? void 0 : e.linkMenu, !!i), children: [
+    u && /* @__PURE__ */ n("button", { className: C.shadow, type: "button", onClick: m }),
+    /* @__PURE__ */ n("ul", { className: C.menu__list, children: a == null ? void 0 : a.map((o) => {
+      var g, v, h;
+      const c = {
+        id: o.title,
+        title: o.title,
+        isActive: s === o.title,
+        onClick: f,
+        imgIcon: u ? o.imgAddress : void 0,
+        closeMenu: _
+      };
+      return (g = o.childs) != null && g.length && !((v = o == null ? void 0 : o.categoryList) != null && v.length) ? /* @__PURE__ */ n(pe, { ...c, itemList: o.childs }, o.title) : (h = o == null ? void 0 : o.categoryList) != null && h.length ? /* @__PURE__ */ n(
+        be,
+        {
+          ...c,
+          itemList: o.categoryList,
+          isHeaderBanner: d
+        },
+        o.title
+      ) : /* @__PURE__ */ n("li", { className: C.list__item, children: /* @__PURE__ */ r(
+        "a",
+        {
+          className: C.list__item_link,
+          href: o.link,
+          onClick: (p) => w(p, o.link),
+          children: [
+            u && o.imgAddress && /* @__PURE__ */ n("img", { src: o.imgAddress, alt: "Icon" }),
+            o.title
+          ]
+        }
+      ) }, o.title);
+    }) })
+  ] });
+}, He = "_container_4zqie_1", Ne = "_header__banner_4zqie_12", S = {
+  container: He,
+  header__banner: Ne
+}, ye = ({ lang: e, data: t }) => {
+  const a = U(E, j), {
+    linkRu: i,
+    linkUk: s,
+    bannerDeskUk: _,
+    bannerDeskRu: d,
+    bannerMobRu: u,
+    bannerMobUk: m,
+    background: f
+  } = t, w = e === k.UK ? s : i, o = s && i;
+  return /* @__PURE__ */ r($, { children: [
+    o && /* @__PURE__ */ n(
+      "a",
+      {
+        className: S.header__banner,
+        style: { background: f },
+        href: w,
+        rel: "noopener nofollow",
+        target: "_blank",
+        id: "headerBanner",
+        children: /* @__PURE__ */ r("div", { className: S.container, children: [
+          a && /* @__PURE__ */ n(
+            x,
+            {
+              src: e === k.UK ? m : u,
+              width: "365px",
+              height: "40px"
+            }
+          ),
+          !a && /* @__PURE__ */ n(
+            x,
+            {
+              src: e === k.UK ? _ : d,
+              width: "1200px",
+              height: "40px"
+            }
+          )
+        ] })
+      }
+    ),
+    !o && /* @__PURE__ */ n(
+      "div",
+      {
+        className: S.header__banner,
+        style: { background: f },
+        id: "headerBanner",
+        children: /* @__PURE__ */ r("div", { className: S.container, children: [
+          a && /* @__PURE__ */ n(
+            x,
+            {
+              src: e === k.UK ? m : u,
+              width: "365px",
+              height: "40px"
+            }
+          ),
+          !a && /* @__PURE__ */ n(
+            x,
+            {
+              src: e === k.UK ? _ : d,
+              width: "1200px",
+              height: "40px"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}, Ve = (e) => {
+  var t;
+  return (t = document.cookie.split("; ").find((a) => a.startsWith(`${e}=`))) == null ? void 0 : t.split("=")[1];
+}, $e = (e, t, a) => {
+  document.cookie = `${e}=${t}; path=/; max-age=${a}`;
+}, xe = 60 * 60 * 24 * 30 * 18, Se = (e) => {
+  Ve("locale") !== e && $e("locale", e, xe);
+}, je = "_header__lang_1ilvb_1", Ee = "_lang__btn_1ilvb_23", Ue = "_lang__btn_active_1ilvb_43", y = {
+  header__lang: je,
+  lang__btn: Ee,
+  lang__btn_active: Ue
+}, A = ({ defaultLocale: e, localeCallback: t }) => {
+  const [a, i] = H(e), s = (_) => {
+    Se(_), _ !== a && t && t(_);
+  };
+  return V(() => {
+    i(e);
+  }, [e]), /* @__PURE__ */ r("div", { className: y.header__lang, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: M(y.lang__btn, { [y.lang__btn_active]: a === k.UK }),
+        type: "button",
+        onClick: () => s(k.UK),
+        children: "Ua"
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: M(y.lang__btn, { [y.lang__btn_active]: a === k.RU }),
+        type: "button",
+        onClick: () => s(k.RU),
+        children: "Rus"
+      }
+    )
+  ] });
+}, Ie = (e) => /* @__PURE__ */ b.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M5 4H9L11 9L8.5 10.5C9.57096 12.6715 11.3285 14.429 13.5 15.5L15 13L20 15V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21C14.0993 20.763 10.4202 19.1065 7.65683 16.3432C4.8935 13.5798 3.23705 9.90074 3 6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4Z", stroke: "#2D2B2B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), Te = "_header__phone_1wewz_1", De = {
+  header__phone: Te
+}, K = () => /* @__PURE__ */ n("a", { className: De.header__phone, href: "tel:0800208824", children: /* @__PURE__ */ n(Ie, {}) }), Ze = (e) => /* @__PURE__ */ b.createElement("svg", { width: 13, height: 16, viewBox: "0 0 13 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M5.80667 10.9173L8.84 8.00065M8.84 8.00065L5.80667 5.08398M8.84 8.00065H0M0.8125 4.04148V4.00065C0.8125 3.06732 0.8125 2.60065 1.03686 2.24398C1.23446 1.92982 1.54835 1.67565 1.93635 1.51565C2.37683 1.33398 2.95317 1.33398 4.10583 1.33398H8.84C9.99267 1.33398 10.569 1.33398 11.0085 1.51565C11.3965 1.67565 11.7114 1.92982 11.909 2.24398C12.1333 2.59982 12.1333 3.06648 12.1333 3.99815V8.00107V12.004C12.1333 12.9357 12.1333 13.4015 11.909 13.7573C11.7114 14.071 11.3961 14.326 11.0085 14.4857C10.569 14.6673 9.9937 14.6673 8.84309 14.6673H4.10275C2.95214 14.6673 2.3758 14.6673 1.93635 14.4857C1.54907 14.3259 1.2342 14.0709 1.03686 13.7573C0.8125 13.4007 0.8125 12.934 0.8125 12.0007V11.959", stroke: "#2D2B2B", strokeLinecap: "round", strokeLinejoin: "round" })), W = (e) => /* @__PURE__ */ b.createElement("svg", { width: 29, height: 28, viewBox: "0 0 29 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M19.7776 10.1666H18.8192C18.8192 12.4601 16.96 14.3194 14.6664 14.3194V15.2777V16.2361C18.0185 16.2361 20.7359 13.5187 20.7359 10.1666H19.7776ZM14.6664 15.2777V14.3194C12.3729 14.3194 10.5137 12.4601 10.5137 10.1666H9.55534H8.59701C8.59701 13.5187 11.3144 16.2361 14.6664 16.2361V15.2777ZM9.55534 10.1666H10.5137C10.5137 7.8731 12.3729 6.01383 14.6664 6.01383V5.0555V4.09717C11.3144 4.09717 8.59701 6.81455 8.59701 10.1666H9.55534ZM14.6664 5.0555V6.01383C16.96 6.01383 18.8192 7.8731 18.8192 10.1666H19.7776H20.7359C20.7359 6.81455 18.0185 4.09717 14.6664 4.09717V5.0555ZM10.8331 19.1111V20.0694H18.4998V19.1111V18.1527H10.8331V19.1111ZM1.88867 13.9999H2.84701C2.84701 7.47225 8.13875 2.1805 14.6664 2.1805V1.22217V0.263835C7.0802 0.263835 0.930339 6.4137 0.930339 13.9999H1.88867ZM14.6664 1.22217V2.1805C21.1941 2.1805 26.4859 7.47225 26.4859 13.9999H27.4442H28.4026C28.4026 6.4137 22.2527 0.263835 14.6664 0.263835V1.22217ZM27.4442 13.9999H26.4859C26.4859 17.3519 25.0918 20.3767 22.8492 22.5289L23.5127 23.2203L24.1763 23.9118C26.7799 21.4131 28.4026 17.8952 28.4026 13.9999H27.4442ZM23.5127 23.2203L22.8492 22.5289C20.7246 24.5678 17.8427 25.8194 14.6664 25.8194V26.7777V27.7361C18.3569 27.7361 21.7091 26.2794 24.1763 23.9118L23.5127 23.2203ZM18.4998 19.1111V20.0694C20.5136 20.0694 22.1945 21.5038 22.5728 23.4071L23.5127 23.2203L24.4527 23.0335C23.8996 20.2506 21.4458 18.1527 18.4998 18.1527V19.1111ZM14.6664 26.7777V25.8194C11.4902 25.8194 8.6083 24.5678 6.48372 22.5289L5.82016 23.2203L5.1566 23.9118C7.62376 26.2794 10.976 27.7361 14.6664 27.7361V26.7777ZM5.82016 23.2203L6.48372 22.5289C4.2411 20.3767 2.84701 17.3519 2.84701 13.9999H1.88867H0.930339C0.930339 17.8952 2.55298 21.4131 5.1566 23.9118L5.82016 23.2203ZM10.8331 19.1111V18.1527C7.88714 18.1527 5.43327 20.2506 4.88021 23.0335L5.82016 23.2203L6.76011 23.4071C7.13837 21.5038 8.81929 20.0694 10.8331 20.0694V19.1111Z", fill: "#2D2B2B" })), Ae = "_header__auth_mcoj8_1", Ke = "_header__auth_btn_mcoj8_4", We = "_auth_mcoj8_15", Re = "_auth__menu_mcoj8_42", Pe = "_mobile_mcoj8_60", Fe = "_withBanner_mcoj8_69", ze = "_open_mcoj8_72", qe = "_menu__list_mcoj8_76", Xe = "_list__item_link_mcoj8_93", Ge = "_list__item_mcoj8_93", Je = "_list__item_profile_mcoj8_149", Qe = "_shadow_mcoj8_158", Ye = "_profileIcon_mcoj8_163", Oe = "_forMenu_mcoj8_173", l = {
+  header__auth: Ae,
+  header__auth_btn: Ke,
+  auth: We,
+  auth__menu: Re,
+  mobile: Pe,
+  withBanner: Fe,
+  open: ze,
+  menu__list: qe,
+  list__item_link: Xe,
+  list__item: Ge,
+  list__item_profile: Je,
+  shadow: Qe,
+  profileIcon: Ye,
+  forMenu: Oe
+}, en = (e, t, a, i) => {
+  const s = l.auth__menu;
+  return e ? [
+    s,
+    l.mobile,
+    i && l.withBanner,
+    t && l.open
+  ].filter(Boolean).join(" ") : a ? `${s} ${l.auth}` : s;
+}, nn = ({
+  isMenuOpen: e,
+  menuHandler: t,
+  menuItems: a,
+  lang: i,
+  loginCallback: s,
+  isProfileMenuFirst: _,
+  firstName: d,
+  lastName: u,
+  isUpBanner: m,
+  logoutCallback: f,
+  isAuth: w,
+  closeMenu: o
+}) => {
+  const c = U(E, j), g = new G({
+    uk: {
+      logout: "Вийти",
+      login: "Увійти"
+    },
+    ru: {
+      logout: "Выйти",
+      login: "Войти"
+    }
+  });
+  g.setLanguage(i);
+  const v = () => {
+    f && f(), c && o();
+  }, h = () => {
+    if (!w)
+      return s == null ? void 0 : s();
+    if (c) {
+      const p = _ ? "linkMenu" : "profileMenu";
+      if (e[p]) {
+        o();
+        return;
+      }
+      t({
+        menu: !1,
+        profileMenu: p === "profileMenu",
+        linkMenu: p === "linkMenu"
+      });
+    }
+  };
+  return c && e.menu ? null : /* @__PURE__ */ r("div", { className: l.header__auth, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: M(l.header__auth_btn, { [l.auth]: w }),
+        type: "button",
+        onClick: h,
+        children: w ? /* @__PURE__ */ n(W, { className: l.profileIcon }) : g.login
+      }
+    ),
+    /* @__PURE__ */ r("nav", { className: en(c, e.profileMenu, w, !!m), children: [
+      c && /* @__PURE__ */ n("button", { className: l.shadow, type: "button", onClick: o }),
+      /* @__PURE__ */ n("ul", { className: l.menu__list, children: a && /* @__PURE__ */ r($, { children: [
+        /* @__PURE__ */ n("li", { className: l.list__item, children: /* @__PURE__ */ r("a", { className: l.list__item_link, href: a.childs[0].navigateTo, children: [
+          /* @__PURE__ */ n(W, { className: M(l.profileIcon, l.forMenu) }),
+          /* @__PURE__ */ r("div", { className: l.list__item_profile, children: [
+            /* @__PURE__ */ n("p", { children: `${d} ${u}` }),
+            /* @__PURE__ */ n("p", { children: a.childs[0].label })
+          ] })
+        ] }) }),
+        a.childs.slice(1).map((p) => /* @__PURE__ */ n("li", { className: l.list__item, children: /* @__PURE__ */ r("a", { className: l.list__item_link, href: p.navigateTo, children: [
+          /* @__PURE__ */ n("img", { className: l.list__item_icon, src: p.imgAddress, alt: "Icon" }),
+          p.label
+        ] }) }, p.label)),
+        /* @__PURE__ */ n("li", { className: l.list__item, children: /* @__PURE__ */ r(
+          "button",
+          {
+            className: l.list__item_link,
+            type: "button",
+            onClick: v,
+            children: [
+              g.logout,
+              /* @__PURE__ */ n(Ze, {})
+            ]
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}, tn = () => {
+  var e;
+  (e = document.body) == null || e.classList.add("noScroll");
+}, an = () => {
+  var e;
+  (e = document.body) == null || e.classList.remove("noScroll");
+}, sn = (e) => /* @__PURE__ */ b.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M5 7H19M5 12H14M5 17H9", stroke: "#2D2B2B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), on = (e) => /* @__PURE__ */ b.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M8 8L15.9991 15.9991", stroke: "#6B7280", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ b.createElement("path", { d: "M16 8L8.00085 15.9991", stroke: "#6B7280", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), _n = "_header__menu_btn_jb4d6_1", rn = {
+  header__menu_btn: _n
+}, ln = ({
+  isMenuOpen: e,
+  menuHandler: t,
+  closeMenu: a,
+  isProfileMenuFirst: i
+}) => {
+  const s = () => {
+    if (!e.menu)
+      return a();
+    tn();
+    const _ = i ? "profileMenu" : "linkMenu";
+    t({
+      menu: !1,
+      profileMenu: _ === "profileMenu",
+      linkMenu: _ === "linkMenu"
+    });
+  };
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: rn.header__menu_btn,
+      type: "button",
+      onClick: s,
+      children: e.menu ? /* @__PURE__ */ n(sn, {}) : /* @__PURE__ */ n(on, {})
+    }
+  );
+}, cn = () => ["localhost", "test.polis.ua", "agentroot-dev.polis.ua"].some((t) => window.location.hostname.includes(t)) ? "https://strapi-test.polis.ua" : "https://strapi.polis.ua", hn = "/api", dn = cn();
+class un extends J {
+  constructor() {
+    super(dn, hn);
+  }
+  async getHeaderBanner(t = "") {
+    return this.request(
+      "/header-banners",
+      { params: { productId: t } }
+    );
+  }
+}
+const mn = (e, t, a) => {
+  const [i, s] = H(null), [_, d] = H(null), [u, m] = H([]), [f, w] = H(null), [o, c] = H(null);
+  return V(() => {
+    const g = async () => {
+      try {
+        const h = await new X().fetchHeaderData();
+        s(h);
+      } catch (h) {
+        console.log(`An error occurred when trying fetch header data => ${h}`);
+      }
+    }, v = async () => {
+      try {
+        const h = await new un().getHeaderBanner(a);
+        d(h.banner);
+      } catch (h) {
+        d(null), console.log("headerBannerFetchingError => ", h);
+      }
+    };
+    g(), a && !t && v();
+  }, []), V(() => {
+    t && d(null);
+  }, [t, _]), V(() => {
+    i && (m(e === k.UK ? i.uk.navItemNew : i.ru.navItemNew), w(e === k.UK ? i.uk.cabinet : i.ru.cabinet));
+  }, [e, i]), V(() => {
+    c(null);
+  }, [e]), {
+    headerBanner: _,
+    navMenu: u,
+    authMenu: f,
+    activeSubMenu: o,
+    setActiveSubMenu: c
+  };
+}, pn = "_header__container_withBanner_f5aa6_46", bn = "_header__container_f5aa6_46", wn = "_header_f5aa6_46", gn = "_container_f5aa6_74", fn = "_header__wrapper_f5aa6_79", vn = "_header__content_f5aa6_85", kn = "_header__actions_f5aa6_98", B = {
+  header__container_withBanner: pn,
+  header__container: bn,
+  header: wn,
+  container: gn,
+  header__wrapper: fn,
+  header__content: vn,
+  header__actions: kn
+}, Sn = ({
+  lang: e,
+  localeCallback: t,
+  logoText: a,
+  firstName: i,
+  lastName: s,
+  logoutCallback: _,
+  loginCallback: d,
+  isAuth: u,
+  productId: m,
+  hideHeaderBanner: f,
+  phone: w,
+  isProfileMenuFirst: o
+}) => {
+  const [c, g] = H({
+    linkMenu: !1,
+    profileMenu: !1,
+    menu: !0
+  }), v = U(E, j), { headerBanner: h, navMenu: p, authMenu: F, activeSubMenu: z, setActiveSubMenu: T } = mn(
+    e,
+    f,
+    m
+  ), I = () => {
+    T(null), g({
+      linkMenu: !1,
+      profileMenu: !1,
+      menu: !0
+    }), an();
+  };
+  return /* @__PURE__ */ n(
+    "section",
+    {
+      className: M({
+        [B.header__container_withBanner]: h,
+        [B.header__container]: !h
+      }),
+      id: "headerModule",
+      children: /* @__PURE__ */ r("header", { className: B.header, children: [
+        h && /* @__PURE__ */ n(ye, { lang: e, data: h }),
+        /* @__PURE__ */ n("div", { className: B.header__wrapper, children: /* @__PURE__ */ n("div", { className: B.container, children: /* @__PURE__ */ r("div", { className: B.header__content, children: [
+          c.menu ? /* @__PURE__ */ n(ee, { logoText: a, lang: e }) : /* @__PURE__ */ n("div", {}),
+          !v && /* @__PURE__ */ n(Z, { menuItems: p, isHeaderBanner: !!h }),
+          /* @__PURE__ */ r("div", { className: B.header__actions, children: [
+            !v && /* @__PURE__ */ r($, { children: [
+              /* @__PURE__ */ n(A, { defaultLocale: e, localeCallback: t }),
+              w && /* @__PURE__ */ n(K, {})
+            ] }),
+            v && !c.menu && /* @__PURE__ */ r($, { children: [
+              /* @__PURE__ */ n(A, { defaultLocale: e, localeCallback: t }),
+              /* @__PURE__ */ n(K, {})
+            ] }),
+            /* @__PURE__ */ n(
+              nn,
+              {
+                isMenuOpen: c,
+                menuHandler: g,
+                menuItems: F,
+                lang: e,
+                firstName: i,
+                lastName: s,
+                isUpBanner: !!h,
+                loginCallback: d,
+                logoutCallback: _,
+                isAuth: u,
+                closeMenu: I,
+                isProfileMenuFirst: o
+              }
+            ),
+            v && /* @__PURE__ */ r($, { children: [
+              /* @__PURE__ */ n(
+                ln,
+                {
+                  isMenuOpen: c,
+                  menuHandler: g,
+                  closeMenu: I,
+                  isProfileMenuFirst: o
+                }
+              ),
+              /* @__PURE__ */ n(
+                Z,
+                {
+                  isMenuOpen: c,
+                  submenuHandler: T,
+                  activeSubMenu: z,
+                  closeMenu: I,
+                  menuItems: p,
+                  isUpBanner: !!h
+                }
+              )
+            ] })
+          ] })
+        ] }) }) })
+      ] })
+    }
+  );
+};
+export {
+  Sn as H
+};

package/dist/modules/HeaderV5Module/HeaderV5Module.css

@@ -0,0 +1 @@
+._header__logo_nkota_1{position:relative}._header__logo_nkota_1 a{display:flex;align-items:center}._header__logo_icon_nkota_8{width:126px}@media (min-width: 1200px){._header__logo_icon_nkota_8{width:148px}}._header__logo_nkota_1 span{position:absolute;font-size:6.7px;line-height:8px;color:#1e2e3b;left:32px;top:25px;text-align:left;width:max-content}@media (min-width: 1200px){._header__logo_nkota_1 span{line-height:10px;left:37px;top:28px;font-size:7.8px}}._tabList_1lx61_1{border-top:1px solid #BDDBCD;margin-top:4px;padding-top:8px}@media (min-width: 1200px){._tabList_1lx61_1{padding-top:4px}}@media (min-width: 1200px){._header__submenu_1lx61_13{background-color:#fff;border-radius:0 0 12px 12px;overflow:hidden;border:1px solid #E6ECF2;border-top:none;box-shadow:0 6px 15px #bdbdbd80;padding:16px}}._submenu__item_link_1lx61_24{padding:7.5px 0 7.5px 24px;display:flex;align-items:center;font-size:14px;line-height:115%;color:#2d2b2b;background:#fff;transition:color .3s ease-in-out}@media (min-width: 1200px){._submenu__item_link_1lx61_24{white-space:nowrap;padding:4px 0}}._submenu__item_link_1lx61_24._withTab_1lx61_40{padding:7.5px 0 7.5px 8px}@media (min-width: 1200px){._submenu__item_link_1lx61_24._withTab_1lx61_40{padding:4px 0}}._submenu__item_link_1lx61_24 img{margin-right:8px}._submenu__item_link_1lx61_24 span{display:inline-block;padding:2px 8px;border-radius:4px 0;margin-left:8px;font-size:10px;line-height:115%;color:#fff;background:#a51e00}._submenu__item_link_1lx61_24:hover{color:#10a45f}._list__item_1vua7_1{position:relative;background:#fff}._list__item_1vua7_1:last-child{margin-right:0;position:relative}._list__item_1vua7_1:last-child:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:1px;background-color:#e5e7eb}@media (min-width: 1200px){._list__item_1vua7_1:last-child:after{content:none;display:none}}._list__item_btn_1vua7_24,._list__item_link_1vua7_24{padding:12px 16px;width:100%;transition:all .3s ease-in-out;color:#2d2b2b}@media (min-width: 1200px){._list__item_btn_1vua7_24,._list__item_link_1vua7_24{padding:27px 0}}._list__item_btn_1vua7_24._active_1vua7_35,._list__item_link_1vua7_24._active_1vua7_35{background:#ffc530;font-family:latobold;font-weight:700}._list__item_btn_1vua7_24{display:flex;justify-content:space-between;align-items:center}._list__item_btn_1vua7_24 span{display:flex;align-items:center}._list__item_btn_1vua7_24 img{margin-right:8px}._list__item_btn_1vua7_24 svg{transform:rotate(0);transition:all .3s ease-in-out}@media (min-width: 1200px){._list__item_btn_1vua7_24 svg{position:relative;top:2px;transform:rotate(90deg)}}._list__item_btn_1vua7_24 svg path{transition:all .3s ease-in-out}._list__item_1vua7_1._active_1vua7_35 ._list__item_btn_1vua7_24 svg{transform:rotate(90deg)}@media (min-width: 1200px){._list__item_1vua7_1._active_1vua7_35 ._list__item_btn_1vua7_24 svg{transform:rotate(-90deg)}}._list__item_1vua7_1._active_1vua7_35>._submenu__container_1vua7_74{max-height:550px}._list__item_1vua7_1:nth-last-child(2)._active_1vua7_35{border-bottom:none}@media (min-width: 1200px){._list__item_1vua7_1{margin-right:12px;padding:0}._list__item_1vua7_1:last-child{border-top:none}._list__item_1vua7_1:hover button,._list__item_1vua7_1:hover ._list__item_link_1vua7_24{color:#10a45f}._list__item_1vua7_1:hover>._list__item_btn_1vua7_24 svg path{stroke:#10a45f}._list__item_1vua7_1:hover>._list__item_btn_1vua7_24 svg{transform:rotate(-90deg)}._list__item_1vua7_1:hover ._submenu__container_1vua7_74{opacity:1;visibility:visible;pointer-events:all}}._submenu__container_1vua7_74{transition:all .3s ease-in-out;max-height:0;overflow:hidden}@media (min-width: 1200px){._active_1vua7_35>._submenu__container_1vua7_74{margin-top:8px}}@media (min-width: 1200px){._submenu__container_1vua7_74{padding:10px 0 0;position:absolute;top:68px;left:0;opacity:0;visibility:hidden;pointer-events:none;margin-top:0;max-height:initial;overflow:initial;width:max-content}._submenu__container_1vua7_74._withTab_1vua7_131{position:fixed;top:69px;left:50%;transform:translate(-50%);width:1200px}._submenu__container_1vua7_74._withBanner_1vua7_138{top:109px}}@media (min-width: 1200px){._submenu_1vua7_74{display:flex;justify-content:space-between;background-color:#fff;border-radius:0 0 12px 12px;overflow:hidden;border:1px solid #E6ECF2;border-top:none;box-shadow:0 6px 15px #bdbdbd80;padding:32px}}._submenu_item_1vua7_157{padding:0 16px 0 24px;margin-top:8px}._submenu_item_1vua7_157:first-child{margin-top:16px}@media (min-width: 1200px){._submenu_item_1vua7_157:first-child{margin-top:0}}@media (min-width: 1200px){._submenu_item_1vua7_157{padding:0;margin-top:0}}._submenu_item__title_1vua7_175{font:700 14px/115% latobold;color:#2d2b2b}@media (min-width: 1200px){._submenu_item__title_1vua7_175{font-size:16px}}._header__menu_91w0p_1._mobile_91w0p_1{position:fixed;top:51px;left:100vw;bottom:0;width:100vw;display:flex;transition:left .3s ease-in-out}._header__menu_91w0p_1._mobile_91w0p_1._withBanner_91w0p_10{top:91px}._header__menu_91w0p_1._mobile_91w0p_1._open_91w0p_13{left:0}._menu__list_91w0p_17{width:300px;display:flex;flex-direction:column;font-size:14px;line-height:120%;color:#2d2b2b;background:#fff;overflow-y:auto;box-shadow:-20px 0 30px -10px #bdbdbdb3}@media (min-width: 1200px){._menu__list_91w0p_17{font-size:16px;line-height:140%;width:initial;flex-direction:row;margin:0 24px;justify-content:space-between;align-items:center;overflow-y:initial;box-shadow:none}}._list__item_91w0p_42{position:relative;background:#fff}._list__item_91w0p_42:last-child{margin-right:0;position:relative}._list__item_91w0p_42:last-child:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:1px;background-color:#e5e7eb}@media (min-width: 1200px){._list__item_91w0p_42:last-child:after{content:none;display:none}}._list__item_btn_91w0p_65,._list__item_link_91w0p_65{display:flex;align-items:center;padding:12px 16px;width:100%;transition:all .3s ease-in-out}._list__item_btn_91w0p_65 img,._list__item_link_91w0p_65 img{margin-right:8px}@media (min-width: 1200px){._list__item_btn_91w0p_65,._list__item_link_91w0p_65{padding:27px 0}}._list__item_btn_91w0p_65:hover,._list__item_link_91w0p_65:hover{background:#ffc530;font-family:latobold;font-weight:700}@media (min-width: 1200px){._list__item_btn_91w0p_65:hover,._list__item_link_91w0p_65:hover{background:#fff;font-family:latoregular;font-weight:400}}@media (min-width: 1200px){._list__item_91w0p_42{margin-right:20px;padding:0}._list__item_91w0p_42:last-child{border-top:none}._list__item_91w0p_42:hover ._list__item_link_91w0p_65{color:#10a45f}}._shadow_91w0p_105{background-color:transparent;width:calc(100% - 300px)}._container_4zqie_1{width:100%;max-width:1200px;margin:0 auto;position:relative;z-index:0;display:flex;justify-content:center;align-items:center}._header__banner_4zqie_12{position:relative;width:100%;display:block;animation:_show_4zqie_1 1s linear forwards}@keyframes _show_4zqie_1{0%{opacity:0;max-height:0}to{opacity:1;max-height:40px}}._header__lang_1ilvb_1{box-sizing:border-box;width:80px;height:36px;background:#f3f4f6;padding:4px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;margin-right:auto}@media (min-width: 1200px){._header__lang_1ilvb_1{margin-right:8px;padding:4px;width:98px;height:44px;border-radius:24px}}._lang__btn_1ilvb_23{font-size:12px;line-height:115%;color:#6b7280;transition:all .3s ease-in-out;display:flex;align-items:center;justify-content:center;border-radius:21px;height:30px;width:32px}@media (min-width: 1200px){._lang__btn_1ilvb_23{border-radius:21px;height:36px;width:44px;font-size:14px}}._lang__btn_active_1ilvb_43{color:#2d2b2b;position:relative;z-index:1;font-weight:500;background:#fff;width:35px;padding:14px 8px;box-shadow:0 2.45px 13.91px #515a6447}@media (min-width: 1200px){._lang__btn_active_1ilvb_43{width:42px;padding:0 20px}}._header__phone_1wewz_1{width:36px;height:36px;border-radius:12px;background:#f5f7f9;border:1px solid #E5E7EB;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-right:8px}@media (min-width: 1200px){._header__phone_1wewz_1{width:44px;height:44px;margin-right:10px}}._header__auth_mcoj8_1{position:relative}._header__auth_btn_mcoj8_4{padding:0 17px;height:36px;display:flex;align-items:center;font:600 12px/17px latobold;color:#2d2b2b;background:#ffd362;border-radius:12px;transition:all .3s ease-in-out}._header__auth_btn_mcoj8_4._auth_mcoj8_15{background:#ffd362;padding:0 6px}@media (min-width: 1200px){._header__auth_btn_mcoj8_4._auth_mcoj8_15{padding:0 24px}}@media (min-width: 1200px){._header__auth_btn_mcoj8_4{font-size:16px;padding:0 24px;height:46px;background:#ffd362;max-width:95px}}._header__auth_btn_mcoj8_4 svg path{transition:all .3s ease-in-out}._header__auth_btn_mcoj8_4 svg path{fill:#191b1e}._header__auth_mcoj8_1:hover ._header__auth_btn_mcoj8_4{background:#e7b433}._header__auth_mcoj8_1:hover ._auth__menu_mcoj8_42._auth_mcoj8_15{opacity:1;visibility:visible;pointer-events:all}@media (min-width: 1200px){._auth__menu_mcoj8_42{padding:20px 0 0;position:absolute;top:43px;right:0;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease-in-out}}._auth__menu_mcoj8_42._mobile_mcoj8_60{position:fixed;top:51px;left:100vw;height:100vh;width:100vw;display:flex;transition:left .3s ease-in-out}._auth__menu_mcoj8_42._mobile_mcoj8_60._withBanner_mcoj8_69{top:91px}._auth__menu_mcoj8_42._mobile_mcoj8_60._open_mcoj8_72{left:0}._menu__list_mcoj8_76{width:300px;background:var(--headerBackground, #ffffff);box-shadow:-20px 0 30px -10px #bdbdbdb3}@media (min-width: 1200px){._menu__list_mcoj8_76{width:max-content;background:var(--headerBackground, #ffffff);border-radius:0 0 12px 12px;overflow:hidden;border:1px solid #E6ECF2;border-top:none;box-shadow:0 6px 15px #bdbdbd80}}._list__item_link_mcoj8_93{padding:5px 16px;display:flex;align-items:center;white-space:nowrap;font-size:14px;line-height:115%;color:#2d2b2b;transition:all .2s ease-in-out}._list__item_link_mcoj8_93:hover{color:#10a45f}._list__item_link_mcoj8_93 img{margin-right:16px}._list__item_mcoj8_93:first-child{border-bottom:1px solid #E6ECF2}._list__item_mcoj8_93:first-child>._list__item_link_mcoj8_93{display:flex;align-items:center;padding:8px 16px}._list__item_mcoj8_93:last-child{border-top:1px solid #E6ECF2}._list__item_mcoj8_93:last-child>._list__item_link_mcoj8_93{color:#2d2b2b;width:100%;display:flex;justify-content:space-between;align-items:center;background:#fff;padding:8px 16px}._list__item_mcoj8_93:nth-child(2)>._list__item_link_mcoj8_93{padding:8px 16px 5px}._list__item_mcoj8_93:nth-last-child(2)>._list__item_link_mcoj8_93{padding:5px 16px 8px}._list__item_mcoj8_93:last-child>._list__item_link_mcoj8_93 svg path{transition:all .2s ease-in-out;color:#2d2b2b}._list__item_mcoj8_93:first-child:hover>._list__item_link_mcoj8_93{color:#51be8f;background:none}._list__item_mcoj8_93:last-child:hover>._list__item_link_mcoj8_93{color:#10a45f}._list__item_mcoj8_93:last-child:hover>._list__item_link_mcoj8_93 svg path{stroke:#10a45f}._list__item_profile_mcoj8_149{margin-left:18px}._list__item_profile_mcoj8_149 p:first-child{font-family:latobold,Arial,sans-serif;font-weight:700;font-size:14px}._shadow_mcoj8_158{background-color:transparent;width:calc(100% - 300px)}._profileIcon_mcoj8_163{width:24px;height:24px}@media (min-width: 1200px){._profileIcon_mcoj8_163{width:30px;height:30px}}._profileIcon_mcoj8_163._forMenu_mcoj8_173{width:22px;height:22px}._profileIcon_mcoj8_163._forMenu_mcoj8_173 path{fill:#10a45f}._header__menu_btn_jb4d6_1{width:24px;margin-left:8px;align-self:baseline;padding:0}._loadAbleImg_container_f5aa6_1{background:linear-gradient(101.42deg,#dfefff -.04%,#dfefff45 94.2%);box-sizing:border-box;overflow:hidden;width:100%;height:100%;position:relative}._loadAbleImg_container_f5aa6_1:before{content:"";display:block;position:absolute;left:-150px;top:0;height:100%;width:150px;background:linear-gradient(to right,transparent 0%,rgba(38,179,255,.0901960784) 50%,transparent 100%);animation:_load_f5aa6_1 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes _load_f5aa6_1{0%{left:-150px}to{left:100%}}._loadAbleImg_containerLoaded_f5aa6_30:before{animation:none}._loadAbleImg_image_f5aa6_34{opacity:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease-in-out}._loadAbleImg_imageLoaded_f5aa6_42{opacity:1}._header__container_withBanner_f5aa6_46{height:90px}@media (min-width: 1200px){._header__container_withBanner_f5aa6_46{height:118px}}._header__container_f5aa6_46{height:50px}@media (min-width: 1200px){._header__container_f5aa6_46{height:78px}}._header_f5aa6_46{width:100%;position:fixed;top:0;z-index:10;font-family:latoregular;border-bottom:solid 1px #E6ECF2;color:#2d2b2b}._container_f5aa6_74{max-width:1232px;margin:0 auto}._header__wrapper_f5aa6_79{background-color:#fff;position:relative;z-index:1}._header__content_f5aa6_85{height:50px;padding:0 16px;display:flex;justify-content:space-between;align-items:center}@media (min-width: 1200px){._header__content_f5aa6_85{height:78px}}._header__actions_f5aa6_98{position:relative;display:flex;align-items:center;justify-content:flex-end;width:268px}@media (min-width: 1200px){._header__actions_f5aa6_98{justify-content:initial;width:initial}}

package/dist/modules/HeaderV5Module/HeaderV5Module.d.ts

@@ -0,0 +1,2 @@
+import { HeaderV5ModuleProps } from './HeaderV5Module.types';
+export declare const HeaderV5Module: ({ lang, localeCallback, logoText, firstName, lastName, logoutCallback, loginCallback, isAuth, productId, hideHeaderBanner, phone, isProfileMenuFirst, }: HeaderV5ModuleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/HeaderV5Module/HeaderV5Module.types.d.ts

@@ -0,0 +1,74 @@
+import { Locale } from '@/types';
+export type HeaderV5ModuleProps = {
+    lang: Locale;
+    localeCallback?(locale: Locale): void;
+    loginCallback?(): void;
+    logoutCallback?(): void;
+    isAuth: boolean;
+    logoText?: string;
+    lastName?: string;
+    firstName?: string;
+    productId?: string;
+    hideHeaderBanner?: boolean;
+    phone?: boolean;
+    isProfileMenuFirst?: boolean;
+};
+export type MenuState = {
+    linkMenu: boolean;
+    profileMenu: boolean;
+    menu: boolean;
+};
+export interface Cabinet {
+    childs: MenuItem[];
+    link: string;
+    title: string;
+}
+export interface MenuItem {
+    imgAddress: string;
+    label: string;
+    navigateTo: string;
+    new: boolean;
+}
+export interface CategoryItem {
+    title: string;
+    id: string;
+    childList: MenuItem[];
+}
+export interface NavItem {
+    title: string;
+    _id: string;
+    imgAddress: string;
+    link?: string;
+    childs: MenuItem[];
+    categoryList: CategoryItem[];
+}
+export interface HeaderMenuItem {
+    cabinet: Cabinet;
+    navItemNew: NavItem[];
+}
+export interface HeaderMenuItems {
+    uk: HeaderMenuItem;
+    ru: HeaderMenuItem;
+}
+export type HeaderBanner = {
+    linkUk?: string;
+    linkRu?: string;
+    background: string;
+    bannerDeskRu: string;
+    bannerDeskUk: string;
+    bannerMobRu: string;
+    bannerMobUk: string;
+};
+export type HeaderBannerType = {
+    banner: HeaderBanner | null;
+};
+export type HeaderData = {
+    uk: {
+        cabinet: Cabinet;
+        navItemNew: NavItem[];
+    };
+    ru: {
+        cabinet: Cabinet;
+        navItemNew: NavItem[];
+    };
+};