Merge pull request #3544 from topcoder-platform/feature-contentful

Feature contentful

Author: sushilshinde

.circleci/config.yml

@@ -175,17 +175,14 @@ workflows:
             branches:
               only: 
                 - develop
-                - hot-fix
-                - survey_tc
-                - fix-groups-updates
-                - sort_registrations_submissions
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
               only:
                 - develop
+                - feature-contentful
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

src/assets/images/img-Topcoder.png

@@ -22,24 +22,10 @@
     "url": "https://www.topcoder.com"
   }],
   "footerText": "© Copyright Topcoder, 2019",
-  "menuItems": [
-    {
-      "title": "Home",
-      "url": "/"
-    }, {
-      "title": "How it works",
-      "url": "/learn"
-    }, {
-      "title": "Catalog",
-      "url": "/catalog"
-    }, {
-      "title": "FAQ",
-      "url": "/faq"
-    }, {
-      "title": "Challenges",
-      "url": "/challenges?communityId=zurich"
-    }
-  ],
+  "menuItems": [{
+    "navigationMenu": "2rUBPkaTK3UInCz4h7GOZG",
+    "spaceName": "zurich"
+  }],
   "hideSearch": true,
   "newsFeed": "http://www.topcoder.com/feed",
   "subdomains": ["zurich", "community-zurich"],

src/assets/images/new-arrow-left.svg

@@ -63,7 +63,7 @@ class ContentSlider extends Component {
               onKeyPress={previousSlide}
               role="button"
               tabIndex={0}
-              className={theme.control}
+              className={theme.controlLeft}
             >
               <ArrowPrev />
             </a>
@@ -74,7 +74,7 @@ class ContentSlider extends Component {
               onKeyPress={nextSlide}
               role="button"
               tabIndex={0}
-              className={theme.control}
+              className={theme.controlRight}
             >
               <ArrowNext />
             </a>
@@ -109,7 +109,8 @@ ContentSlider.propTypes = {
   theme: PT.shape({
     container: PT.string,
     content: PT.string,
-    control: PT.string,
+    controlLeft: PT.string,
+    controlRight: PT.string,
     multiContent: PT.any,
     singleContent: PT.any,
   }),

src/assets/images/new-arrow-right.svg

@@ -18,9 +18,18 @@
   width: 100%;
 }
 
-.control {
+.controlLeft,
+.controlRight {
   border: 0;
   color: white;
   cursor: pointer;
   display: flex;
 }
+
+.controlLeft {
+  margin-left: 25px;
+}
+
+.controlRight {
+  margin-right: 25px;
+}

src/server/tc-communities/zurich/metadata.json

@@ -78,56 +78,42 @@ class MenuLoaderContainer extends React.Component {
       // 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 comboMenu = _.clone(config.HEADER_MENU);
+      comboMenu[1].subMenu = _.clone(menu[0].subMenu);
+      let normalizedProfile = auth.profile && _.clone(auth.profile);
+      if (auth.profile) {
+        normalizedProfile.photoURL = (_.has(auth.profile, 'photoURL') && auth.profile.photoURL !== null)
+          ? `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(auth.profile.photoURL)}?size=32` : '';
+      } else {
+        normalizedProfile = null;
+      }
       return (
         <div>
           <TopNav
-            menu={menu}
-            logo={logoToUse}
-            currentLevel1Id={activeLevel1Id}
-            onChangeLevel1Id={this.handleChangeLevel1Id}
-            path={path}
-            openMore={openMore}
-            setOpenMore={this.handleChangeOpenMore}
-            loggedIn={!_.isEmpty(auth.profile)}
-            // profileHandle={auth.profile ? auth.profile.handle : ''}
+            menu={comboMenu}
             rightMenu={(
               <LoginNav
                 loggedIn={!_.isEmpty(auth.profile)}
                 notificationButtonState="none"
                 notifications={[]}
-                accountMenu={[
-                  {
-                    title: 'Settings',
-                    href: '/settings/profile',
-                  },
-                  { separator: true },
-                  {
-                    title: 'Help',
-                    href: config.URL.HELP,
-                  },
-                  {
-                    title: 'About Topcoder',
-                    href: `${config.URL.BASE}/about/`,
-                  },
-                  {
-                    title: 'Log Out',
-                    href: `${config.URL.BASE}/logout`,
-                  },
-                ]}
+                accountMenu={config.ACCOUNT_MENU}
                 switchText={config.ACCOUNT_MENU_SWITCH_TEXT}
                 onSwitch={this.handleSwitchMenu}
                 onMenuOpen={this.handleCloseOpenMore}
                 showNotification={false}
-                profile={{
-                  ...auth.profile,
-                  roles: auth.user ? auth.user.roles : [],
-                }}
-                authURLs={{
-                  href: `${config.URL.AUTH}/member/registration?utm_source=community-app-main`,
-                  location: `${config.URL.AUTH}/member?retUrl=%S&utm_source=community-app-main`,
-                }}
+                profile={normalizedProfile}
+                authURLs={config.HEADER_AUTH_URLS}
               />
             )}
+            logo={logoToUse}
+            theme={config.HEADER_MENU_THEME}
+            currentLevel1Id={activeLevel1Id}
+            onChangeLevel1Id={this.handleChangeLevel1Id}
+            path={path}
+            openMore={openMore}
+            setOpenMore={this.handleChangeOpenMore}
+            loggedIn={!_.isEmpty(auth.profile)}
+            profileHandle={auth.profile ? auth.profile.handle : ''}
           />
         </div>
       );

src/shared/components/Contentful/ContentSlider/ContentSlider.jsx

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import Error404 from 'components/Error404';
 import FAQ from 'components/tc-communities/communities/zurich/FAQ';
 import Footer from 'components/tc-communities/communities/zurich/Footer';
-import Header from 'containers/tc-communities/Header';
 import Home from 'containers/tc-communities/zurich/Home';
 import Learn from 'components/tc-communities/communities/zurich/Learn';
 import ContentfulRoute from 'components/Contentful/Route';
@@ -22,8 +21,8 @@ import React from 'react';
 import theme from 'components/tc-communities/communities/zurich/theme';
 import { ThemeProvider } from 'react-css-super-themr';
 import { Route, Switch, Redirect } from 'react-router-dom';
-import { config } from 'topcoder-react-utils';
 import Viewport from 'components/Contentful/Viewport';
+import ContentfulMenu from 'components/Contentful/Menu';
 
 function Zurich({ base, meta, userGroups }) {
   // Only members of `Requestor`|`Approver` gropus
@@ -65,15 +64,19 @@ function Zurich({ base, meta, userGroups }) {
         path={`${base}/forbidden`}
       />
       <Route
-        component={({ match }) => (
+        component={() => (
           <ThemeProvider theme={theme}>
             <div>
-              <Header
-                baseUrl={base}
-                pageId={match.params.pageId || 'home'}
-                hideJoinNow
-                logoutRedirect={config.URL.COMMUNITIES.ZURICH}
-              />
+              {
+                meta.menuItems ? (
+                  <ContentfulMenu
+                    id={meta.menuItems[0].navigationMenu}
+                    spaceName={meta.menuItems[0].spaceName}
+                    environment={meta.menuItems[0].environment}
+                    baseUrl={base}
+                  />
+                ) : null
+              }
               <Switch>
                 <Route
                   component={() => ChallengeListing({