Release self-service on prod

config/dev.js

@@ -5,6 +5,7 @@ module.exports = {
     TC_NOTIFICATION_URL: "https://api.topcoder-dev.com/v5/notifications",
     CONNECT_DOMAIN: "https://connect.topcoder-dev.com",
     COMMUNITY_DOMAIN: "https://www.topcoder-dev.com",
+    PLATFORM_DOMAIN: "https://platform.topcoder-dev.com",
     TAAS_APP: "https://platform.topcoder-dev.com/taas/myteams",
   },
   API: {

config/prod.js

@@ -5,6 +5,7 @@ module.exports = {
     TC_NOTIFICATION_URL: "https://api.topcoder.com/v5/notifications",
     CONNECT_DOMAIN: "https://connect.topcoder.com",
     COMMUNITY_DOMAIN: "https://www.topcoder.com",
+    PLATFORM_DOMAIN: "https://platform.topcoder.com",
     TAAS_APP: "https://platform.topcoder.com/taas/myteams",
   },
   API: {

src/App.jsx

@@ -54,7 +54,19 @@ const App = () => {
 
   return (
     <>
-      <NavBar hideSwitchTools={isNavigationDisabled} />
+      <Router>
+        <NavBar
+          default
+          noThrow
+          profileUrl={
+            location.pathname.includes("/self-service")
+              ? "/self-service/profile/"
+              : `/profile/${_.get(auth, "profile.handle", "")}`
+          }
+          hideSwitchTools={isNavigationDisabled}
+          path="/*"
+        />
+      </Router>
       {!isSideBarDisabled && (
         <div className="main-menu-wrapper">
           <Router>

src/components/Button/index.jsx

@@ -0,0 +1,84 @@
+/**
+ * Button
+ *
+ * Supports:
+ * - size - see BUTTON_SIZE values
+ * - type - see BUTTON_TYPE values
+ *
+ * If `routeTo` is set, then button works as React Router Link
+ *
+ * if `href` is set, then button is rendered as a link `<a>`
+ */
+import { Link } from "@reach/router";
+import cn from "classnames";
+import { BUTTON_SIZE, BUTTON_TYPE } from "constants";
+import PT from "prop-types";
+import React from "react";
+import styles from "./styles.module.scss";
+
+const Button = ({
+  children,
+  size = BUTTON_SIZE.SMALL,
+  type = BUTTON_TYPE.PRIMARY,
+  onClick,
+  className,
+  innerRef,
+  disabled,
+  routeTo,
+  href,
+  target,
+  isSubmit,
+}) => {
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={target}
+        onClick={onClick}
+        className={cn(
+          styles.button,
+          styles[`type-${type}`],
+          styles[`size-${size}`],
+          className
+        )}
+        ref={innerRef}
+      >
+        {children}
+      </a>
+    );
+  } else {
+    const button = (
+      <button
+        onClick={onClick}
+        className={cn(
+          styles.button,
+          styles[`type-${type}`],
+          styles[`size-${size}`],
+          className
+        )}
+        ref={innerRef}
+        disabled={disabled}
+        type={isSubmit ? "submit" : "button"}
+      >
+        {children}
+      </button>
+    );
+
+    return routeTo ? <Link to={routeTo}>{button}</Link> : button;
+  }
+};
+
+Button.propTypes = {
+  children: PT.node,
+  size: PT.oneOf(Object.values(BUTTON_SIZE)),
+  type: PT.oneOf(Object.values(BUTTON_TYPE)),
+  onClick: PT.func,
+  className: PT.string,
+  innerRef: PT.func,
+  disabled: PT.bool,
+  routeTo: PT.string,
+  href: PT.string,
+  isSubmit: PT.bool,
+};
+
+export default Button;

src/components/Button/styles.module.scss

@@ -0,0 +1,115 @@
+@import "styles/variables";
+@import "styles/mixins";
+
+.button {
+  @include font-roboto;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  outline: none;
+  white-space: nowrap;
+
+  &[disabled] {
+    cursor: default;
+  }
+}
+
+.size-medium {
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 38px;
+  height: 40px;
+  padding: 0 19px;
+  text-transform: uppercase;
+}
+
+.size-small {
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  height: 30px;
+  padding: 0 14px;
+  text-transform: uppercase;
+}
+
+.size-tiny {
+  border-radius: 12px;
+  padding: 6px 15px;
+  height: 24px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
+.type-primary {
+  border: 1px solid $green1;
+  background-color: $green1;
+  color: #fff;
+}
+
+.type-warning {
+  border: 1px solid #ef476f;
+  background-color: #ef476f;
+  color: #fff;
+}
+
+.type-secondary {
+  background-color: #fff;
+  border: 1px solid $green1;
+  color: #229174;
+}
+
+.type-secondary[disabled] {
+  border-color: #b5b5b5;
+  color: #b5b5b5;
+}
+
+.type-rounded {
+  position: relative;
+  width: 22px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid $green1;
+  color: #229174;
+
+  svg {
+    position: absolute;
+    left: 37%;
+  }
+}
+
+.type-text {
+  background-color: #fff;
+  border: 1px solid #fff;
+  color: $green1;
+}
+
+.type-text-inverted {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: #fff;
+}
+
+.type-rounded[disabled] {
+  border-radius: 50%;
+  border-color: #b5b5b5;
+  color: #b5b5b5;
+}
+
+.type-primary[disabled],
+.type-warning[disabled] {
+  background-color: #b5b5b5;
+  border-color: #b5b5b5;
+}

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 }) => {
+const NavBar = ({ hideSwitchTools, profileUrl }) => {
+  const [isSelfService, setIsSelfService] = useState(false);
   // all menu options
   const menu = useSelector((state) => state.menu.categories);
   // flat list of all apps
@@ -35,13 +42,19 @@ const NavBar = ({ hideSwitchTools }) => {
   });
 
   const routerLocation = useLocation();
+
+  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);
-  }, [routerLocation]);
+
+    setIsSelfService(routerLocation.pathname.indexOf("/self-service") !== -1);
+  }, [routerLocation, apps]);
 
   // Change micro-app callback
   const changeApp = useCallback(
@@ -51,13 +64,14 @@ const NavBar = ({ hideSwitchTools }) => {
     [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">
@@ -91,38 +105,55 @@ const NavBar = ({ hideSwitchTools }) => {
               (auth.tokenV3 ? (
                 auth.profile && (
                   <Fragment>
-                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    <NotificationsMenu />
                     <UserMenu
+                      profileUrl={profileUrl}
                       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 && (
                   <Fragment>
-                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    {!isSelfService && <NotificationsMenu />}
                     <UserMenu
+                      profileUrl={profileUrl}
                       profile={auth.profile}
                       hideSwitchTools={hideSwitchTools}
                     />
                   </Fragment>
                 )
               ) : (
-                <a href={getLoginUrl()} 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>
         )}
@@ -133,9 +164,11 @@ const NavBar = ({ hideSwitchTools }) => {
 
 NavBar.defaultProps = {
   hideSwitchTools: false,
+  profileUrl: '/profile/',
 };
 
 NavBar.propTypes = {
+  profileUrl: PropTypes.string,
   hideSwitchTools: PropTypes.boolean,
 };