Gig work hot-fix 1

src/server/services/recruitCRM.js

@@ -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/shared/components/GUIKit/JobListCard/index.jsx

@@ -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/shared/components/GUIKit/JobListCard/style.scss

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

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

@@ -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/shared/components/GUIKit/SearchCombo/style.scss

@@ -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/shared/components/Gigs/GigDetails.jsx

@@ -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/shared/components/Gigs/style.scss

@@ -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/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -118,10 +118,15 @@ class RecruitCRMJobsContainer extends React.Component {
         </div>
         <div styleName="jobs-list-container">
           {
-            jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
+            jobsToDisplay.length
+              ? jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
+              : <span styleName="no-results">No Results</span>
           }
         </div>
-        <Paginate onChange={this.onPaginate} pages={pages} page={page} />
+        {
+          jobsToDisplay.length
+            ? <Paginate onChange={this.onPaginate} pages={pages} page={page} /> : null
+        }
       </div>
     );
   }

src/shared/containers/Gigs/jobLisingStyles.scss

@@ -16,5 +16,10 @@
     display: flex;
     flex-direction: column;
     margin: 20px 0 50px 0;
+
+    .no-results {
+      display: flex;
+      justify-content: center;
+    }
   }
 }

src/shared/containers/GigsPages.jsx

@@ -6,7 +6,7 @@ import PT from 'prop-types';
 import Header from 'containers/TopcoderHeader';
 import Footer from 'components/TopcoderFooter';
 import Viewport from 'components/Contentful/Viewport';
-import { config } from 'topcoder-react-utils';
+import { config, MetaTags } from 'topcoder-react-utils';
 import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
 
 
@@ -15,6 +15,7 @@ export default function GigsPagesContainer(props) {
   const { id } = match.params;
   return (
     <div>
+      <MetaTags title="Topcoder - Gig Work Opportunities" />
       <Header />
       {
         id ? (