make logo clickable and use custom urls for login/signup on self service app

Author: ThomasKranitsas

src/components/NavBar/index.jsx

@@ -17,12 +17,19 @@ 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,
+  getSelfServiceSignupUrl,
+} from "../../utils";
+import { BUTTON_TYPE } from "constants/";
 import "./styles.css";
 import { useMediaQuery } from "react-responsive";
 import NotificationsMenu from "../NotificationsMenu";
+import Button from "../Button";
 
 const NavBar = ({ hideSwitchTools, profileUrl }) => {
+  const [isSelfService, setIsSelfService] = useState(false);
   // all menu options
   const menu = useSelector((state) => state.menu.categories);
   // flat list of all apps
@@ -36,14 +43,17 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
 
   const routerLocation = useLocation();
 
-  const loginUrl = getLoginUrl();
+  const loginUrl = isSelfService ? getSelfServiceLoginUrl() : getLoginUrl();
+  const signupUrl = isSelfService ? getSelfServiceSignupUrl() : "";
 
   // Check app title with route activated
   useEffect(() => {
     const activeApp = apps.find(
       (f) => routerLocation.pathname.indexOf(f.path) !== -1
     );
     setActiveApp(activeApp);
+
+    setIsSelfService(routerLocation.pathname.indexOf("/self-service") !== -1);
   }, [routerLocation, apps]);
 
   // Change micro-app callback
@@ -54,13 +64,14 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
     [setActiveApp]
   );
 
-  const renderTopcoderLogo = hideSwitchTools ? (
-    <img src={TCLogo} alt="Topcoder Logo" />
-  ) : (
-    <Link to="/">
+  const renderTopcoderLogo =
+    hideSwitchTools && !isSelfService ? (
       <img src={TCLogo} alt="Topcoder Logo" />
-    </Link>
-  );
+    ) : (
+      <Link to={isSelfService ? "/self-service" : "/"}>
+        <img src={TCLogo} alt="Topcoder Logo" />
+      </Link>
+    );
 
   return (
     <div className="navbar">
@@ -120,7 +131,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
               (auth.tokenV3 ? (
                 auth.profile && (
                   <Fragment>
-                    <NotificationsMenu />
+                    {!isSelfService && <NotificationsMenu />}
                     <UserMenu
                       profileUrl={profileUrl}
                       profile={auth.profile}
@@ -129,9 +140,20 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
                   </Fragment>
                 )
               ) : (
-                <a href={loginUrl} className="navbar-login">
-                  Login
-                </a>
+                <Fragment>
+                  <a href={loginUrl} className="navbar-login">
+                    Login
+                  </a>
+                  {isSelfService && (
+                    <Button
+                      href={signupUrl}
+                      className="navbar-signup"
+                      type={BUTTON_TYPE.SECONDARY}
+                    >
+                      SIGN UP
+                    </Button>
+                  )}
+                </Fragment>
               ))}
           </Fragment>
         )}

src/components/NavBar/styles.css

@@ -58,3 +58,11 @@
   text-decoration: none;
   text-transform: uppercase;
 }
+
+.navbar-right .navbar-signup {
+  font-size: 14px;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  margin-left: 16px;
+}

src/utils/index.js

@@ -35,7 +35,7 @@ export const getBusinessLoginUrl = () =>
 export const getSelfServiceLoginUrl = () =>
   `${config.URL.AUTH}?retUrl=${encodeURIComponent(
     `${window.location.origin}/self-service`
-  )}&regSource=tcBusiness&mode=login`;
+  )}&regSource=selfService&mode=login`;
 
 /**
  * Returns Sign up URL for self service app.
@@ -45,7 +45,7 @@ export const getSelfServiceLoginUrl = () =>
 export const getSelfServiceSignupUrl = () =>
   `${config.URL.AUTH}?retUrl=${encodeURIComponent(
     `${window.location.origin}/self-service`
-  )}&regSource=tcBusiness&mode=signUp`;
+  )}&regSource=selfService&mode=signUp`;
 
 /**
  * Logout user from Topcoder