final fix for Topcoder Self Service Dashboard MFE

src/components/NavBar/index.jsx

@@ -10,17 +10,20 @@ import React, {
   useEffect,
   useMemo,
 } from "react";
+import cn from "classnames";
 import _ from "lodash";
 import PropTypes from "prop-types";
 import UserMenu from "../UserMenu";
 import AllAppsMenu from "../AllAppsMenu";
 import { useSelector } from "react-redux";
 import { Link, useLocation } from "@reach/router";
 import TCLogo from "../../assets/images/tc-logo.svg";
-import { getLoginUrl } from "../../utils";
+import { getLoginUrl, getSelfServiceLoginUrl } from "../../utils";
 import "./styles.css";
 import { useMediaQuery } from "react-responsive";
 import NotificationsMenu from "../NotificationsMenu";
+import SelfServiceNotifications from "../SelfServiceNotificationsMenu";
+import SelfServiceUserMenu from "../SelfServiceUserMenu";
 
 const NavBar = ({ hideSwitchTools }) => {
   // all menu options
@@ -35,13 +38,18 @@ const NavBar = ({ hideSwitchTools }) => {
   });
 
   const routerLocation = useLocation();
+
+  const loginUrl = routerLocation.pathname.startsWith("/self-service/wizard")
+    ? getSelfServiceLoginUrl()
+    : getLoginUrl();
+
   // Check app title with route activated
   useEffect(() => {
     const activeApp = apps.find(
       (f) => routerLocation.pathname.indexOf(f.path) !== -1
     );
     setActiveApp(activeApp);
-  }, [routerLocation]);
+  }, [routerLocation, apps]);
 
   // Change micro-app callback
   const changeApp = useCallback(
@@ -60,7 +68,7 @@ const NavBar = ({ hideSwitchTools }) => {
   );
 
   return (
-    <div className="navbar">
+    <div className={cn("navbar", { "self-service-navbar": hideSwitchTools })}>
       <div className="navbar-left">
         {isMobile ? (
           hideSwitchTools ? null : (
@@ -89,38 +97,54 @@ const NavBar = ({ hideSwitchTools }) => {
           <Fragment>
             {auth.isInitialized &&
               (auth.tokenV3 ? (
-                auth.profile && (
+                auth.profile &&
+                (hideSwitchTools ? (
+                  <Fragment>
+                    <SelfServiceNotifications />
+                    <SelfServiceUserMenu profile={auth.profile} />
+                  </Fragment>
+                ) : (
                   <Fragment>
-                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    <NotificationsMenu />
                     <UserMenu
                       profile={auth.profile}
                       hideSwitchTools={hideSwitchTools}
                     />
                   </Fragment>
-                )
+                ))
               ) : (
-                <a href={getLoginUrl()} className="navbar-login">
+                <a href={loginUrl} className="navbar-login">
                   Login
                 </a>
               ))}
           </Fragment>
         ) : (
           <Fragment>
-            {hideSwitchTools ? null : <AllAppsMenu appChange={changeApp} />}
-            <div className="navbar-divider"></div>
+            {hideSwitchTools ? null : (
+              <Fragment>
+                <AllAppsMenu appChange={changeApp} />
+                <div className="navbar-divider" />
+              </Fragment>
+            )}
             {auth.isInitialized &&
               (auth.tokenV3 ? (
-                auth.profile && (
+                auth.profile &&
+                (hideSwitchTools ? (
+                  <Fragment>
+                    <SelfServiceNotifications />
+                    <SelfServiceUserMenu profile={auth.profile} />
+                  </Fragment>
+                ) : (
                   <Fragment>
-                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    <NotificationsMenu />
                     <UserMenu
                       profile={auth.profile}
                       hideSwitchTools={hideSwitchTools}
                     />
                   </Fragment>
-                )
+                ))
               ) : (
-                <a href={getLoginUrl()} className="navbar-login">
+                <a href={loginUrl} className="navbar-login">
                   Login
                 </a>
               ))}

src/components/NavBar/styles.css

@@ -10,6 +10,10 @@
   z-index: 1;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
 }
+.navbar.self-service-navbar {
+  padding: 0 24px;
+  background-color: #0C0C0C;
+}
 
 .navbar-left {
   display: flex;
@@ -26,6 +30,25 @@
   text-align: left;
   color: #fff;
 }
+.self-service-navbar .navbar-app-title {
+  position: relative;
+  font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 18px;
+}
+.self-service-navbar .navbar-app-title::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 8.5px;
+  top: 100%;
+  right: 8.5px;
+  margin: 10px 0 0;
+  border-radius: 2px;
+  height: 2px;
+  background-color: #0AB88A;
+}
 .navbar-divider {
   width: 1px;
   height: 30px;
@@ -34,6 +57,9 @@
 .navbar-left .navbar-divider {
   margin: 0 30px;
 }
+.self-service-navbar .navbar-left .navbar-divider {
+  margin: 0 23px;
+}
 .navbar-center {
   left: 50%;
   position: absolute;

src/components/SelfServiceNotificationsMenu/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Bell from "../../assets/icons/ui-bell.svg";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays self service notification bell.
+ *
+ * @returns {JSX.Element}
+ */
+const SelfServiceNotifications = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.button}>
+        <Bell className={styles.bell} />
+        <div className={styles.count}>0</div>
+      </div>
+    </div>
+  );
+};
+
+export default SelfServiceNotifications;

src/components/SelfServiceNotificationsMenu/styles.module.scss

@@ -0,0 +1,38 @@
+.container {
+  position: relative;
+  display: flex;
+  margin-right: 16px;
+}
+
+.button {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.bell {
+  display: block;
+  width: 16px;
+  height: auto;
+
+  path {
+    fill: #fff;
+  }
+}
+
+.count {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: 8px;
+  width: 16px;
+  height: 16px;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 8px;
+  line-height: 16px;
+  text-align: center;
+  background-color: #E90C5A;
+  color: #fff;
+}

src/components/SelfServiceUserMenu/index.jsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import OutsideClickHandler from "react-outside-click-handler";
+import { logout, getLogoutUrl } from "utils";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays user profile icon.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const SelfServiceUserMenu = ({ profile }) => {
+  const [isOpenMenu, setIsOpenMenu] = useState(false);
+
+  const { firstName, lastName } = profile;
+
+  const onClickBtn = useCallback(() => {
+    setIsOpenMenu((value) => !value);
+  }, []);
+
+  const onClickOutsideMenu = useCallback(() => {
+    setIsOpenMenu(false);
+  }, []);
+
+  const onClickLogout = useCallback((event) => {
+    event.preventDefault();
+    logout();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <OutsideClickHandler onOutsideClick={onClickOutsideMenu}>
+        <div
+          className={styles.button}
+          onClick={onClickBtn}
+          role="button"
+          tabIndex={0}
+        >
+          {firstName.charAt(0)}
+          {lastName.charAt(0)}
+        </div>
+        {isOpenMenu && (
+          <div className={styles.menu}>
+            <a href={getLogoutUrl()} onClick={onClickLogout}>
+              Log Out
+            </a>
+          </div>
+        )}
+      </OutsideClickHandler>
+    </div>
+  );
+};
+
+SelfServiceUserMenu.propTypes = {
+  profile: PT.shape({
+    firstName: PT.string.isRequired,
+    lastName: PT.string.isRequired,
+  }).isRequired,
+};
+
+export default SelfServiceUserMenu;

src/components/SelfServiceUserMenu/styles.module.scss

@@ -0,0 +1,34 @@
+.container {
+  position: relative;
+  display: flex;
+}
+
+.button {
+  border: 2px solid #fff;
+  border-radius: 16px;
+  width: 32px;
+  height: 32px;
+  font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 28px;
+  text-align: center;
+  background: linear-gradient(90deg, #16679A 0%, #2C95D7 100%);
+  color: #fff;
+  user-select: none;
+  cursor: pointer;
+}
+
+.menu {
+  z-index: 3;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  border: 1px solid #555;
+  border-radius: 8px;
+  padding: 5px 12px;
+  white-space: nowrap;
+  background-color: #fff;
+  user-select: none;
+}

src/constants/apps.js

@@ -60,6 +60,17 @@ export const APP_CATEGORIES = [
       },
     ],
   },
+  {
+    category: "Self Service",
+    apps: [
+      {
+        title: "Work",
+        icon: earnIcon,
+        path: "/self-service",
+        menu: [],
+      },
+    ],
+  },
   {
     category: "Do",
     apps: [

src/reducers/auth.js

@@ -30,10 +30,12 @@ const authReducer = (state = initialState, action) => {
         isProfileLoaded: true,
       };
     case ACTIONS.AUTH.SET_PROFILE_PHOTO:
-      return state.profile ? ({
-        ...state,
-        profile: {...state.profile, photoURL: action.payload},
-      }) : state;
+      return state.profile
+        ? {
+            ...state,
+            profile: { ...state.profile, photoURL: action.payload },
+          }
+        : state;
     case ACTIONS.AUTH.SET_INITIALIZED:
       return {
         ...state,

src/utils/index.js

@@ -26,6 +26,17 @@ export const getBusinessLoginUrl = () =>
     window.location.href.match(/[^?]*/)[0]
   )}`;
 
+/**
+ * Returns login URL using which the user should be redirected to self service
+ * dashboard page after login.
+ *
+ * @returns {string}
+ */
+export const getSelfServiceLoginUrl = () =>
+  `${config.URL.AUTH}?retUrl=${encodeURIComponent(
+    `${window.location.origin}/self-service`
+  )}`;
+
 /**
  * Logout user from Topcoder
  */