Merge pull request #5637 from topcoder-platform/navi-tco

Navi tco

Author: luizrrodrigues

.circleci/config.yml

@@ -364,7 +364,7 @@ workflows:
           filters:
             branches:
               only:
-                - new-tabs-theme
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         

package-lock.json

@@ -88,7 +88,8 @@
     "money": "^0.2.0",
     "morgan": "^1.9.0",
     "multer": "^1.4.2",
-    "navigation-component": "topcoder-platform/navigation-component#develop",
+    "navigation-component": "github:topcoder-platform/navigation-component#develop",
+    "navigation-component-tco": "github:topcoder-platform/navigation-component-tco#new-dev",
     "node-forge": "^0.7.5",
     "nuka-carousel": "^4.5.3",
     "postcss": "^6.0.23",

package.json

@@ -244,7 +244,12 @@ export default function ContentfulMenu(props) {
       render={(menuData) => {
         const { fields } = Object.values(menuData.entries.items)[0];
         if (!fields) return null;
-        if (fields.theme === 'General - light' || fields.theme === 'General - dark') {
+        if (
+          fields.theme === 'General - light'
+          || fields.theme === 'General - dark'
+          || fields.theme === 'TCO22 - dark'
+          || fields.theme === 'TCO22 - light'
+        ) {
           // New navi style menu
           // we deligate to special custom component and lib
           return (

src/shared/components/Contentful/Menu/index.jsx

@@ -78,8 +78,6 @@ class MenuLoaderContainer extends React.Component {
       return <LoadingIndicator />;
     }
     if (isomorphy.isClientSide()) {
-      // eslint-disable-next-line global-require
-      const { TopNav, LoginNav } = require('navigation-component');
       const logoToUse = !_.isEmpty(menuLogo) ? <img src={menuLogo.fields.file.url} alt="menu logo" /> : <Logo />;
       const menuTheme = fields.theme.split('- ');
       let normalizedProfile = auth.profile && _.clone(auth.profile);
@@ -89,12 +87,14 @@ class MenuLoaderContainer extends React.Component {
       } else {
         normalizedProfile = null;
       }
-      return (
-        <div>
-          <TopNav
+      if (fields.theme.indexOf('TCO22') !== -1) {
+        // eslint-disable-next-line global-require
+        const { TopNav: TopNavTCO, LoginNav: LoginNavTCO } = require('navigation-component-tco');
+        return (
+          <TopNavTCO
             menu={menu}
             rightMenu={(
-              <LoginNav
+              <LoginNavTCO
                 loggedIn={!_.isEmpty(auth.profile)}
                 notificationButtonState="none"
                 notifications={[]}
@@ -117,8 +117,41 @@ class MenuLoaderContainer extends React.Component {
             loggedIn={!_.isEmpty(auth.profile)}
             profileHandle={auth.profile ? auth.profile.handle : ''}
             logoLink={fields.logoLink}
+            backToTcUrl={fields.backToTcUrl}
+            backToTcUrlText={fields.backToTcUrlText}
           />
-        </div>
+        );
+      }
+      // eslint-disable-next-line global-require
+      const { TopNav, LoginNav } = require('navigation-component');
+      return (
+        <TopNav
+          menu={menu}
+          rightMenu={(
+            <LoginNav
+              loggedIn={!_.isEmpty(auth.profile)}
+              notificationButtonState="none"
+              notifications={[]}
+              accountMenu={config.ACCOUNT_MENU}
+              switchText={config.ACCOUNT_MENU_SWITCH_TEXT}
+              onSwitch={this.handleSwitchMenu}
+              onMenuOpen={this.handleCloseOpenMore}
+              profile={normalizedProfile}
+              auth={auth}
+              authURLs={config.HEADER_AUTH_URLS}
+            />
+              )}
+          logo={logoToUse}
+          theme={menuTheme[1]}
+          currentLevel1Id={activeLevel1Id}
+          onChangeLevel1Id={this.handleChangeLevel1Id}
+          path={path}
+          openMore={openMore}
+          setOpenMore={this.handleChangeOpenMore}
+          loggedIn={!_.isEmpty(auth.profile)}
+          profileHandle={auth.profile ? auth.profile.handle : ''}
+          logoLink={fields.logoLink}
+        />
       );
     }
     // no SSR for navi component yet

src/shared/containers/Contentful/MenuLoader/index.jsx

@@ -103,6 +103,7 @@ export function menuItemBuilder(baseUrl, item) {
         title: item.fields.naviMenuLinkText || item.fields.name,
         href: item.fields.viewport ? target(baseUrl, item) : null,
         id: item.sys.id,
+        imageSrc: item.fields.naviMenuLinkImage ? `https:${item.fields.naviMenuLinkImage.fields.file.url}` : null,
       };
     case 'navigationMenuItem':
       return {