Merge pull request #5516 from topcoder-platform/gig-ab-v2

Gig ab v2

Author: luizrrodrigues

.circleci/config.yml

@@ -290,7 +290,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - gig-ab-v2
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

src/shared/containers/Gigs/RecruitCRMJobApply.jsx

@@ -14,6 +14,7 @@ import { withOptimizely } from '@optimizely/react-sdk';
 import techSkills from './techSkills';
 
 
+const cookies = require('browser-cookies');
 const countries = require('i18n-iso-countries');
 countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
 
@@ -129,6 +130,22 @@ class RecruitCRMJobApplyContainer extends React.Component {
       if (_.isEmpty(state.formErrors)) {
         applyForJob(job, formData);
         optimizely.track('Submit Application Form');
+        const isFeatured = _.find(job.custom_fields, ['field_name', 'Featured']);
+        const jobTags = _.find(job.custom_fields, ['field_name', 'Job Tag']);
+        let hotListCookie = cookies.get('_tc.hcl');
+        if (isFeatured && isFeatured.value) {
+          optimizely.track('Submit to Featured Gigs');
+        }
+        if (jobTags && jobTags.value) {
+          optimizely.track('Submit to Tagged Gigs');
+        }
+        if (hotListCookie) {
+          hotListCookie = JSON.parse(hotListCookie);
+          if (hotListCookie.slug === job.slug) {
+            optimizely.track('Submit to Hotlist Gigs');
+            cookies.erase('_tc.hcl');
+          }
+        }
       }
     });
   }

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -19,7 +19,8 @@ import { getQuery, updateQuery } from 'utils/url';
 import { withOptimizely } from '@optimizely/react-sdk';
 import './jobLisingStyles.scss';
 
-const CONTENT_PREVIEW_LENGTH = 175;
+const cookies = require('browser-cookies');
+
 const GIGS_PER_PAGE = 10;
 // Sort by dropdown
 const sortByOptions = [
@@ -47,7 +48,7 @@ class RecruitCRMJobsContainer extends React.Component {
     this.onFilter = this.onFilter.bind(this);
     this.onLocation = this.onLocation.bind(this);
     this.onSort = this.onSort.bind(this);
-    this.onHotlistApply = this.onHotlistApply.bind(this);
+    this.onHotlistClick = this.onHotlistClick.bind(this);
   }
 
   componentDidMount() {
@@ -121,9 +122,14 @@ class RecruitCRMJobsContainer extends React.Component {
     });
   }
 
-  onHotlistApply() {
+  onHotlistClick(job) {
     const { optimizely } = this.props;
     optimizely.track('Hotlist ads click');
+    cookies.set('_tc.hcl', JSON.stringify({
+      slug: job.slug,
+    }), {
+      expires: 0,
+    });
   }
 
   render() {
@@ -151,7 +157,8 @@ class RecruitCRMJobsContainer extends React.Component {
     // optimizely decide
     let decision = { enabled: true };
     if (isomorphy.isClientSide()) {
-      decision = optimizely.decide('gig_listing_hotlist');
+      // decision = optimizely.decide('gig_listing_hotlist');
+      decision = optimizely.decide('gig_listing_hotlist_center');
     }
     let jobsToDisplay = jobs;
     // build hotlist of jobs if present
@@ -216,6 +223,23 @@ class RecruitCRMJobsContainer extends React.Component {
       jobsToDisplay,
       page * GIGS_PER_PAGE, (page * GIGS_PER_PAGE) + GIGS_PER_PAGE,
     );
+    // hot list of gigs
+    let isHotlistRendered = false;
+    const hotlist = () => (
+      <div styleName="hotlist">
+        <div styleName="hotlist-items">
+          {
+            hotlistJobs.map((hjob, indx) => (
+              <Link styleName={`hotlist-item-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`} key={`hotlist-item-${indx + 1}`} onClick={() => this.onHotlistClick(hjob)}>
+                <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>
+      </div>
+    );
 
     return (
       <div styleName={hotlistJobs.length && decision.enabled ? 'container-with-hotlist' : 'container'}>
@@ -228,58 +252,34 @@ class RecruitCRMJobsContainer extends React.Component {
           <div styleName="jobs-list-container">
             {
               jobsToDisplay.length
-                ? jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
-                : <span styleName="no-results">No Results</span>
+                ? jobsToDisplay.map((job, indx) => {
+                  const featured = getCustomField(job.custom_fields, 'Featured');
+                  if ((featured === 'n/a' || indx === 2) && !isHotlistRendered && hotlistJobs.length && decision.enabled) {
+                    isHotlistRendered = true;
+                    return (
+                      <React.Fragment>
+                        {hotlist()}
+                        <JobListCard job={job} key={job.slug} />
+                      </React.Fragment>
+                    );
+                  }
+                  return <JobListCard job={job} key={job.slug} />;
+                })
+                : (
+                  <React.Fragment>
+                    {
+                      hotlistJobs.length && decision.enabled && hotlist()
+                    }
+                    <span styleName="no-results">No Results</span>
+                  </React.Fragment>
+                )
             }
           </div>
           {
             jobsToDisplay.length
               ? <Paginate onChange={this.onPaginate} pages={pages} page={page} /> : null
           }
         </div>
-        {
-          hotlistJobs.length && decision.enabled && (
-            <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}`} onClick={this.onHotlistApply}>
-                      <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>
-                      {
-                        getCustomField(hjob.custom_fields, 'Hotlist excerpt') !== 'n/a' ? (
-                          <div styleName="job-desc">
-                            {
-                              `${getCustomField(hjob.custom_fields, 'Hotlist excerpt').substring(0, CONTENT_PREVIEW_LENGTH)}${getCustomField(hjob.custom_fields, 'Hotlist excerpt').length > CONTENT_PREVIEW_LENGTH ? '...' : ''}`
-                            }
-                          </div>
-                        ) : null
-                      }
-                    </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>
-                      {
-                        getCustomField(hjob.custom_fields, 'Hotlist excerpt') !== 'n/a' ? (
-                          <div styleName="job-desc">
-                            {
-                              `${getCustomField(hjob.custom_fields, 'Hotlist excerpt').substring(0, CONTENT_PREVIEW_LENGTH)}${getCustomField(hjob.custom_fields, 'Hotlist excerpt').length > CONTENT_PREVIEW_LENGTH ? '...' : ''}`
-                            }
-                          </div>
-                        ) : null
-                      }
-                      <Link styleName={`hotlist-item-button-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`} onClick={this.onHotlistApply}>Apply Now</Link>
-                    </div>
-                  )))
-                }
-              </div>
-            </div>
-          )
-        }
       </div>
     );
   }