@@ -91,38 +105,55 @@ const NavBar = ({ hideSwitchTools }) => {
(auth.tokenV3 ? (
auth.profile && (
- {hideSwitchTools ? null : }
+
)
) : (
-
+
Login
))}
) : (
- {hideSwitchTools ? null : }
-
+ {hideSwitchTools ? null : (
+
+
+
+
+ )}
{auth.isInitialized &&
(auth.tokenV3 ? (
auth.profile && (
- {hideSwitchTools ? null : }
+ {!isSelfService && }
)
) : (
-
- Login
-
+
+
+ Login
+
+ {isSelfService && (
+
+ )}
+
))}
)}
@@ -133,9 +164,11 @@ const NavBar = ({ hideSwitchTools }) => {
NavBar.defaultProps = {
hideSwitchTools: false,
+ profileUrl: '/profile/',
};
NavBar.propTypes = {
+ profileUrl: PropTypes.string,
hideSwitchTools: PropTypes.boolean,
};
diff --git a/src/components/NavBar/styles.css b/src/components/NavBar/styles.css
index 482709f..b1e4acb 100644
--- a/src/components/NavBar/styles.css
+++ b/src/components/NavBar/styles.css
@@ -10,6 +10,10 @@
z-index: 1;
font-family: "Roboto", Arial, Helvetica, sans-serif;
}
+.navbar {
+ padding: 0 24px;
+ background-color: #0C0C0C;
+}
.navbar-left {
display: flex;
@@ -54,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;
+}
diff --git a/src/components/UserMenu/index.jsx b/src/components/UserMenu/index.jsx
index e777b41..c3765fa 100644
--- a/src/components/UserMenu/index.jsx
+++ b/src/components/UserMenu/index.jsx
@@ -13,7 +13,7 @@ import { logout, getLogoutUrl } from "../../utils";
import "./styles.css";
import { useMediaQuery } from "react-responsive";
-const UserMenu = ({ profile, hideSwitchTools }) => {
+const UserMenu = ({ profile, profileUrl }) => {
const [isOpenMenu, setIsOpenMenu] = useState(false);
const closeMenu = useCallback(() => {
@@ -64,16 +64,14 @@ const UserMenu = ({ profile, hideSwitchTools }) => {
- {hideSwitchTools ? null : (
- -
-
- Profile
-
-
- )}
+ -
+
+ Profile
+
+
-
Log Out
@@ -90,11 +88,11 @@ const UserMenu = ({ profile, hideSwitchTools }) => {
};
UserMenu.defaultProps = {
- hideSwitchTools: false,
+ profileUrl: '/profile',
};
UserMenu.propTypes = {
- hideSwitchTools: PropTypes.boolean,
+ profileUrl: PropTypes.string,
};
export default UserMenu;
diff --git a/src/constants/apps.js b/src/constants/apps.js
index 1d377dc..a83cc68 100644
--- a/src/constants/apps.js
+++ b/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: [
diff --git a/src/constants/index.js b/src/constants/index.js
index be97d87..fc846e0 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,8 +1,10 @@
/**
* Application Constants
*/
+/* global process */
import { APP_CATEGORIES } from "./apps";
export { APP_CATEGORIES };
+import config from "../../config";
export const ACTIONS = {
AUTH: {
@@ -20,3 +22,29 @@ export const ACTIONS = {
ENABLE_NAVIGATION_FOR_ROUTE: "ENABLE_NAVIGATION_FOR_ROUTE",
},
};
+
+/**
+ * Supported Button Sizes
+ */
+export const BUTTON_SIZE = {
+ TINY: "tiny",
+ SMALL: "small",
+ MEDIUM: "medium",
+};
+
+/**
+ * Supported Button Types
+ */
+export const BUTTON_TYPE = {
+ PRIMARY: "primary",
+ SECONDARY: "secondary",
+ WARNING: "warning",
+ ROUNDED: "rounded",
+ TEXT: "text",
+ TEXT_INVERTED: "text-inverted",
+};
+
+export const PLATFORM_DOMAIN =
+ process.env.APPENV === "local"
+ ? window.location.origin
+ : config.URL.PLATFORM_DOMAIN;
diff --git a/src/reducers/auth.js b/src/reducers/auth.js
index 65c1d84..0ef6930 100644
--- a/src/reducers/auth.js
+++ b/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,
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 0000000..bbfe9c4
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,25 @@
+// reusable mixins
+
+@mixin font-roboto {
+ font-family: "Roboto", Arial, Helvetica, sans-serif;
+}
+
+@mixin font-barlow-condensed {
+ font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;
+}
+
+@mixin font-barlow {
+ font-family: "Barlow", Arial, Helvetica, sans-serif;
+}
+
+@mixin mobile {
+ @media (max-width: 1199px) {
+ @content;
+ }
+}
+
+@mixin desktop {
+ @media (min-width: 1200px) {
+ @content;
+ }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..ceac08d
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,23 @@
+$green1: #137d60;
+$blue1: #2f757e;
+$blue2: #eaf6fd;
+$grey-bg: #f4f4f4;
+$teal: #227681;
+$grey-text: #2a2a2a;
+$black: #000000;
+$divider-color: #e9e9e9;
+$orange-25: #fff0ce;
+$red-120: #be405e;
+$purple-100: #9d41c9;
+$gray-10: #e9e9e9;
+$gray-80: #555555;
+$gui-kit-level-2: #0ab88a;
+$gui-kit-level-5: #ef476f;
+$gui-kit-gray-90: #2a2a2a;
+$tc-white: #fff;
+$gui-kit-gray-30: #aaa;
+$link-blue: #2e55b9;
+$green2: #06d6a0;
+
+$error-color: $gui-kit-level-5;
+$success-color: $gui-kit-level-2;
diff --git a/src/topcoder-micro-frontends-navbar-app.js b/src/topcoder-micro-frontends-navbar-app.js
index 31fc2ce..a9e02f8 100644
--- a/src/topcoder-micro-frontends-navbar-app.js
+++ b/src/topcoder-micro-frontends-navbar-app.js
@@ -20,6 +20,7 @@ import {
setNotificationPlatform,
disableNavigationForRoute,
enableNavigationForRoute,
+ updateUserProfile,
} from "./utils/exports";
import { login, businessLogin, logout } from "./utils";
@@ -51,5 +52,6 @@ export {
setNotificationPlatform,
disableNavigationForRoute,
enableNavigationForRoute,
+ updateUserProfile,
PLATFORM,
};
diff --git a/src/utils/exports.js b/src/utils/exports.js
index a5fd63d..881efc8 100644
--- a/src/utils/exports.js
+++ b/src/utils/exports.js
@@ -6,6 +6,7 @@
import _ from "lodash";
import { bindActionCreators } from "redux";
import store from "../store";
+import actions from "../actions";
import menuActions from "../actions/menu";
import authActions from "../actions/auth";
import notificationActions from "../actions/notifications";
@@ -77,3 +78,18 @@ export const getAuthUserTokens = () => {
});
}
};
+
+/**
+ * Updates user profile
+ */
+export const updateUserProfile = (firstName, lastName) => {
+ const { auth } = store.getState();
+
+ const newProfile = {
+ ...auth.profile,
+ firstName,
+ lastName,
+ };
+
+ store.dispatch(actions.auth.loadProfile(newProfile || null));
+};
diff --git a/src/utils/index.js b/src/utils/index.js
index 35ab947..1e7ebf1 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -26,6 +26,27 @@ 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`
+ )}®Source=selfService&mode=login`;
+
+/**
+ * Returns Sign up URL for self service app.
+ *
+ * @returns {string}
+ */
+export const getSelfServiceSignupUrl = () =>
+ `${config.URL.AUTH}?retUrl=${encodeURIComponent(
+ `${window.location.origin}/self-service`
+ )}®Source=selfService&mode=signUp`;
+
/**
* Logout user from Topcoder
*/
diff --git a/webpack.config.js b/webpack.config.js
index 7786c51..d1ec5fa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -104,6 +104,7 @@ module.exports = (webpackConfigEnv, options) => {
components: path.resolve(__dirname, "src/components"),
fonts: path.resolve(__dirname, "src/assets/fonts"),
styles: path.resolve(__dirname, "src/styles"),
+ utils: path.resolve(__dirname, "src/utils"),
handlebars: path.resolve(
__dirname,
"node_modules/handlebars/dist/handlebars.min.js"