Add optimizely

Author: kkartunov

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

@@ -6,6 +6,7 @@ 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';
@@ -20,8 +21,9 @@ const TAGS = {
   Hot: hotTag,
   $$$: dolarsTag,
 };
-export default function JobListCard({
+function JobListCard({
   job,
+  optimizely,
 }) {
   const duration = getCustomField(job.custom_fields, 'Duration');
   let skills = getCustomField(job.custom_fields, 'Technologies Required');
@@ -34,13 +36,16 @@ export default function JobListCard({
     }
   }
   const tag = getCustomField(job.custom_fields, 'Job Tag');
+  const onHotlistApply = () => {
+    optimizely.track('View Details Click');
+  };
 
   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>
+      <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}
@@ -55,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>
@@ -68,4 +73,7 @@ JobListCard.defaultProps = {
 
 JobListCard.propTypes = {
   job: PT.shape().isRequired,
+  optimizely: PT.shape().isRequired,
 };
+
+export default withOptimizely(JobListCard);

src/shared/containers/Gigs/RecruitCRMJobApply.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));

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -16,6 +16,7 @@ import { getSalaryType, getCustomField } from 'utils/gigs';
 import IconBlackLocation from 'assets/images/icon-black-location.svg';
 import { config, Link } from 'topcoder-react-utils';
 import { getQuery, updateQuery } from 'utils/url';
+import { withOptimizely } from '@optimizely/react-sdk';
 import './jobLisingStyles.scss';
 
 const CONTENT_PREVIEW_LENGTH = 175;
@@ -46,6 +47,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);
   }
 
   componentDidMount() {
@@ -119,10 +121,16 @@ class RecruitCRMJobsContainer extends React.Component {
     });
   }
 
+  onHotlistApply() {
+    const { optimizely } = this.props;
+    optimizely.track('Hotlist ads click');
+  }
+
   render() {
     const {
       loading,
       jobs,
+      optimizely,
     } = this.props;
     const {
       term,
@@ -140,6 +148,8 @@ class RecruitCRMJobsContainer extends React.Component {
       );
     }
 
+    // optimizely decide
+    const decision = optimizely.decide('gig_listing_hotlist');
     let jobsToDisplay = jobs;
     // build hotlist of jobs if present
     let hotlistJobs = _.filter(jobs, (job) => {
@@ -205,7 +215,7 @@ class RecruitCRMJobsContainer extends React.Component {
     );
 
     return (
-      <div styleName={hotlistJobs.length ? 'container-with-hotlist' : 'container'}>
+      <div styleName={hotlistJobs.length && decision.enabled ? 'container-with-hotlist' : 'container'}>
         <div styleName="gigs">
           <div styleName="filters">
             <SearchCombo placeholder="Search Gig Listings by Name or Skills" onSearch={this.onSearch} term={term} />
@@ -225,13 +235,13 @@ class RecruitCRMJobsContainer extends React.Component {
           }
         </div>
         {
-          hotlistJobs.length && (
+          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}`}>
+                    <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>
@@ -246,7 +256,7 @@ class RecruitCRMJobsContainer extends React.Component {
                           `${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>
+                      <Link styleName={`hotlist-item-button-${indx + 1}`} to={`${config.GIGS_PAGES_PATH}/${hjob.slug}`} onClick={this.onHotlistApply}>Apply Now</Link>
                     </div>
                   )))
                 }
@@ -268,6 +278,7 @@ RecruitCRMJobsContainer.propTypes = {
   getJobs: PT.func.isRequired,
   loading: PT.bool,
   jobs: PT.arrayOf(PT.shape),
+  optimizely: PT.shape().isRequired,
 };
 
 function mapStateToProps(state) {
@@ -291,4 +302,4 @@ function mapDispatchToActions(dispatch) {
 export default connect(
   mapStateToProps,
   mapDispatchToActions,
-)(RecruitCRMJobsContainer);
+)(withOptimizely(RecruitCRMJobsContainer));

src/shared/containers/GigsPages.jsx

@@ -11,12 +11,40 @@ import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
 import { Helmet } from 'react-helmet';
 import MetaTags from 'components/MetaTags';
 import { OptimizelyProvider, createInstance } from '@optimizely/react-sdk';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
 
 const optimizelyClient = createInstance({
   sdkKey: config.OPTIMIZELY.SDK_KEY,
 });
-export default function GigsPagesContainer(props) {
-  const { match } = props;
+const cookies = require('browser-cookies');
+
+function GigsPagesContainer(props) {
+  const { match, profile } = props;
+  const optProfile = {
+    attributes: {},
+  };
+  if (!_.isEmpty(profile)) {
+    optProfile.id = String(profile.userId);
+    optProfile.attributes.TC_Handle = profile.handle;
+    optProfile.attributes.HomeCountryCode = profile.homeCountryCode;
+    optProfile.attributes.email = profile.email;
+  } else {
+    const idCookie = cookies.get('_tc.aid');
+    if (idCookie) {
+      optProfile.id = JSON.parse(idCookie).aid;
+    } else {
+      optProfile.id = uuidv4();
+      cookies.set('_tc.aid', JSON.stringify({
+        aid: optProfile.id,
+      }), {
+        secure: true,
+        domain: '',
+        expires: 365, // days
+      });
+    }
+  }
   const { id, type } = match.params;
   const isApply = `${config.GIGS_PAGES_PATH}/${id}/apply` === match.url;
   const title = 'Gig Work | Topcoder Community | Topcoder';
@@ -57,16 +85,30 @@ window._chatlio = window._chatlio||[];
       <Footer />
     </div>
   );
+
   return isomorphy.isClientSide() ? (
-    <OptimizelyProvider optimizely={optimizelyClient} user={{ id: 123 }}>
+    <OptimizelyProvider optimizely={optimizelyClient} user={optProfile} timeout={500}>
       {inner}
     </OptimizelyProvider>
   ) : inner;
 }
 
 GigsPagesContainer.defaultProps = {
+  profile: null,
 };
 
 GigsPagesContainer.propTypes = {
   match: PT.shape().isRequired,
+  profile: PT.shape(),
 };
+
+function mapStateToProps(state) {
+  const profile = state.auth && state.auth.profile ? { ...state.auth.profile } : {};
+  return {
+    profile,
+  };
+}
+
+export default connect(
+  mapStateToProps,
+)(GigsPagesContainer);