Implement v1 #5479

Author: kkartunov

config/default.js

@@ -426,4 +426,7 @@ module.exports = {
     DEBOUNCE_ON_CHANGE_TIME: 150,
   },
   ENABLE_RECOMMENDER: true,
+  OPTIMIZELY: {
+    SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
+  },
 };

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@hapi/joi": "^16.1.4",
+    "@optimizely/react-sdk": "^2.5.0",
     "@topcoder-platform/tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
     "aos": "^2.3.4",
     "atob": "^2.1.1",

src/assets/images/gig-work/tag-dolars.png

@@ -11,7 +11,15 @@ 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.png';
+import newTag from 'assets/images/gig-work/tag-new.png';
+import hotTag from 'assets/images/gig-work/tag-hot.png';
+import dolarsTag from 'assets/images/gig-work/tag-dolars.png';
 
+const TAGS = {
+  New: newTag,
+  Hot: hotTag,
+  $$$: dolarsTag,
+};
 export default function JobListCard({
   job,
 }) {
@@ -25,9 +33,13 @@ export default function JobListCard({
       skills = skills.join(', ');
     }
   }
+  const tag = getCustomField(job.custom_fields, 'Job Tag');
 
   return (
     <div styleName="container">
+      {
+        tag !== 'n/a' && <img src={TAGS[tag]} alt="gig-job-tag" styleName="gig-tag" />
+      }
       <Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="gig-name">{job.name}</Link>
       <div styleName="job-infos">
         <div styleName="icon-val">

src/assets/images/gig-work/tag-hot.png

@@ -7,13 +7,23 @@
   display: flex;
   flex-direction: column;
   color: #2a2a2a;
-  padding: 25px 35px;
+  padding: 25px 35px 25px 44px;
   margin-bottom: 15px;
+  position: relative;
 
   @include gui-kit-headers;
   @include gui-kit-content;
   @include roboto-regular;
 
+  .gig-tag {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    width: 24px;
+    height: 56px;
+    border-radius: 0;
+  }
+
   .gig-name,
   .gig-name:visited,
   .gig-name:active,
@@ -50,18 +60,38 @@
 
       &:first-child {
         width: 250px;
+
+        @media (max-width: 1280px) {
+          width: auto;
+          margin-right: 20px;
+        }
       }
 
       &:nth-child(2) {
         width: 204px;
+
+        @media (max-width: 1280px) {
+          width: auto;
+          margin-right: 20px;
+        }
       }
 
       &:nth-child(3) {
         width: 263px;
+
+        @media (max-width: 1280px) {
+          width: auto;
+          margin-right: 20px;
+        }
       }
 
       &:nth-child(4) {
         width: 255px;
+
+        @media (max-width: 1280px) {
+          width: auto;
+          margin-right: 20px;
+        }
       }
 
       &:last-child {

src/assets/images/gig-work/tag-new.png

@@ -12,8 +12,12 @@ import Dropdown from 'components/GUIKit/Dropdown';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { getSalaryType, getCustomField } from 'utils/gigs';
+import IconBlackLocation from 'assets/images/icon-black-location.svg';
+import { config, Link } from 'topcoder-react-utils';
 import './jobLisingStyles.scss';
 
+const CONTENT_PREVIEW_LENGTH = 175;
 const GIGS_PER_PAGE = 10;
 // Sort by dropdown
 const sortByOptions = [
@@ -120,6 +124,13 @@ class RecruitCRMJobsContainer extends React.Component {
     }
 
     let jobsToDisplay = jobs;
+    // build hotlist of jobs if present
+    let hotlistJobs = _.filter(jobs, (job) => {
+      const showInHotlist = _.find(job.custom_fields, ['field_name', 'Show in Hotlist']);
+      return showInHotlist && showInHotlist.value;
+    });
+    hotlistJobs = hotlistJobs.sort((a, b) => new Date(b.updated_on) - new Date(a.updated_on));
+    hotlistJobs = _.slice(hotlistJobs, 0, 4);
     // build current locations dropdown based on all data
     // and filter by selected location
     jobsToDisplay = _.filter(jobs, (job) => {
@@ -160,7 +171,14 @@ class RecruitCRMJobsContainer extends React.Component {
       });
     }
     // Sort controlled by sortBy state
-    jobsToDisplay = jobsToDisplay.sort((a, b) => new Date(b[sortBy]) - new Date(a[sortBy]));
+    jobsToDisplay = jobsToDisplay.sort((a, b) => {
+      // sort tags first no matter the sortBy
+      const tagA = getCustomField(a.custom_fields, 'Job Tag');
+      const tagB = getCustomField(b.custom_fields, 'Job Tag');
+      if (tagB !== 'n/a' && tagA === 'n/a') return Number.MAX_VALUE;
+      if (tagB === 'n/a' && tagA !== 'n/a') return -Number.MIN_VALUE;
+      return new Date(b[sortBy]) - new Date(a[sortBy]);
+    });
     // Calc pages
     const pages = Math.ceil(jobsToDisplay.length / GIGS_PER_PAGE);
     // Paginate the results
@@ -170,22 +188,54 @@ class RecruitCRMJobsContainer extends React.Component {
     );
 
     return (
-      <div styleName="container">
-        <div styleName="filters">
-          <SearchCombo placeholder="Search Gig Listings by Name, Skills, or Location" onSearch={this.onSearch} term={term} />
-          <Dropdown label="Location" onChange={this.onLocation} options={locations} size="xs" />
-          <Dropdown label="Sort by" onChange={this.onSort} options={sortByOptions} size="xs" />
-        </div>
-        <div styleName="jobs-list-container">
+      <div styleName={hotlistJobs.length ? 'container-with-hotlist' : 'container'}>
+        <div styleName="gigs">
+          <div styleName="filters">
+            <SearchCombo placeholder="Search Gig Listings by Name or Skills" onSearch={this.onSearch} term={term} />
+            <Dropdown label="Location" onChange={this.onLocation} options={locations} size="xs" />
+            <Dropdown label="Sort by" onChange={this.onSort} options={sortByOptions} size="xs" />
+          </div>
+          <div styleName="jobs-list-container">
+            {
+              jobsToDisplay.length
+                ? jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
+                : <span styleName="no-results">No Results</span>
+            }
+          </div>
           {
             jobsToDisplay.length
-              ? jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
-              : <span styleName="no-results">No Results</span>
+              ? <Paginate onChange={this.onPaginate} pages={pages} page={page} /> : null
           }
         </div>
         {
-          jobsToDisplay.length
-            ? <Paginate onChange={this.onPaginate} pages={pages} page={page} /> : null
+          hotlistJobs.length && (
+            <div styleName="hotlist">
+              <h5>HOT THIS WEEK</h5>
+              <div styleName="hotlist-items">
+                {
+                  hotlistJobs.map((hjob, indx) => (indx <= 1 ? (
+                    <Link styleName={`hotlist-item-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`} key={`hotlist-item-${indx + 1}`}>
+                      <div styleName="location"><IconBlackLocation /> {hjob.country}</div>
+                      <h5 styleName="job-title">{hjob.name}</h5>
+                      <div styleName="job-money">${hjob.min_annual_salary} - ${hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}</div>
+                    </Link>
+                  ) : (
+                    <div styleName={`hotlist-item-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`} key={`hotlist-item-${indx + 1}`}>
+                      <div styleName="location"><IconBlackLocation /> {hjob.country}</div>
+                      <h5 styleName="job-title">{hjob.name}</h5>
+                      <div styleName="job-money">${hjob.min_annual_salary} - ${hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}</div>
+                      <div styleName="job-desc">
+                        {
+                          `${getCustomField(hjob.custom_fields, 'Hotlist excerpt') === 'n/a' ? '' : `${getCustomField(hjob.custom_fields, 'Hotlist excerpt').substring(0, CONTENT_PREVIEW_LENGTH)}...`}`
+                        }
+                      </div>
+                      <Link styleName={`hotlist-item-button-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`}>Apply Now</Link>
+                    </div>
+                  )))
+                }
+              </div>
+            </div>
+          )
         }
       </div>
     );