step 1 - gig apply v2

Author: kkartunov

src/shared/actions/recruitCRM.js

@@ -60,10 +60,8 @@ function normalizeRecruitPayload(job, payload) {
     `Pay Expectation: ${payload.payExpectation}`,
     `Date Available: ${new Date(payload.availFrom).toDateString()}`,
     `Heard About Gig: ${payload.reffereal}`,
-    `Why fit: ${payload.whyFit}`,
     `Able to work during timezone? ${payload.timezoneConfirm.filter(s => s.value).map(() => getCustomField(job.custom_fields, 'Timezone')).join(',')}`,
     `Am I ok to work the duration? ${payload.durationConfirm.filter(s => s.value).map(s => s.label).join(',')}`,
-    `Notes: ${payload.notes}`,
   ];
   return {
     last_name: payload.lname,
@@ -72,7 +70,6 @@ function normalizeRecruitPayload(job, payload) {
     contact_number: payload.phone,
     city: payload.city,
     locality: _.find(payload.country, { selected: true }).label,
-    available_from: payload.availFrom,
     salary_expectation: payload.payExpectation,
     skill: payload.skills.filter(s => s.selected).map(s => s.label).join(','),
     custom_fields: [
@@ -88,10 +85,6 @@ function normalizeRecruitPayload(job, payload) {
         field_id: 2,
         value: payload.handle || '',
       },
-      {
-        field_id: 3,
-        value: payload.whyFit || '',
-      },
       {
         field_id: 14,
         value: perJob.join(','),
@@ -124,6 +117,37 @@ async function applyForJobDone(job, payload) {
   }
 }
 
+/**
+ * Search for cnadidate in recruit
+ */
+function searchCandidatesInit(email) {
+  return { email };
+}
+
+/**
+ * Search for cnadidate in recruit and get profile if available
+ * @param {string} email the email to search
+ */
+async function searchCandidatesDone(email) {
+  const ss = new Service();
+  try {
+    const res = await ss.searchCandidates(email);
+
+    return {
+      email,
+      data: res,
+    };
+  } catch (error) {
+    return {
+      email,
+      data: {
+        error: true,
+        errorObj: error,
+      },
+    };
+  }
+}
+
 export default redux.createActions({
   RECRUIT: {
     GET_JOBS_INIT: getJobsInit,
@@ -132,5 +156,7 @@ export default redux.createActions({
     GET_JOB_DONE: getJobDone,
     APPLY_FOR_JOB_INIT: applyForJobInit,
     APPLY_FOR_JOB_DONE: applyForJobDone,
+    SEARCH_CANDIDATES_INIT: searchCandidatesInit,
+    SEARCH_CANDIDATES_DONE: searchCandidatesDone,
   },
 });

src/shared/components/Gigs/GigApply/index.jsx

@@ -7,7 +7,6 @@ import React from 'react';
 import PT from 'prop-types';
 import { Link, config } from 'topcoder-react-utils';
 import TextInput from 'components/GUIKit/TextInput';
-import Datepicker from 'components/GUIKit/Datepicker';
 import DropdownTerms from 'components/GUIKit/DropdownTerms';
 import RadioButton from 'components/GUIKit/RadioButton';
 import Checkbox from 'components/GUIKit/Checkbox';
@@ -24,9 +23,12 @@ import BackArrowGig from 'assets/images/back-arrow-gig-apply.svg';
 export default function GigApply(props) {
   const {
     job, onFormInputChange, formData, formErrors, onApplyClick, applying, application, user,
+    recruitProfile,
   } = props;
   const retUrl = window.location.href;
 
+  console.log('GigApply', recruitProfile)
+
   return user ? (
     <div styleName="container">
       {
@@ -182,13 +184,7 @@ export default function GigApply(props) {
                         onChange={val => onFormInputChange('payExpectation', val)}
                         errorMsg={formErrors.payExpectation}
                         value={formData.payExpectation}
-                      />
-                      <Datepicker
-                        placeholder="Available From"
-                        label="Available From"
-                        onChange={val => onFormInputChange('availFrom', val ? val.toISOString() : null)}
-                        errorMsg={formErrors.availFrom}
-                        value={formData.availFrom}
+                        required
                       />
                     </div>
                   </div>
@@ -218,42 +214,29 @@ export default function GigApply(props) {
                   <h4>FINAL QUESTIONS</h4>
                   <p>Please Complete the Following Questions</p>
                   <div styleName="form-section">
-                    <TextInput
-                      placeholder="How did you hear about this gig?"
-                      label="How did you hear about this gig?"
+                    <Dropdown
+                      placeholder="How did you find out about Topcoder Gig Work?"
+                      label="How did you find out about Topcoder Gig Work?"
                       onChange={val => onFormInputChange('reffereal', val)}
                       errorMsg={formErrors.reffereal}
-                      value={formData.reffereal}
+                      options={formData.reffereal}
                       required
                     />
                     <div styleName="input-bot-margin" />
-                    <TextInput
-                      placeholder="Why do you think you're a good fit for this gig?"
-                      label="Why do you think you're a good fit for this gig?"
-                      onChange={val => onFormInputChange('whyFit', val)}
-                      errorMsg={formErrors.whyFit}
-                      value={formData.whyFit}
-                    />
                     <p>Are you able to work during the specified timezone? (<strong>{`${getCustomField(job.custom_fields, 'Timezone')}`}</strong>)</p>
                     <RadioButton
                       onChange={val => onFormInputChange('timezoneConfirm', val)}
                       errorMsg={formErrors.timezoneConfirm}
                       options={formData.timezoneConfirm}
                       size="lg"
                     />
-                    <p>Are you ok to work with the duration of the gig? (<strong>{`${getCustomField(job.custom_fields, 'Duration')}`}</strong>)</p>
-                    <RadioButton
-                      onChange={val => onFormInputChange('durationConfirm', val)}
-                      errorMsg={formErrors.durationConfirm}
-                      options={formData.durationConfirm}
-                      size="lg"
-                    />
                     <div styleName="last-input">
-                      <TextInput
-                        placeholder="Add any other notes you might have"
-                        label="Notes"
-                        onChange={val => onFormInputChange('notes', val)}
-                        errorMsg={formErrors.notes}
+                      <p>Are you ok to work with the duration of the gig? (<strong>{`${getCustomField(job.custom_fields, 'Duration')}`}</strong>)</p>
+                      <RadioButton
+                        onChange={val => onFormInputChange('durationConfirm', val)}
+                        errorMsg={formErrors.durationConfirm}
+                        options={formData.durationConfirm}
+                        size="lg"
                       />
                     </div>
                   </div>
@@ -313,4 +296,5 @@ GigApply.propTypes = {
   applying: PT.bool,
   application: PT.shape(),
   user: PT.shape(),
+  recruitProfile: PT.shape().isRequired,
 };

src/shared/containers/Gigs/RecruitCRMJobApply.jsx

@@ -5,6 +5,7 @@
 import _ from 'lodash';
 import actions from 'actions/recruitCRM';
 import GigApply from 'components/Gigs/GigApply';
+import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -21,12 +22,14 @@ class RecruitCRMJobApplyContainer extends React.Component {
     this.state = {
       formErrors: {},
       formData: {
-        availFrom: new Date().toISOString(),
         skills: _.map(techSkills, label => ({ label, selected: false })),
         durationConfirm: [{ label: 'Yes', value: false }, { label: 'No', value: false }],
         timezoneConfirm: [{ label: 'Yes', value: false }, { label: 'No', value: false }],
         agreedTerms: false,
         country: _.map(countries.getNames('en'), val => ({ label: val, selected: false })),
+        reffereal: [
+          { label: 'Google', selected: false },
+        ],
         // eslint-disable-next-line react/destructuring-assignment
       },
     };
@@ -39,10 +42,13 @@ class RecruitCRMJobApplyContainer extends React.Component {
 
   componentDidMount() {
     const { formData } = this.state;
-    const { user } = this.props;
+    const { user, recruitProfile, searchCandidates } = this.props;
     this.setState({
       formData: _.merge(formData, user),
     });
+    if (user && !recruitProfile) {
+      searchCandidates(user.email);
+    }
   }
 
   onFormInputChange(key, value) {
@@ -73,7 +79,7 @@ class RecruitCRMJobApplyContainer extends React.Component {
       const { formData, formErrors } = state;
       // Form validation happens here
       const requiredTextFields = [
-        'fname', 'lname', 'city', 'reffereal', 'phone', 'email',
+        'fname', 'lname', 'city', 'phone', 'email',
       ];
       // check required text fields for value
       // check min/max lengths
@@ -85,10 +91,6 @@ class RecruitCRMJobApplyContainer extends React.Component {
         else if (formData[key] && _.trim(formData[key]).length < 2) formErrors[key] = 'Must be at least 2 characters';
         else if (formData[key] && _.trim(formData[key]).length > 2) {
           switch (key) {
-            case 'reffereal':
-              if (_.trim(formData[key]).length > 2000) formErrors[key] = 'Must be max 2000 characters';
-              else delete formErrors[key];
-              break;
             case 'city':
             case 'phone':
               if (_.trim(formData[key]).length > 50) formErrors[key] = 'Must be max 50 characters';
@@ -106,12 +108,17 @@ class RecruitCRMJobApplyContainer extends React.Component {
         if (!_.find(formData.country, { selected: true })) formErrors.country = 'Please, select your country';
         else delete formErrors.country;
       }
+      // check for selected reffereal
+      if (!prop || prop === 'reffereal') {
+        if (!_.find(formData.reffereal, { selected: true })) formErrors.reffereal = 'Please, select your reffereal';
+        else delete formErrors.reffereal;
+      }
       // check payExpectation to be a number
       if (!prop || prop === 'payExpectation') {
         if (formData.payExpectation && _.trim(formData.payExpectation)) {
           if (!_.isInteger(_.toNumber(formData.payExpectation))) formErrors.payExpectation = 'Must be integer value in $';
           else delete formErrors.payExpectation;
-        } else delete formErrors.payExpectation;
+        } else formErrors.payExpectation = 'Required field';
       }
       // check for valid email
       if (!prop || prop === 'email') {
@@ -147,6 +154,14 @@ class RecruitCRMJobApplyContainer extends React.Component {
           }
         }
       }
+      // timezone & duration
+      if (!prop || prop === 'timezoneConfirm' || prop === 'durationConfirm') {
+        const a = _.find(formData[prop], { value: true });
+        if (a) {
+          if (a.label === 'No') formErrors[prop] = 'Sorry, we are only looking for candidates that can work the hours and duration listed';
+          else delete formErrors[prop];
+        }
+      }
       // updated state
       return {
         ...state,
@@ -157,7 +172,8 @@ class RecruitCRMJobApplyContainer extends React.Component {
 
   render() {
     const { formErrors, formData } = this.state;
-    return (
+    const { recruitProfile } = this.props;
+    return !recruitProfile ? <LoadingIndicator /> : (
       <GigApply
         {...this.props}
         onFormInputChange={this.onFormInputChange}
@@ -173,6 +189,7 @@ RecruitCRMJobApplyContainer.defaultProps = {
   user: null,
   applying: false,
   application: null,
+  recruitProfile: null,
 };
 
 RecruitCRMJobApplyContainer.propTypes = {
@@ -181,6 +198,8 @@ RecruitCRMJobApplyContainer.propTypes = {
   applyForJob: PT.func.isRequired,
   applying: PT.bool,
   application: PT.shape(),
+  searchCandidates: PT.func.isRequired,
+  recruitProfile: PT.shape(),
 };
 
 function mapStateToProps(state, ownProps) {
@@ -202,6 +221,8 @@ function mapStateToProps(state, ownProps) {
       ? state.recruitCRM[job.slug].applying : false,
     application: state.recruitCRM && state.recruitCRM[job.slug]
       ? state.recruitCRM[job.slug].application : null,
+    recruitProfile: state.recruitCRM && state.recruitCRM[profile.email]
+      ? state.recruitCRM[profile.email].profile : null,
   };
 }
 
@@ -212,6 +233,10 @@ function mapDispatchToActions(dispatch) {
       dispatch(a.applyForJobInit(job, payload));
       dispatch(a.applyForJobDone(job, payload));
     },
+    searchCandidates: (email) => {
+      dispatch(a.searchCandidatesInit(email));
+      dispatch(a.searchCandidatesDone(email));
+    },
   };
 }
 

src/shared/reducers/recruitCRM.js

@@ -84,6 +84,32 @@ function onApplyForJobDone(state, { payload }) {
   return r;
 }
 
+/**
+ * Handles recruit.applyForJobInit action.
+ * @param {Object} state Previous state.
+ */
+function onSearchCandidatesInit(state, { payload }) {
+  const r = {
+    ...state,
+  };
+  r[payload.email] = {};
+  return r;
+}
+
+/**
+ * Handles recruit.applyForJobDone action.
+ * @param {Object} state Previous state.
+ * @param {Object} action The action.
+ */
+function onSearchCandidatesDone(state, { payload }) {
+  const r = {
+    ...state,
+  };
+  const profile = _.isArray(payload.data) ? {} : payload.data.data[0];
+  r[payload.email].profile = profile;
+  return r;
+}
+
 /**
  * Creates recruitCRM reducer with the specified initial state.
  * @param {Object} state Optional. If not given, the default one is
@@ -98,6 +124,8 @@ function create(state = {}) {
     [actions.recruit.getJobDone]: onJobDone,
     [actions.recruit.applyForJobInit]: onApplyForJobInit,
     [actions.recruit.applyForJobDone]: onApplyForJobDone,
+    [actions.recruit.searchCandidatesInit]: onSearchCandidatesInit,
+    [actions.recruit.searchCandidatesDone]: onSearchCandidatesDone,
   }, state);
 }
 

src/shared/services/recruitCRM.js

@@ -67,4 +67,17 @@ export default class Service {
     }
     return res.json();
   }
+
+  /**
+   * Search for candidate
+   * @param {object} email The email to search with
+   */
+  async searchCandidates(email) {
+    const res = await fetch(`${this.baseUrl}/candidates/search?email=${email}`);
+    if (!res.ok) {
+      const error = new Error('Failed to search for candidates');
+      logger.error(error, res);
+    }
+    return res.json();
+  }
 }