@stokr/components-library 3.0.77 → 3.1.0-alpha.1

package/dist/components/Header/Header.js

@@ -1,441 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import stdin_default$1 from "../SmartLink/SmartLink.js";
-import stdin_default$3 from "../Button/Button.styles.js";
-import stdin_default$2 from "../SvgIcons/LogoSvg.js";
-import { MenuNav } from "../MenuNav/MenuNav.styles.js";
-import stdin_default$5 from "../MainMenu/MainMenu.js";
-import { StepsProgressSignup, StepsProgressHeader } from "../StepsProgress/StepsProgress.js";
-import { NotificationCounter } from "../NotificationCounter/NotificationCounter.styles.js";
-import avatarPlaceholder from "../../static/images/avatar-placeholder.png.js";
-import { StyledHeader, SidebarToggle, HamburgerIcon, HeaderInner, MainNavWrap, Logo, HeaderMainNav, ProgressWrap, QuickNavWrap, MobileMenuToggler, HeaderQuickNav, LoginButton, UserAccount, UserButton, SignupButton, MobileMenu, MobileMenuPart, MobileMenuItem, MobileMenuLink, CTAContainer, SocialLinksContainer, UserAvatar, MobileMenuWrapper, StyledSubMenu } from "./Header.styles.js";
-import stdin_default$4 from "../MainMenu/DynamicMainMenu.js";
-import { SocialLink, ArrowDown } from "../Footer/FooterMenu.styles.js";
-import { Collapse } from "react-collapse";
-import { usePrevious, useMobileView } from "../../utils/customHooks.js";
-import { checkTodoStatus } from "../../utils/check-todo-status.js";
-import { hasLoggedInSession } from "../../utils/user-identity.js";
-import { socialSvg } from "../Footer/FooterMenu.js";
-import { Wrapper, FlexContainer } from "../Grid/Grid.styles.js";
-import { getFooterGroups } from "../Footer/FooterLayout.js";
-import { getPlatformURL, getConfig } from "../../runtime-config.js";
-import { withRouter } from "../../utils/withRouter.js";
-import { sizes } from "../../styles/rwd.js";
-import { track } from "../../analytics/index.js";
-import { navigateToHref } from "../../routing/navigate-app.js";
-import { Breakdown } from "../breakdown/Breakdown.js";
-const UserAvatarComponent = ({ avatar }) => /* @__PURE__ */ jsx(UserAvatar, { src: avatar || avatarPlaceholder });
-const RenderSubMenu = ({
-  title,
-  isActive,
-  subMenuItems = [],
-  onClick = () => {
-  },
-  _platformURL = "",
-  platformURL: platformURLProp = ""
-}) => {
-  const basePlatformUrl = _platformURL || platformURLProp;
-  return /* @__PURE__ */ jsxs(MobileMenuWrapper, { onClick, children: [
-    /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsxs(StyledSubMenu, { children: [
-      /* @__PURE__ */ jsx("a", { children: title }),
-      /* @__PURE__ */ jsx(ArrowDown, { displayAlways: true, isOpened: isActive, style: { right: "-2em", position: "absolute" } })
-    ] }) }),
-    /* @__PURE__ */ jsx(Collapse, { isOpened: isActive, children: subMenuItems.map((item) => /* @__PURE__ */ jsx(MobileMenuItem, { red: true, children: /* @__PURE__ */ jsx(MobileMenuLink, { to: basePlatformUrl + item.link, children: item.name }) }, item.name)) })
-  ] });
-};
-function HeaderView({
-  navigate = null,
-  activeMenu = null,
-  activateMenu = () => {
-  },
-  user = {},
-  userPhoto = avatarPlaceholder,
-  logoutUser = () => {
-  },
-  onLoginClick = () => {
-  },
-  onSignUpClick = () => {
-  },
-  useRelativePathForMenu = false,
-  useRelativePathForUserMenu = false,
-  progress = null,
-  withSidebar = false,
-  isSidebarExpanded = false,
-  sidebarHandler = () => {
-  },
-  signupFlow = false,
-  noFixedPosition = false,
-  withoutLoginSignupButton = false
-}) {
-  const platformURL = getPlatformURL();
-  const productMenuItems = useMemo(
-    () => [
-      {
-        name: "End-to-End Tokenization",
-        onClick: () => {
-          track("header_link_clicked", { link: "end-to-end tokenization" });
-          navigateToHref(navigate, `${platformURL}/solutions/asset-tokenization`);
-        },
-        link: "/solutions/asset-tokenization"
-      },
-      {
-        name: "Tokenization-as-a-Service",
-        onClick: () => {
-          track("header_link_clicked", { link: "tokenization-as-a-service" });
-          navigateToHref(navigate, `${platformURL}/solutions/tokenization-as-service`);
-        },
-        link: "/solutions/tokenization-as-service"
-      }
-    ],
-    [navigate, platformURL]
-  );
-  const mediaMenuItems = useMemo(
-    () => [
-      {
-        name: "Press Releases",
-        onClick: () => {
-          track("header_link_clicked", { link: "press releases" });
-          navigateToHref(navigate, `${platformURL}/press-releases`);
-        },
-        link: "/press-releases"
-      },
-      {
-        name: "Stoke Post",
-        onClick: () => {
-          track("header_link_clicked", { link: "stoke post" });
-          navigateToHref(navigate, `${platformURL}/stoke-post`);
-        },
-        link: "/stoke-post"
-      }
-    ],
-    [navigate, platformURL]
-  );
-  const [currentActiveMenu, setcurrentActiveMenu] = useState(null);
-  const [currentActiveSubMenu, setcurrentActiveSubMenu] = useState(null);
-  const prevActiveMenu = usePrevious(activeMenu);
-  const isMobile = useMobileView(sizes.MLarge);
-  useEffect(() => {
-    return () => {
-      document.body.style.overflow = "unset";
-      document.body.style.position = "relative";
-      document.body.style.width = "auto";
-      document.documentElement.style.overflowY = "unset";
-    };
-  }, []);
-  useEffect(() => {
-    if (prevActiveMenu !== activeMenu) {
-      if (activeMenu !== null) {
-        setcurrentActiveMenu(null);
-        activateMenu();
-      }
-    }
-  }, [activeMenu, activateMenu]);
-  const toggleMenu = (type, mobile = false) => {
-    if (activeMenu === false) {
-      setcurrentActiveMenu(null);
-    }
-    const newActiveMenu = currentActiveMenu === type ? null : type;
-    if (isMobile) {
-      if (newActiveMenu) {
-        document.body.style.overflowY = "hidden";
-        document.documentElement.style.overflowY = "hidden";
-        document.body.style.position = "fixed";
-        document.body.style.width = "100%";
-      } else {
-        document.body.style.overflowY = "unset";
-        document.documentElement.style.overflowY = "unset";
-        document.body.style.position = "relative";
-      }
-    }
-    if (mobile && type !== "main") {
-      setcurrentActiveSubMenu(currentActiveSubMenu === type ? null : type);
-    } else {
-      setcurrentActiveMenu(newActiveMenu);
-    }
-    activateMenu();
-  };
-  const userType = user && user.user_type;
-  const isAdmin = userType === "company_pa" || userType === "company_sa" || userType === "sa";
-  const isVentureDashboard = withSidebar;
-  const socialLinks = getFooterGroups()?.filter((group) => group.social)[0]?.items || [];
-  const newPlatformUrl = useRelativePathForMenu ? "" : platformURL;
-  const newPlatformUrlForUserMenu = useRelativePathForUserMenu ? "" : getConfig("dashboardUrl");
-  return /* @__PURE__ */ jsx(StyledHeader, { noFixedPosition, children: /* @__PURE__ */ jsxs(Wrapper, { flex: withSidebar, children: [
-    withSidebar && /* @__PURE__ */ jsx(SidebarToggle, { isSidebarExpanded, onClick: sidebarHandler, children: /* @__PURE__ */ jsx(HamburgerIcon, {}) }),
-    /* @__PURE__ */ jsxs(HeaderInner, { withSidebar, children: [
-      /* @__PURE__ */ jsxs(MainNavWrap, { hasProgress: progress, children: [
-        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx(stdin_default$1, { to: useRelativePathForMenu ? "/" : platformURL, "data-cy": "logo-nav-link", "aria-label": "STOKR home", children: /* @__PURE__ */ jsx(stdin_default$2, {}) }) }),
-        !progress && /* @__PURE__ */ jsx(HeaderMainNav, { children: /* @__PURE__ */ jsx(MenuNav, { children: /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            stdin_default$1,
-            {
-              to: newPlatformUrl + "/featured-assets",
-              "data-cy": "invest-nav-link",
-              onClick: () => track("header_link_clicked", { link: "invest" }),
-              children: "Invest"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              onClick: () => {
-                track("header_link_clicked", { link: "solutions" });
-                toggleMenu("products");
-              },
-              "data-cy": "products-nav-link",
-              children: "Solutions"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              onClick: () => {
-                track("header_link_clicked", { link: "media" });
-                toggleMenu("media");
-              },
-              "data-cy": "media-nav-link",
-              children: "Media"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            stdin_default$1,
-            {
-              to: newPlatformUrl + "/team",
-              "data-cy": "team-nav-link",
-              onClick: () => track("header_link_clicked", { link: "team" }),
-              children: "Team"
-            }
-          ) })
-        ] }) }) })
-      ] }),
-      progress && /* @__PURE__ */ jsx(Fragment, { children: signupFlow ? /* @__PURE__ */ jsx(StepsProgressSignup, { user }) : /* @__PURE__ */ jsx(ProgressWrap, { children: /* @__PURE__ */ jsx(
-        StepsProgressHeader,
-        {
-          items: progress.items,
-          doneIndex: progress.doneIndex,
-          activeIndex: progress.activeIndex
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxs(QuickNavWrap, { hasProgress: progress, children: [
-        /* @__PURE__ */ jsxs(
-          MobileMenuToggler,
-          {
-            isActive: currentActiveMenu === "main",
-            onClick: () => toggleMenu("main"),
-            withSidebar,
-            type: "button",
-            "aria-label": "Toggle navigation menu",
-            "aria-expanded": currentActiveMenu === "main",
-            children: [
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {})
-            ]
-          }
-        ),
-        isMobile && checkTodoStatus(user) > 0 && !signupFlow && /* @__PURE__ */ jsx(NotificationCounter, { mobile: true, isActive: currentActiveMenu === "main", children: checkTodoStatus(user) }),
-        /* @__PURE__ */ jsx(HeaderQuickNav, { isUserLogged: hasLoggedInSession(user), children: /* @__PURE__ */ jsx(Fragment, { children: hasLoggedInSession(user) ? /* @__PURE__ */ jsx(Fragment, { children: signupFlow ? /* @__PURE__ */ jsx(stdin_default$3, { onClick: logoutUser, children: "Log Out" }) : /* @__PURE__ */ jsxs(FlexContainer, { itemsCenter: true, children: [
-          /* @__PURE__ */ jsx(Breakdown, { children: /* @__PURE__ */ jsx(
-            LoginButton,
-            {
-              onClick: () => {
-                isAdmin ? navigateToHref(navigate, getConfig("adminUrl")) : !newPlatformUrlForUserMenu ? navigate("/overview") : navigateToHref(navigate, getConfig("dashboardUrl") + "/overview");
-              },
-              "data-cy": "dashboard-nav-link",
-              children: "Dashboard"
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(UserAccount, { children: [
-            /* @__PURE__ */ jsx(UserButton, { onClick: () => toggleMenu("main"), children: /* @__PURE__ */ jsx(UserAvatarComponent, { avatar: userPhoto }) }),
-            checkTodoStatus(user) > 0 && /* @__PURE__ */ jsx(NotificationCounter, { avatar: true, children: checkTodoStatus(user) })
-          ] })
-        ] }) }) : /* @__PURE__ */ jsx(Fragment, { children: withoutLoginSignupButton ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Breakdown, { children: /* @__PURE__ */ jsx(
-            LoginButton,
-            {
-              onClick: () => {
-                track("header_link_clicked", { link: "login" });
-                onLoginClick();
-              },
-              "data-cy": "login-nav-button",
-              children: "Log in"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            SignupButton,
-            {
-              onClick: () => {
-                track("signup_cta_clicked");
-                onSignUpClick();
-              },
-              "data-cy": "signup-nav-button",
-              children: "Sign Up"
-            }
-          )
-        ] }) }) }) })
-      ] }),
-      /* @__PURE__ */ jsxs(MobileMenu, { isActive: currentActiveMenu === "main", withSidebar, children: [
-        /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-            MobileMenuLink,
-            {
-              to: newPlatformUrl + "/featured-assets",
-              "data-cy": "invest-nav-link",
-              onClick: () => toggleMenu("main"),
-              children: "Invest"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            RenderSubMenu,
-            {
-              title: "solutions",
-              isActive: currentActiveSubMenu === "products",
-              subMenuItems: productMenuItems,
-              platformURL: newPlatformUrl,
-              onClick: () => {
-                toggleMenu("products", true);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RenderSubMenu,
-            {
-              title: "media",
-              isActive: currentActiveSubMenu === "media",
-              subMenuItems: mediaMenuItems,
-              platformURL: newPlatformUrl,
-              onClick: () => {
-                toggleMenu("media", true);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", onClick: () => toggleMenu("main"), children: "Team" }) })
-        ] }) }) }) }),
-        hasLoggedInSession(user) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          !signupFlow && /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, borderTop: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsx("ul", { children: isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard ? /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: "/settings", children: "Settings" }) }) : /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: getConfig("adminUrl"), onClick: () => toggleMenu("main"), children: "Dashboard" }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(MobileMenuItem, { children: [
-              /* @__PURE__ */ jsx(
-                stdin_default$1,
-                {
-                  to: `${newPlatformUrlForUserMenu}/overview`,
-                  onClick: () => toggleMenu("main"),
-                  children: "Dashboard"
-                }
-              ),
-              checkTodoStatus(user) > 0 && /* @__PURE__ */ jsx(NotificationCounter, { mobileMenu: true, children: checkTodoStatus(user) })
-            ] }),
-            /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              stdin_default$1,
-              {
-                to: `${newPlatformUrlForUserMenu}/settings/profile-and-privacy`,
-                onClick: () => toggleMenu("main"),
-                children: "Profile and Privacy"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              stdin_default$1,
-              {
-                to: `${newPlatformUrlForUserMenu}/settings/liquid-address`,
-                onClick: () => toggleMenu("main"),
-                children: "Liquid Addresses"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              stdin_default$1,
-              {
-                to: `${newPlatformUrlForUserMenu}/settings/investment-eligibility`,
-                onClick: () => toggleMenu("main"),
-                children: "Investment eligibility"
-              }
-            ) })
-          ] }) }) }) }),
-          /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, noPaddingTop: !signupFlow, borderTop: signupFlow, isLast: true, children: /* @__PURE__ */ jsx(stdin_default$3, { minWidth: "160px", secondary: true, onClick: () => logoutUser(), children: "log out" }) })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          withoutLoginSignupButton ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Breakdown, { alignCenter: true, children: /* @__PURE__ */ jsx(
-              stdin_default$3,
-              {
-                onClick: () => {
-                  track("header_link_clicked", { link: "login" });
-                  onLoginClick();
-                },
-                secondary: true,
-                isLoginMobile: true,
-                children: "Log in"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "center",
-                  paddingBottom: 30
-                },
-                children: /* @__PURE__ */ jsx(
-                  SignupButton,
-                  {
-                    onClick: () => {
-                      track("signup_cta_clicked");
-                      onSignUpClick();
-                    },
-                    isMobile: true,
-                    children: "Sign Up"
-                  }
-                )
-              }
-            )
-          ] }),
-          socialLinks.length > 0 && /* @__PURE__ */ jsxs(CTAContainer, { children: [
-            /* @__PURE__ */ jsx("span", { children: "FOLLOW US" }),
-            /* @__PURE__ */ jsx(SocialLinksContainer, { isHeader: true, children: socialLinks.map((item) => /* @__PURE__ */ jsx(SocialLink, { href: item.url, target: "_blank", rel: "noopener noreferrer", children: socialSvg[item.name] }, item.name)) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(stdin_default$4, { isMenuActive: currentActiveMenu === "products", options: productMenuItems }),
-      /* @__PURE__ */ jsx(stdin_default$4, { isMenuActive: currentActiveMenu === "media", options: mediaMenuItems }),
-      /* @__PURE__ */ jsx(
-        stdin_default$5,
-        {
-          isMenuActive: currentActiveMenu === "main",
-          logoutUser,
-          user,
-          isAdmin,
-          notifications: checkTodoStatus(user),
-          isVentureDashboard,
-          platformUrlForUserMenu: newPlatformUrlForUserMenu,
-          navigate
-        }
-      )
-    ] })
-  ] }) });
-}
-const Header = withRouter(HeaderView);
-HeaderView.propTypes = {
-  navigate: PropTypes.func,
-  progress: PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.object).isRequired,
-    doneIndex: PropTypes.number,
-    activeIndex: PropTypes.number
-  }),
-  signupFlow: PropTypes.bool,
-  activeMenu: PropTypes.any,
-  activateMenu: PropTypes.func,
-  user: PropTypes.object,
-  userPhoto: PropTypes.string,
-  logoutUser: PropTypes.func,
-  onLoginClick: PropTypes.func,
-  onSignUpClick: PropTypes.func,
-  useRelativePathForMenu: PropTypes.bool,
-  useRelativePathForUserMenu: PropTypes.bool,
-  withSidebar: PropTypes.bool,
-  isSidebarExpanded: PropTypes.bool,
-  sidebarHandler: PropTypes.func,
-  noFixedPosition: PropTypes.bool
-};
-var stdin_default = Header;
-export {
-  Header,
-  stdin_default as default
-};