Self Service homepage, profile, stripe integration

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://local.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

@@ -5,6 +5,7 @@ import React, { useState, useCallback, useMemo, useEffect } from "react";
 import _ from "lodash";
 import MainMenu from "./components/MainMenu";
 import NavBar from "./components/NavBar";
+import SelfServiceNavbar from "./components/SelfService/NavBar";
 import { navigate, Router, useLocation } from "@reach/router";
 import { useSelector } from "react-redux";
 import useMatchSomeRoute from "./hooks/useMatchSomeRoute";
@@ -54,7 +55,15 @@ const App = () => {
 
   return (
     <>
-      <NavBar hideSwitchTools={isNavigationDisabled} />
+      <Router>
+        <SelfServiceNavbar path="/self-service/*" />
+        <NavBar
+          default
+          noThrow
+          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

@@ -10,20 +10,17 @@ 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, getSelfServiceLoginUrl } from "../../utils";
+import { getLoginUrl } 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
@@ -39,9 +36,7 @@ const NavBar = ({ hideSwitchTools }) => {
 
   const routerLocation = useLocation();
 
-  const loginUrl = routerLocation.pathname.startsWith("/self-service/wizard")
-    ? getSelfServiceLoginUrl()
-    : getLoginUrl();
+  const loginUrl = getLoginUrl();
 
   // Check app title with route activated
   useEffect(() => {
@@ -68,7 +63,7 @@ const NavBar = ({ hideSwitchTools }) => {
   );
 
   return (
-    <div className={cn("navbar", { "self-service-navbar": hideSwitchTools })}>
+    <div className="navbar">
       <div className="navbar-left">
         {isMobile ? (
           hideSwitchTools ? null : (
@@ -97,21 +92,15 @@ const NavBar = ({ hideSwitchTools }) => {
           <Fragment>
             {auth.isInitialized &&
               (auth.tokenV3 ? (
-                auth.profile &&
-                (hideSwitchTools ? (
-                  <Fragment>
-                    <SelfServiceNotifications />
-                    <SelfServiceUserMenu profile={auth.profile} />
-                  </Fragment>
-                ) : (
+                auth.profile && (
                   <Fragment>
                     <NotificationsMenu />
                     <UserMenu
                       profile={auth.profile}
                       hideSwitchTools={hideSwitchTools}
                     />
                   </Fragment>
-                ))
+                )
               ) : (
                 <a href={loginUrl} className="navbar-login">
                   Login
@@ -128,21 +117,15 @@ const NavBar = ({ hideSwitchTools }) => {
             )}
             {auth.isInitialized &&
               (auth.tokenV3 ? (
-                auth.profile &&
-                (hideSwitchTools ? (
-                  <Fragment>
-                    <SelfServiceNotifications />
-                    <SelfServiceUserMenu profile={auth.profile} />
-                  </Fragment>
-                ) : (
+                auth.profile && (
                   <Fragment>
                     <NotificationsMenu />
                     <UserMenu
                       profile={auth.profile}
                       hideSwitchTools={hideSwitchTools}
                     />
                   </Fragment>
-                ))
+                )
               ) : (
                 <a href={loginUrl} className="navbar-login">
                   Login

src/components/NavBar/styles.css

@@ -10,7 +10,7 @@
   z-index: 1;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
 }
-.navbar.self-service-navbar {
+.navbar {
   padding: 0 24px;
   background-color: #0C0C0C;
 }
@@ -30,25 +30,6 @@
   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;
@@ -57,9 +38,6 @@
 .navbar-left .navbar-divider {
   margin: 0 30px;
 }
-.self-service-navbar .navbar-left .navbar-divider {
-  margin: 0 23px;
-}
 .navbar-center {
   left: 50%;
   position: absolute;