Merge pull request #5483 from topcoder-platform/gig-mkt-ab

Gig mkt ab

Author: luizrrodrigues

.circleci/config.yml

@@ -281,9 +281,8 @@ workflows:
           context : org-global      
           filters:
             branches:
-              only:
+              only:                
                 - free
-
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

Dockerfile

@@ -73,6 +73,9 @@ ARG SENDGRID_API_KEY
 ARG GROWSURF_API_KEY
 ARG GROWSURF_CAMPAIGN_ID
 
+# Optimizely
+ARG OPTIMIZELY_SDK_KEY
+
 ################################################################################
 # Setting of environment variables in the Docker image.
 
@@ -133,6 +136,9 @@ ENV GROWSURF_API_KEY=$GROWSURF_API_KEY
 ENV GROWSURF_CAMPAIGN_ID=$GROWSURF_CAMPAIGN_ID
 ENV GSHEETS_API_KEY=$GSHEETS_API_KEY
 
+# Optimizely
+ENV OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY
+
 ################################################################################
 # Testing and build of the application inside the container.
 

build.sh

@@ -49,6 +49,7 @@ docker build -t $TAG \
   --build-arg GROWSURF_API_KEY=$GROWSURF_API_KEY \
   --build-arg GROWSURF_CAMPAIGN_ID=$GROWSURF_CAMPAIGN_ID \
   --build-arg GSHEETS_API_KEY=$GSHEETS_API_KEY \
+  --build-arg OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY \
   --build-arg COMMUNITY_APP_URL=$COMMUNITY_APP_URL .
 
 # Copies "node_modules" from the created image, if necessary for caching.

config/custom-environment-variables.js

@@ -109,4 +109,7 @@ module.exports = {
     TOKEN_CACHE_TIME: 'TOKEN_CACHE_TIME',
   },
   GSHEETS_API_KEY: 'GSHEETS_API_KEY',
+  OPTIMIZELY: {
+    SDK_KEY: 'OPTIMIZELY_SDK_KEY',
+  },
 };

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

@@ -26,6 +26,7 @@ const JOB_FIELDS_RESPONSE = [
   'salary_type',
   'max_annual_salary',
   'job_description_text',
+  'job_status',
 ];
 const CANDIDATE_FIELDS_RESPONSE = [
   'id',

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

@@ -6,14 +6,24 @@ import React from 'react';
 import PT from 'prop-types';
 import { config, Link } from 'topcoder-react-utils';
 import { getSalaryType, getCustomField } from 'utils/gigs';
+import { withOptimizely } from '@optimizely/react-sdk';
 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.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';
 
-export default function JobListCard({
+const TAGS = {
+  New: newTag,
+  Hot: hotTag,
+  $$$: dolarsTag,
+};
+function JobListCard({
   job,
+  optimizely,
 }) {
   const duration = getCustomField(job.custom_fields, 'Duration');
   let skills = getCustomField(job.custom_fields, 'Technologies Required');
@@ -25,10 +35,17 @@ export default function JobListCard({
       skills = skills.join(', ');
     }
   }
+  const tag = getCustomField(job.custom_fields, 'Job Tag');
+  const onHotlistApply = () => {
+    optimizely.track('View Details Click');
+  };
 
   return (
     <div styleName="container">
-      <Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="gig-name">{job.name}</Link>
+      {
+        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" onClick={onHotlistApply}>{job.name}</Link>
       <div styleName="job-infos">
         <div styleName="icon-val">
           <img src={iconBlackSkills} alt="skills-icon" /> {skills}
@@ -43,7 +60,7 @@ export default function JobListCard({
           <IconBlackDuration /> {/^\d+$/.test(duration) ? `${duration} Weeks` : duration}
         </div>
         <div styleName="row-btn">
-          <Link styleName="primary-green-md" to={`${config.GIGS_PAGES_PATH}/${job.slug}`}>VIEW DETAILS</Link>
+          <Link styleName="primary-green-md" to={`${config.GIGS_PAGES_PATH}/${job.slug}`} onClick={onHotlistApply}>VIEW DETAILS</Link>
         </div>
       </div>
     </div>
@@ -56,4 +73,7 @@ JobListCard.defaultProps = {
 
 JobListCard.propTypes = {
   job: PT.shape().isRequired,
+  optimizely: PT.shape().isRequired,
 };
+
+export default withOptimizely(JobListCard);

src/assets/images/gig-work/tag-new.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: -1px;
+    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/server/services/recruitCRM.js

@@ -66,7 +66,7 @@ export default function GigDetails(props) {
   return (
     <div styleName="container">
       {
-        job.error || job.enable_job_application_form !== 1 ? (
+        job.error || job.job_status.id !== 1 || job.enable_job_application_form !== 1 ? (
           <div styleName="error">
             { job.error ? <SadFace /> : null }
             <h3>{ job.error ? 'Gig does not exist' : 'This Gig has been Fulfilled'}</h3>

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

@@ -10,8 +10,10 @@ import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { isValidEmail } from 'utils/tc';
+import { withOptimizely } from '@optimizely/react-sdk';
 import techSkills from './techSkills';
 
+
 const countries = require('i18n-iso-countries');
 countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
 
@@ -120,12 +122,13 @@ class RecruitCRMJobApplyContainer extends React.Component {
   }
 
   onApplyClick() {
-    const { applyForJob, job } = this.props;
+    const { applyForJob, job, optimizely } = this.props;
     const { formData } = this.state;
     this.validateForm();
     this.setState((state) => {
       if (_.isEmpty(state.formErrors)) {
         applyForJob(job, formData);
+        optimizely.track('Submit Application Form');
       }
     });
   }
@@ -269,6 +272,7 @@ RecruitCRMJobApplyContainer.propTypes = {
   application: PT.shape(),
   searchCandidates: PT.func.isRequired,
   recruitProfile: PT.shape(),
+  optimizely: PT.shape().isRequired,
 };
 
 function mapStateToProps(state, ownProps) {
@@ -312,4 +316,4 @@ function mapDispatchToActions(dispatch) {
 export default connect(
   mapStateToProps,
   mapDispatchToActions,
-)(RecruitCRMJobApplyContainer);
+)(withOptimizely(RecruitCRMJobApplyContainer));