Merge pull request #4841 from topcoder-platform/develop

V5 integration + Gigs work(contentful) fixes

Author: sushilshinde

Dockerfile

@@ -64,6 +64,8 @@ ARG TC_M2M_AUTH0_PROXY_SERVER_URL
 ARG TC_M2M_AUTH0_URL
 ARG AUTH_SECRET
 
+ARG COMMUNITY_APP_URL
+
 ################################################################################
 # Setting of environment variables in the Docker image.
 
@@ -117,6 +119,7 @@ ENV CONTENTFUL_EDU_SPACE_ID=$CONTENTFUL_EDU_SPACE_ID
 ENV CONTENTFUL_EDU_CDN_API_KEY=$CONTENTFUL_EDU_CDN_API_KEY
 ENV CONTENTFUL_EDU_PREVIEW_API_KEY=$CONTENTFUL_EDU_PREVIEW_API_KEY
 ENV RECRUITCRM_API_KEY=$RECRUITCRM_API_KEY
+ENV COMMUNITY_APP_URL=$COMMUNITY_APP_URL
 
 ################################################################################
 # Testing and build of the application inside the container.

build.sh

@@ -43,7 +43,8 @@ docker build -t $TAG \
   --build-arg CONTENTFUL_COMCAST_SPACE_ID=$CONTENTFUL_COMCAST_SPACE_ID \
   --build-arg CONTENTFUL_COMCAST_CDN_API_KEY=$CONTENTFUL_COMCAST_CDN_API_KEY \
   --build-arg CONTENTFUL_COMCAST_PREVIEW_API_KEY=$CONTENTFUL_COMCAST_PREVIEW_API_KEY \
-  --build-arg RECRUITCRM_API_KEY=$RECRUITCRM_API_KEY .
+  --build-arg RECRUITCRM_API_KEY=$RECRUITCRM_API_KEY \
+  --build-arg COMMUNITY_APP_URL=$COMMUNITY_APP_URL .
 
 # Copies "node_modules" from the created image, if necessary for caching.
 docker create --name app $TAG

package.json

@@ -137,7 +137,7 @@
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.0.0",
+    "topcoder-react-lib": "1000.21.5",
     "topcoder-react-ui-kit": "2.0.0",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/assets/images/icon-skills-blue.png

@@ -114,20 +114,27 @@ export default class RecruitCRMService {
       const data = await response.json();
       if (data.current_page < data.last_page) {
         const pages = _.range(2, data.last_page + 1);
-        // eslint-disable-next-line no-restricted-syntax
-        for (const page of pages) {
-          // eslint-disable-next-line no-await-in-loop
-          const pageDataRsp = await fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, {
+        return Promise.all(
+          pages.map(page => fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, {
             method: 'GET',
             headers: {
               'Content-Type': req.headers['content-type'],
               Authorization: this.private.authorization,
             },
-          });
-          // eslint-disable-next-line no-await-in-loop
-          const pageData = await pageDataRsp.json();
-          data.data = _.flatten(data.data.concat(pageData.data));
-        }
+          })),
+        )
+          .then(async (allPages) => {
+            // eslint-disable-next-line no-restricted-syntax
+            for (const pageDataRsp of allPages) {
+              // eslint-disable-next-line no-await-in-loop
+              const pageData = await pageDataRsp.json();
+              data.data = _.flatten(data.data.concat(pageData.data));
+            }
+            return res.send(data.data);
+          })
+          .catch(e => res.send({
+            error: e,
+          }));
       }
       return res.send(data.data);
     } catch (err) {

src/assets/images/icon-skills.png

@@ -1,9 +1,6 @@
 {
   "challengeFilter": {
-    "groupIds": ["20000078"],
-    "or": [{
-      "tags": ["TCO", "TCO19"]
-    }]
+    "events": ["tco19"]
   },
   "communityId": "tco19",
   "communityName": "TCO19",

src/assets/images/icon-skills.svg

@@ -1,6 +1,6 @@
 {
   "challengeFilter": {
-    "tags": ["TCO", "TCO20"]
+    "events": ["tco20"]
   },
   "communityId": "tco20",
   "communityName": "TCO20",

src/assets/images/l1.png

@@ -1,6 +1,6 @@
 {
   "challengeFilter": {
-    "tags": ["TCO", "TCO21"]
+    "events": ["tco21"]
   },
   "communityId": "tco21",
   "communityName": "TCO21",

src/assets/images/l2.png

@@ -10,7 +10,7 @@ import './style.scss';
 import IconBlackDuration from 'assets/images/icon-black-duration.svg';
 import IconBlackLocation from 'assets/images/icon-black-location.svg';
 import IconBlackPayment from 'assets/images/icon-black-payment.svg';
-import IconBlackSkills from 'assets/images/icon-skills.svg';
+import iconBlackSkills from 'assets/images/icon-skills.png';
 
 export default function JobListCard({
   job,
@@ -30,7 +30,7 @@ export default function JobListCard({
       <Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="gig-name">{job.name}</Link>
       <div styleName="job-infos">
         <div styleName="icon-val">
-          <IconBlackSkills /> {skills}
+          <img src={iconBlackSkills} alt="skills-icon" /> {skills}
         </div>
         <div styleName="icon-val">
           <IconBlackLocation /> {job.country}

src/assets/images/l3.png

@@ -69,7 +69,8 @@
         width: 141px;
       }
 
-      svg {
+      svg,
+      img {
         margin-right: 7px;
       }
     }

src/assets/images/l4.png

@@ -17,14 +17,19 @@ function SearchCombo({
     setVal('');
     onSearch('');
   };
+  const onKeyDown = (e) => {
+    if (e.which === 13) {
+      onSearch(inputVal);
+    }
+  };
 
   return (
     <div styleName="container">
       <div styleName="input-wrap">
         {
           !inputVal ? <span styleName="search-placeholder">{placeholder}</span> : null
         }
-        <input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} />
+        <input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} onKeyDown={onKeyDown} />
         {
           inputVal ? <IconClearSearch onClick={clearSearch} styleName="clear-search" /> : null
         }

src/server/services/recruitCRM.js

@@ -9,14 +9,15 @@
     width: 100%;
     position: relative;
     margin-right: 10px;
-    z-index: 1;
 
     input.input {
       background: transparent;
       border: 1px solid #aaa;
       border-radius: 6px;
       height: 39px;
       margin: 0;
+      position: relative;
+      z-index: 1;
     }
 
     .search-placeholder {
@@ -29,13 +30,20 @@
       z-index: 0;
       top: 8px;
       left: 15px;
+
+      @include xs-to-sm {
+        max-width: 250px;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
 
     .clear-search {
       position: absolute;
       top: calc(50% - 5px);
       right: 15px;
       cursor: pointer;
+      z-index: 2;
     }
   }
 

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

@@ -17,6 +17,11 @@ import IconMoney from 'assets/images/icon-payment.svg';
 import IconDuration from 'assets/images/icon-calendar-gig.svg';
 import IconHours from 'assets/images/icon-duration.svg';
 import IconTimezone from 'assets/images/icon-timezone.svg';
+import iconSkills from 'assets/images/icon-skills-blue.png';
+import iconLabel1 from 'assets/images/l1.png';
+import iconLabel2 from 'assets/images/l2.png';
+import iconLabel3 from 'assets/images/l3.png';
+import iconLabel4 from 'assets/images/l4.png';
 
 // Cleanup HTML from style tags
 // so it won't affect other parts of the UI
@@ -41,11 +46,11 @@ export default function GigDetails(props) {
   return (
     <div styleName="container">
       {
-        job.error ? (
+        job.error || job.enable_job_application_form !== 1 ? (
           <div styleName="error">
             <h3>Gig does not exist.</h3>
             <div styleName="cta-buttons">
-              <Link to={config.GIGS_PAGES_PATH}>VIEW OTHER JOBS</Link>
+              <Link to={config.GIGS_PAGES_PATH}>VIEW OTHER GIGS</Link>
             </div>
           </div>
         ) : (
@@ -90,8 +95,8 @@ export default function GigDetails(props) {
             </div>
             <div styleName="content">
               <div styleName="left">
-                <h4>Required Tech Skills</h4>
-                <p>{skills}</p>
+                <h4>Skills</h4>
+                <p styleName="skills"><img src={iconSkills} alt="skills-icon" /> {skills}</p>
                 <h4>Description</h4>
                 <p>{ReactHtmlParser(job.job_description_text, ReactHtmlParserOptions)}
                 </p>
@@ -126,12 +131,25 @@ export default function GigDetails(props) {
                   <p>Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/thrive/tracks?track=Topcoder&amp;tax=Gig%20Work">here</a>.</p>
                   <p>At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:</p>
                   <ul>
-                    <li>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate. Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</li>
-                    <li>Make sure your <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/settings/profile">Topcoder profile</a> says it all. Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig</li>
-                    <li>Let us know you’re here! Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team</li>
-                    <li>Subscribe to our Gig notifications email. We’ll send you a weekly update on gigs available so you don’t miss a beat. <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Find the button at the top of this page.</a></li>
+                    <li>
+                      <img src={iconLabel1} alt="label 1" />
+                      <div><strong>Make sure your <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/settings/profile">Topcoder profile</a> says it all.</strong> Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig.</div>
+                    </li>
+                    <li>
+                      <img src={iconLabel2} alt="label 2" />
+                      <div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email.</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
+                    </li>
+                    <li>
+                      <img src={iconLabel3} alt="label 3" />
+                      <div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
+                    </li>
+                    <li>
+                      <img src={iconLabel4} alt="label 4" />
+                      <div><strong>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate.</strong> Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</div>
+                    </li>
                   </ul>
                 </div>
+                <div styleName="support">If you have any questions or doubts, don’t hesitate  to email <a href="mailto:[email protected]">[email protected]</a>.</div>
               </div>
             </div>
           </div>

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

@@ -23,6 +23,11 @@
     height: 80vh;
   }
 
+  .wrap .content .right .support a {
+    font-weight: 600;
+    text-decoration: none;
+  }
+
   .wrap {
     h2 {
       color: #26b3c5;
@@ -118,15 +123,26 @@
           li {
             font-size: 14px;
             line-height: 26px;
-          }
 
+            strong {
+              font-weight: bold;
+            }
+          }
           /* stylelint-enable */
 
           ul {
             margin-bottom: 0;
+            list-style: none;
+            padding: 0;
 
             li {
               margin-bottom: 15px;
+              display: flex;
+              align-items: flex-start;
+
+              img {
+                margin-right: 16px;
+              }
 
               &:last-child {
                 margin-bottom: 0;
@@ -138,6 +154,16 @@
         .gig-skills {
           display: flex;
         }
+
+        .support {
+          background-color: #eaf6fd;
+          border-radius: 10px;
+          padding: 20px;
+          text-transform: uppercase;
+          font-weight: 600;
+          font-family: Barlow, sans-serif;
+          margin-top: 20px;
+        }
       }
 
       .left {
@@ -159,6 +185,16 @@
             margin-top: 0;
           }
         }
+
+        .skills {
+          display: flex;
+          align-items: center;
+          /* stylelint-disable */
+          img {
+            margin-right: 8px;
+          }
+          /* stylelint-enable */
+        }
       }
     }
   }

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

@@ -29,24 +29,6 @@ const ChallengeSpecTab = ({ challenge }) => (
       </article>
       )
     }
-    {
-      challenge.finalSubmissionGuidelines
-      && (
-      <article>
-        <h2 styleName="h2">
-          Final Submission Guidelines
-        </h2>
-        <div
-          /* eslint-disable react/no-danger */
-          dangerouslySetInnerHTML={{
-            __html: challenge.finalSubmissionGuidelines,
-          }}
-          /* eslint-enable react/no-danger */
-          styleName="rawHtml"
-        />
-      </article>
-      )
-    }
   </div>
 );
 

src/shared/components/GUIKit/JobListCard/index.jsx

@@ -41,7 +41,7 @@ class MySubmissionsView extends React.Component {
     }
 
     if (isMM) {
-      loadMMSubmissions(challenge.id, challenge.registrants, auth.tokenV3);
+      loadMMSubmissions(challenge.id, auth.tokenV3);
     }
   }