@stokr/components-library 0.6.7 → 0.6.8

package/dist/components/Header/Header.js

@@ -0,0 +1,457 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Header = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _SvgIcons = require("../SvgIcons");
+var _MenuNav = _interopRequireDefault(require("../MenuNav/MenuNav.styles"));
+var _MainMenu = _interopRequireDefault(require("../MainMenu/MainMenu"));
+var _StepsProgress = _interopRequireWildcard(require("../StepsProgress/StepsProgress"));
+var _NotificationCounter = _interopRequireDefault(require("../NotificationCounter/NotificationCounter.styles"));
+var _avatarPlaceholder = _interopRequireDefault(require("../../static/images/avatar-placeholder.png"));
+var _Header = require("./Header.styles");
+var _DynamicMainMenu = _interopRequireDefault(require("../MainMenu/DynamicMainMenu"));
+var _FooterMenu = require("../Footer/FooterMenu.styles");
+var _reactCollapse = require("react-collapse");
+var _customHooks = require("../../utils/customHooks");
+var _breakdown = _interopRequireDefault(require("../breakdown"));
+var _FooterMenu2 = require("../Footer/FooterMenu");
+var _Grid = require("../Grid/Grid.styles");
+var _FooterLayout = require("../Footer/FooterLayout");
+var _globalVariables = require("../../constants/globalVariables");
+var _excluded = ["activeMenu", "activateMenu", "user", "userPhoto", "logoutUser", "onLoginClick", "onSignUpClick", "useRelativePathForMenu", "useRelativePathForUserMenu", "progress", "withSidebar", "isSidebarExpanded", "sidebarHandler", "signupFlow", "noFixedPosition"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var productMenuItems = [{
+  name: 'SME Fundraising',
+  onClick: function onClick() {
+    return window.location.href = "".concat(_globalVariables.platformURL, "/products/sme-fundraising");
+  },
+  link: '/products/sme-fundraising'
+}, {
+  name: 'Asset Tokenisation',
+  onClick: function onClick() {
+    return window.location.href = "".concat(_globalVariables.platformURL, "/products/asset-tokenisation");
+  },
+  link: '/products/asset-tokenisation'
+}, {
+  name: 'Fund Tokenisation',
+  onClick: function onClick() {
+    return window.location.href = "".concat(_globalVariables.platformURL, "/products/fund-tokenisation");
+  },
+  link: '/products/fund-tokenisation'
+}];
+var mediaMenuItems = [{
+  name: 'Press Releases',
+  onClick: function onClick() {
+    return window.location.href = "".concat(_globalVariables.platformURL, "/press-releases");
+  },
+  link: '/products/press-releases'
+}, {
+  name: 'Stoke Post',
+  onClick: function onClick() {
+    return window.location.href = "".concat(_globalVariables.platformURL, "/stoke-post");
+  },
+  link: '/products/stoke-post'
+}];
+var investorMenuItems = [{
+  title: 'Dashboard',
+  link: '/checklist'
+}];
+var UserAvatarComponent = function UserAvatarComponent(_ref) {
+  var avatar = _ref.avatar;
+  var _useState = (0, _react.useState)(_avatarPlaceholder.default),
+    _useState2 = _slicedToArray(_useState, 2),
+    photo = _useState2[0],
+    setphoto = _useState2[1];
+  var prevProps = (0, _customHooks.usePrevious)({
+    avatar: avatar
+  });
+  (0, _react.useEffect)(function () {
+    checkUserPhoto(avatar);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (avatar != (prevProps === null || prevProps === void 0 ? void 0 : prevProps.avatar)) {
+      checkUserPhoto(avatar);
+    }
+    return function () {
+      if (prevProps != null) {
+        prevProps.avatar = avatar;
+      }
+    };
+  }, [avatar]);
+  var checkUserPhoto = function checkUserPhoto(avatar) {
+    try {
+      var http = new XMLHttpRequest();
+      http.open('HEAD', avatar, true);
+      http.send();
+      if (http.status !== 404) {
+        setphoto(avatar);
+      }
+    } catch (error) {
+      console.log('error: ', error);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Header.UserAvatar, {
+    src: photo
+  });
+};
+var RenderSubMenu = function RenderSubMenu(_ref2) {
+  var title = _ref2.title,
+    isActive = _ref2.isActive,
+    _ref2$subMenuItems = _ref2.subMenuItems,
+    subMenuItems = _ref2$subMenuItems === void 0 ? [] : _ref2$subMenuItems,
+    _ref2$onClick = _ref2.onClick,
+    onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+    _ref2$platformURL = _ref2.platformURL,
+    platformURL = _ref2$platformURL === void 0 ? '' : _ref2$platformURL;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, {
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_Header.StyledSubMenu, null, /*#__PURE__*/_react.default.createElement("a", null, title), /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
+    displayAlways: true,
+    isOpened: isActive,
+    style: {
+      right: '-2em',
+      position: 'absolute'
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+    isOpened: isActive
+  }, subMenuItems.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, {
+      key: item.name,
+      red: true
+    }, /*#__PURE__*/_react.default.createElement("a", {
+      href: platformURL + item.link
+    }, item.name));
+  })));
+};
+
+//social links to render in mobile menu
+var socialLinks = (_FooterLayout.footerGroups === null || _FooterLayout.footerGroups === void 0 ? void 0 : _FooterLayout.footerGroups.filter(function (group) {
+  return group.social;
+})[0].items) || [];
+var Header = function Header(_ref3) {
+  var _ref3$activeMenu = _ref3.activeMenu,
+    activeMenu = _ref3$activeMenu === void 0 ? null : _ref3$activeMenu,
+    _ref3$activateMenu = _ref3.activateMenu,
+    activateMenu = _ref3$activateMenu === void 0 ? function () {} : _ref3$activateMenu,
+    _ref3$user = _ref3.user,
+    user = _ref3$user === void 0 ? {} : _ref3$user,
+    _ref3$userPhoto = _ref3.userPhoto,
+    userPhoto = _ref3$userPhoto === void 0 ? '' : _ref3$userPhoto,
+    _ref3$logoutUser = _ref3.logoutUser,
+    logoutUser = _ref3$logoutUser === void 0 ? function () {} : _ref3$logoutUser,
+    _ref3$onLoginClick = _ref3.onLoginClick,
+    onLoginClick = _ref3$onLoginClick === void 0 ? function () {} : _ref3$onLoginClick,
+    _ref3$onSignUpClick = _ref3.onSignUpClick,
+    onSignUpClick = _ref3$onSignUpClick === void 0 ? function () {} : _ref3$onSignUpClick,
+    _ref3$useRelativePath = _ref3.useRelativePathForMenu,
+    useRelativePathForMenu = _ref3$useRelativePath === void 0 ? false : _ref3$useRelativePath,
+    _ref3$useRelativePath2 = _ref3.useRelativePathForUserMenu,
+    useRelativePathForUserMenu = _ref3$useRelativePath2 === void 0 ? false : _ref3$useRelativePath2,
+    _ref3$progress = _ref3.progress,
+    progress = _ref3$progress === void 0 ? null : _ref3$progress,
+    _ref3$withSidebar = _ref3.withSidebar,
+    withSidebar = _ref3$withSidebar === void 0 ? false : _ref3$withSidebar,
+    _ref3$isSidebarExpand = _ref3.isSidebarExpanded,
+    isSidebarExpanded = _ref3$isSidebarExpand === void 0 ? false : _ref3$isSidebarExpand,
+    _ref3$sidebarHandler = _ref3.sidebarHandler,
+    sidebarHandler = _ref3$sidebarHandler === void 0 ? function () {} : _ref3$sidebarHandler,
+    _ref3$signupFlow = _ref3.signupFlow,
+    signupFlow = _ref3$signupFlow === void 0 ? false : _ref3$signupFlow,
+    _ref3$noFixedPosition = _ref3.noFixedPosition,
+    noFixedPosition = _ref3$noFixedPosition === void 0 ? false : _ref3$noFixedPosition,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentActiveMenu = _useState4[0],
+    setcurrentActiveMenu = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentActiveSubMenu = _useState6[0],
+    setcurrentActiveSubMenu = _useState6[1];
+  var prevAmount = (0, _customHooks.usePrevious)({
+    activeMenu: activeMenu
+  });
+  (0, _react.useEffect)(function () {
+    //this is used when clicked outside the header
+    if ((prevAmount === null || prevAmount === void 0 ? void 0 : prevAmount.activeMenu) !== activeMenu) {
+      if (activeMenu !== null) {
+        setcurrentActiveMenu(null);
+        activateMenu();
+      }
+    }
+    return function () {
+      if (prevAmount != null) {
+        prevAmount.activeMenu = activeMenu;
+      }
+    };
+  }, [activeMenu, activateMenu]);
+  var toggleMenu = function toggleMenu(type) {
+    var mobile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (activeMenu === false) {
+      setcurrentActiveMenu(null);
+    }
+    if (window.innerWidth <= 767) {
+      if (currentActiveMenu) {
+        document.body.style.overflowY = 'unset';
+      } else {
+        document.body.style.overflowY = 'hidden';
+      }
+    }
+    if (mobile && type !== 'main') {
+      setcurrentActiveSubMenu(currentActiveSubMenu === type ? null : type);
+    } else {
+      setcurrentActiveMenu(currentActiveMenu === type ? null : type);
+    }
+    activateMenu();
+  };
+  var userType = user && user.user_type;
+  var isAdmin = userType === 'company_pa' || userType === 'company_sa' || userType === 'sa';
+
+  //currently we have sidebar only in venture dashboard
+  var isVentureDashboard = withSidebar;
+  var newPlatformUrl = useRelativePathForMenu ? '' : _globalVariables.platformURL;
+  var newPlatformUrlForUserMenu = useRelativePathForUserMenu ? '' : "https://dashboard.".concat(_globalVariables.platformDomain);
+  return /*#__PURE__*/_react.default.createElement(_Header.StyledHeader, {
+    noFixedPosition: noFixedPosition
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Wrapper, {
+    flex: withSidebar
+  }, withSidebar && /*#__PURE__*/_react.default.createElement(_Header.SidebarToggle, {
+    isSidebarExpanded: isSidebarExpanded,
+    onClick: sidebarHandler
+  }, /*#__PURE__*/_react.default.createElement(_Header.HamburgerIcon, null)), /*#__PURE__*/_react.default.createElement(_Header.HeaderInner, {
+    withSidebar: withSidebar
+  }, /*#__PURE__*/_react.default.createElement(_Header.MainNavWrap, {
+    hasProgress: progress
+  }, /*#__PURE__*/_react.default.createElement(_Header.Logo, {
+    isHighlight: currentActiveMenu === 'main'
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: _globalVariables.platformURL
+  }, /*#__PURE__*/_react.default.createElement(_SvgIcons.LogoSvg, null))), !progress && /*#__PURE__*/_react.default.createElement(_Header.HeaderMainNav, null, /*#__PURE__*/_react.default.createElement(_MenuNav.default, null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: newPlatformUrl + '/featured-assets'
+  }, "Invest")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    onClick: function onClick() {
+      return toggleMenu('products');
+    }
+  }, "Products")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    onClick: function onClick() {
+      return toggleMenu('media');
+    }
+  }, "Media")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: newPlatformUrl + '/team'
+  }, "Team")))))), progress && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, signupFlow ? /*#__PURE__*/_react.default.createElement(_StepsProgress.StepsProgressSignup, {
+    user: user
+  }) : /*#__PURE__*/_react.default.createElement(_Header.ProgressWrap, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.StepsProgressHeader, {
+    items: progress.items,
+    doneIndex: progress.doneIndex,
+    activeIndex: progress.activeIndex
+  }))), /*#__PURE__*/_react.default.createElement(_Header.QuickNavWrap, {
+    hasProgress: progress
+  }, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuToggler, {
+    isActive: currentActiveMenu === 'main',
+    onClick: function onClick() {
+      return toggleMenu('main');
+    },
+    withSidebar: withSidebar
+  }, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null)), checkTodoStatus(user) > 0 && !signupFlow && /*#__PURE__*/_react.default.createElement(_NotificationCounter.default, {
+    avatar: true,
+    MobileMenuToggler: true,
+    isActive: currentActiveMenu === 'main'
+  }, checkTodoStatus(user)), /*#__PURE__*/_react.default.createElement(_Header.HeaderQuickNav, {
+    isUserLogged: user._id
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, user._id ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, signupFlow ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: logoutUser
+  }, "Log Out") : /*#__PURE__*/_react.default.createElement(_Header.UserAccount, null, /*#__PURE__*/_react.default.createElement(_Header.UserButton, {
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, /*#__PURE__*/_react.default.createElement(UserAvatarComponent, {
+    avatar: userPhoto
+  })), checkTodoStatus(user) > 0 && /*#__PURE__*/_react.default.createElement(_NotificationCounter.default, {
+    avatar: true
+  }, checkTodoStatus(user)))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, null, /*#__PURE__*/_react.default.createElement(_Header.LoginButton, {
+    onClick: onLoginClick
+  }, "Log in")), /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
+    onClick: onSignUpClick
+  }, "Sign Up"))))), /*#__PURE__*/_react.default.createElement(_Header.MobileMenu, {
+    isActive: currentActiveMenu === 'main',
+    withSidebar: withSidebar
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuPart, {
+    withPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_MenuNav.default, {
+    mobile: true
+  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement("a", {
+    href: newPlatformUrl + '/featured-assets'
+  }, "Invest")), /*#__PURE__*/_react.default.createElement(RenderSubMenu, {
+    title: "products",
+    isActive: currentActiveSubMenu === 'products',
+    subMenuItems: productMenuItems,
+    platformURL: newPlatformUrl,
+    onClick: function onClick() {
+      toggleMenu('products', true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(RenderSubMenu, {
+    title: "media",
+    isActive: currentActiveSubMenu === 'media',
+    subMenuItems: mediaMenuItems,
+    platformURL: newPlatformUrl,
+    onClick: function onClick() {
+      toggleMenu('media', true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement("a", {
+    href: newPlatformUrl + '/team'
+  }, "Team")))))), user._id ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !signupFlow && /*#__PURE__*/_react.default.createElement(_Header.MobileMenuPart, {
+    withPadding: true,
+    flexColumnt: true,
+    borderTop: true
+  }, /*#__PURE__*/_react.default.createElement(_MenuNav.default, {
+    mobile: true
+  }, /*#__PURE__*/_react.default.createElement("ul", null, isAdmin ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isVentureDashboard ? /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement("a", {
+    href: '/settings'
+  }, "Settings")) : /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: 'https://admin.' + _globalVariables.platformDomain,
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Dashboard"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: checkTodoStatus(user) > 0 ? "".concat(newPlatformUrlForUserMenu, "/checklist") : "".concat(newPlatformUrlForUserMenu, "/"),
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Dashboard"), checkTodoStatus(user) > 0 && /*#__PURE__*/_react.default.createElement(_NotificationCounter.default, {
+    avatar: true,
+    mobileMenu: true
+  }, checkTodoStatus(user))), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "".concat(newPlatformUrlForUserMenu, "/settings/profile-and-privacy"),
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Profile and Privacy")), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "".concat(newPlatformUrlForUserMenu, "/settings/ethereum-address"),
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Ethereum Addresses")), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "".concat(newPlatformUrlForUserMenu, "/settings/liquid-address"),
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Liquid Securities Account")), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "".concat(newPlatformUrlForUserMenu, "/settings/algorand-address"),
+    onClick: function onClick() {
+      return toggleMenu('main');
+    }
+  }, "Algorand Addresses")))))), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuPart, {
+    withPadding: true,
+    flexColumnt: true,
+    noPaddingTop: !signupFlow,
+    borderTop: signupFlow
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    minWidth: "160px",
+    secondary: true,
+    onClick: function onClick() {
+      return logoutUser();
+    }
+  }, "log out"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, {
+    alignCenter: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onLoginClick,
+    secondary: true,
+    isLoginMobile: true
+  }, "Log in")), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      paddingBottom: 30
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
+    onClick: onSignUpClick,
+    isMobile: true
+  }, "Sign Up")), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement("div", null, socialLinks.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
+      key: item.name,
+      href: item.url,
+      icon: item.name,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, _FooterMenu2.socialSvg[item.name]);
+  }))))), /*#__PURE__*/_react.default.createElement(_DynamicMainMenu.default, {
+    isMenuActive: currentActiveMenu === 'products',
+    options: productMenuItems
+  }), /*#__PURE__*/_react.default.createElement(_DynamicMainMenu.default, {
+    isMenuActive: currentActiveMenu === 'media',
+    options: mediaMenuItems
+  }), /*#__PURE__*/_react.default.createElement(_MainMenu.default, {
+    isMenuActive: currentActiveMenu === 'main',
+    logoutUser: logoutUser,
+    user: user,
+    isAdmin: isAdmin,
+    notifications: checkTodoStatus(user),
+    isVentureDashboard: isVentureDashboard,
+    platformUrlForUserMenu: newPlatformUrlForUserMenu
+  }))));
+};
+exports.Header = Header;
+var checkTodoStatus = function checkTodoStatus(user) {
+  var isFromAllowedCountry = user.country && user.countryObj.isAllowed;
+  var count = 0;
+
+  // Country
+  if (isFromAllowedCountry && (user.user_type === 'investor' || user.user_type === 'investor-entity')) {
+    //wallet
+    !user.investor_algo_addresses && !user.liquid_network && count++;
+    // Risk Questionnaire
+    !user.is_risk_questionnaire_finished && count++
+    // KYC
+    ;
+    (!user.kyc_status || user.kyc_status.toUpperCase() === 'DRAFT' || user.kyc_status.toUpperCase() === 'REAPPLY') && count++;
+  }
+  return count;
+};
+Header.propTypes = {
+  progress: _propTypes.default.shape({
+    items: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+    doneIndex: _propTypes.default.number,
+    activeIndex: _propTypes.default.number
+  }),
+  signupFlow: _propTypes.default.bool,
+  loginHandler: _propTypes.default.func,
+  signupHandler: _propTypes.default.func,
+  activeMenu: _propTypes.default.any,
+  activateMenu: _propTypes.default.func,
+  user: _propTypes.default.object,
+  userPhoto: _propTypes.default.string,
+  logoutUser: _propTypes.default.func,
+  onLoginClick: _propTypes.default.func,
+  onSignUpClick: _propTypes.default.func,
+  useRelativePathForMenu: _propTypes.default.bool,
+  useRelativePathForUserMenu: _propTypes.default.bool,
+  withSidebar: _propTypes.default.bool,
+  isSidebarExpanded: _propTypes.default.bool,
+  sidebarHandler: _propTypes.default.func,
+  noFixedPosition: _propTypes.default.bool
+};
+Header.defaultProps = {
+  progress: null,
+  signupFlow: false,
+  loginHandler: function loginHandler() {},
+  signupHandler: function signupHandler() {}
+};
+var _default = Header;
+exports.default = _default;

package/dist/components/Header/Header.stories.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderWitouthUser = exports.HeaderWithUser = exports.HeaderWithSidebar = exports.HeaderWithProgressSignup = exports.HeaderWithProgress = exports.HeaderWithAdminUser = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Header = _interopRequireDefault(require("./Header"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// import Avatar from '../../static/images/avatar.png'
+var _default = {
+  title: 'Components Library/Header',
+  component: _Header.default,
+  argTypes: {
+    user: {
+      name: '',
+      country: '',
+      kyc_status: '',
+      KYCDocuments: '',
+      entity_name: '',
+      investor_eth_addresses: [],
+      is_risk_questionnaire_finished: true
+    },
+    progress: {
+      type: 'object',
+      defaultValue: null
+    },
+    signupFlow: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    withSidebar: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    isSidebarExpanded: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    loginHandler: {
+      type: 'function',
+      action: 'loginHandler'
+    },
+    signupHandler: {
+      type: 'function',
+      action: 'signupHandler'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Header.default, args);
+};
+var userDev = {
+  _id: '61851acd5b9a890013297b12',
+  email: 'user-dev@email.com',
+  user_type: 'investor',
+  name: 'bilal',
+  lastname: 'dev',
+  username: 'user-dev',
+  entity_name: '',
+  active: true,
+  country: 'Germany',
+  is_risk_questionnaire_finished: true,
+  kyc_status: 'Accepted',
+  investor_algo_addresses: [{
+    name: 'another test',
+    address: 'TVNC3QHY5LXKBMX7RGJG3B25EJPW73V5WMMEMUB33V2HEPEA2H77UPOYTQ',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'my algo test',
+    address: 'YFQD2RZIIZQSO67F6MG3DJVXLMF2QU4EKGBPVXVIF3XTLKGWUZ36WMG56A',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test algosigner',
+    address: 'Y4UGMCSV3B43Y7QAM2VUVPETDDO5JVHDRB3ZC5MBF2VTUTCP4X437A65JU',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test new address',
+    address: 'B36KBEDYKBUSEMNRITZFFE7VINEPMP5MJTNUCRM5S5AP6GNWMWW4B5PEQI',
+    whitelistedAssets: ['20918100', '92363258']
+  }, {
+    address: 'E3Q6B5Q7JHFCEWBGGXJGEMXVAL6MSJBUHCGURZRMASRTJFDD6RQTJHPF4A',
+    whitelistedAssets: ['20918100', '20013569']
+  }, {
+    name: 'test 30/05',
+    address: 'RTQWXHRWZCBT5FF474T4DTL3VRVHERY3Q6LWLMPP24IXNOYIXBDQXJ2Z6M',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'test info 01/06',
+    address: 'U4EIZEMPRGC77P6HJSFCLWYE4NUMNILU5DBZCKV44QMJ3TQOADRETVVAZU',
+    whitelistedAssets: ['20918100', '92363258']
+  }],
+  liquid_network: {
+    GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    dt: '2021-11-19T16:19:33.390Z',
+    '2812e39a-ad94-4368-9db4-9d98c1c00f38': {
+      id: 6020,
+      GAID: 'GA2wpGUWe8uDz9VEdNXJ5v17UwD25f',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [3],
+      creator: 22,
+      whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f']
+    },
+    whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr'],
+    '35c3c8ed-59a3-4a87-9612-b48236aeab3b': {
+      id: 273,
+      GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [24],
+      creator: 62,
+      whitelisted_gaids: ['GA2skwb5v5nKaaAKNd61knuRJC47Jr']
+    }
+  },
+  pass_reset: '',
+  taxId: '4355',
+  countryObj: {
+    _id: '630e0361b8d1fb0007929bc4',
+    name: 'Germany',
+    ISO2: 'DE',
+    ISO3: 'DEU',
+    isAllowed: true,
+    SEPA: true,
+    'infinite-fleet': true,
+    'la-boulangerie': true
+  }
+};
+var HeaderWithUser = Template.bind({});
+exports.HeaderWithUser = HeaderWithUser;
+HeaderWithUser.args = {
+  user: userDev
+};
+var HeaderWithAdminUser = Template.bind({});
+exports.HeaderWithAdminUser = HeaderWithAdminUser;
+HeaderWithAdminUser.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    user_type: 'company_sa'
+  })
+};
+var HeaderWitouthUser = Template.bind({});
+exports.HeaderWitouthUser = HeaderWitouthUser;
+HeaderWitouthUser.args = {
+  user: {}
+};
+var HeaderWithProgress = Template.bind({});
+exports.HeaderWithProgress = HeaderWithProgress;
+HeaderWithProgress.args = {
+  user: userDev,
+  progress: {
+    items: [{
+      id: 'select-address',
+      handleClick: function handleClick() {}
+    }, {
+      id: 'order-tokens',
+      handleClick: function handleClick() {}
+    }, {
+      id: 'confirm',
+      handleClick: function handleClick() {}
+    }],
+    doneIndex: 1,
+    activeIndex: 2
+  }
+};
+var HeaderWithProgressSignup = Template.bind({});
+exports.HeaderWithProgressSignup = HeaderWithProgressSignup;
+HeaderWithProgressSignup.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    kyc_status: 'Draft'
+  }),
+  progress: {},
+  signupFlow: true
+};
+var HeaderWithSidebar = Template.bind({});
+exports.HeaderWithSidebar = HeaderWithSidebar;
+HeaderWithSidebar.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    user_type: 'company_sa'
+  }),
+  // progress: {},
+  withSidebar: true,
+  isSidebarExpanded: true
+};