VIEW DETAILS
diff --git a/src/shared/components/GUIKit/TextInput/index.jsx b/src/shared/components/GUIKit/TextInput/index.jsx
index d4ef9938c9..43d910a76a 100644
--- a/src/shared/components/GUIKit/TextInput/index.jsx
+++ b/src/shared/components/GUIKit/TextInput/index.jsx
@@ -28,7 +28,7 @@ function TextInput({
const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
return (
-
+
@@ -74,7 +77,7 @@ export default function GigApply(props) {
VIEW OTHER GIGS
) : (
-
GO TO GIG LIST
+
GO TO GIGS LIST
)
}
@@ -92,8 +95,16 @@ export default function GigApply(props) {
{
!application && !applying ? (
+ {!_.isEmpty(recruitProfile)
+ && (
+
+
It looks like you have applied to a gig previously. Perfect!
+
We have most of your information. Is there anything you would like to update to your Gig Work Profile?
+
+ )}
PERSONAL INFORMATION
-
Welcome to Topcoder Gigs! We’d like to get to know you.
+ {_.isEmpty(recruitProfile)
+ &&
Welcome to Topcoder Gigs! We’d like to get to know you.
}
@@ -151,7 +164,8 @@ export default function GigApply(props) {
/>
-
TOPCODER INFORMATION
+ {_.isEmpty(recruitProfile) &&
TOPCODER INFORMATION
}
+ {_.isEmpty(recruitProfile) && (
-
SHARE YOUR EXPECTATIONS
-
Your Professional Work History
+ )}
+
SHARE YOUR WEEKLY PAY EXPECTATIONS
onFormInputChange('payExpectation', val)}
errorMsg={formErrors.payExpectation}
value={formData.payExpectation}
- />
- onFormInputChange('availFrom', val ? val.toISOString() : null)}
- errorMsg={formErrors.availFrom}
- value={formData.availFrom}
+ required
/>
RESUME & SKILLS
-
Upload Your Resume or CV
+ {
+ recruitProfile.resume ? (
+
Upload Your Resume or CV, {recruitProfile.resume.filename}
+ ) : (
+
Upload Your Resume or CV
+ )
+ }
FINAL QUESTIONS
-
Please Complete the Following Questions
-
onFormInputChange('reffereal', val)}
errorMsg={formErrors.reffereal}
- value={formData.reffereal}
+ options={formData.reffereal}
required
/>
+ )}
- onFormInputChange('whyFit', val)}
- errorMsg={formErrors.whyFit}
- value={formData.whyFit}
- />
- Are you able to work during the specified timezone? ({`${getCustomField(job.custom_fields, 'Timezone')}`})
+ Are you able to work during the specified timezone? ({`${getCustomField(job.custom_fields, 'Timezone')}`}) *
onFormInputChange('timezoneConfirm', val)}
errorMsg={formErrors.timezoneConfirm}
options={formData.timezoneConfirm}
size="lg"
/>
- Are you ok to work with the duration of the gig? ({`${getCustomField(job.custom_fields, 'Duration')}`})
- onFormInputChange('durationConfirm', val)}
- errorMsg={formErrors.durationConfirm}
- options={formData.durationConfirm}
- size="lg"
- />
-
onFormInputChange('notes', val)}
- errorMsg={formErrors.notes}
+ Are you ok to work with the duration of the gig? ({/^\d+$/.test(duration) ? `${duration} Weeks` : duration}) *
+ onFormInputChange('durationConfirm', val)}
+ errorMsg={formErrors.durationConfirm}
+ options={formData.durationConfirm}
+ size="lg"
/>
@@ -313,4 +315,5 @@ GigApply.propTypes = {
applying: PT.bool,
application: PT.shape(),
user: PT.shape(),
+ recruitProfile: PT.shape().isRequired,
};
diff --git a/src/shared/components/Gigs/GigApply/style.scss b/src/shared/components/Gigs/GigApply/style.scss
index b807f0b8ab..ec860228fc 100644
--- a/src/shared/components/Gigs/GigApply/style.scss
+++ b/src/shared/components/Gigs/GigApply/style.scss
@@ -148,6 +148,25 @@
}
}
+ .info-text {
+ font-size: 16px;
+ margin-top: 55px;
+
+ h6 {
+ font-family: Barlow, sans-serif;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 600;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+
+ svg {
+ margin-left: 5px;
+ }
+ }
+ }
+
.form-section {
margin: 13px 0 50px;
diff --git a/src/shared/components/Gigs/GigDetails/index.jsx b/src/shared/components/Gigs/GigDetails/index.jsx
index c6faae5040..a28eb790af 100644
--- a/src/shared/components/Gigs/GigDetails/index.jsx
+++ b/src/shared/components/Gigs/GigDetails/index.jsx
@@ -57,6 +57,7 @@ export default function GigDetails(props) {
const [isModalOpen, setModalOpen] = useState(false);
const [isLoginModalOpen, setLoginModalOpen] = useState(false);
let inputRef;
+ const duration = getCustomField(job.custom_fields, 'Duration');
useEffect(() => {
if (referralId && formData.email && isEmpty(formErrors)) onSendClick();
@@ -95,7 +96,7 @@ export default function GigDetails(props) {
Duration
- {getCustomField(job.custom_fields, 'Duration')}
+ {/^\d+$/.test(duration) ? `${duration} Weeks` : duration}
diff --git a/src/shared/components/Gigs/LoginModal/modal.scss b/src/shared/components/Gigs/LoginModal/modal.scss
index ad4df8efb7..7b6dea3fb2 100644
--- a/src/shared/components/Gigs/LoginModal/modal.scss
+++ b/src/shared/components/Gigs/LoginModal/modal.scss
@@ -29,7 +29,7 @@
color: #ef476f;
font-size: 24px;
line-height: 36px;
- margin-bottom: 40px;
+ margin-bottom: 20px;
}
.ctaButtons {
diff --git a/src/shared/containers/Gigs/RecruitCRMJobApply.jsx b/src/shared/containers/Gigs/RecruitCRMJobApply.jsx
index c0b847e339..f418265630 100644
--- a/src/shared/containers/Gigs/RecruitCRMJobApply.jsx
+++ b/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,19 @@ 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 },
+ { label: 'LinkedIn', selected: false },
+ { label: 'Other Ad or Promotion', selected: false },
+ { label: 'Quora', selected: false },
+ { label: 'Uprisor Podcast', selected: false },
+ { label: 'YouTube or Video Ad', selected: false },
+ ],
// eslint-disable-next-line react/destructuring-assignment
},
};
@@ -37,12 +45,66 @@ class RecruitCRMJobApplyContainer extends React.Component {
this.validateForm = this.validateForm.bind(this);
}
+ // eslint-disable-next-line consistent-return
componentDidMount() {
const { formData } = this.state;
- const { user } = this.props;
- this.setState({
- formData: _.merge(formData, user),
- });
+ const { user, recruitProfile, searchCandidates } = this.props;
+ if (user) {
+ if (!recruitProfile) searchCandidates(user.email);
+ else {
+ const { country, skills } = formData;
+ const recruitSkills = recruitProfile.skill.split(',').map(s => s.toLowerCase());
+ return this.setState({
+ formData: _.merge(formData, user, {
+ phone: recruitProfile.contact_number,
+ country: _.map(
+ country,
+ c => ({
+ label: c.label,
+ selected: c.label.toLowerCase() === recruitProfile.locality.toLowerCase(),
+ }),
+ ),
+ skills: skills.map(s => ({
+ label: s.label,
+ selected: recruitSkills.includes(s.label.toLowerCase()),
+ })),
+ payExpectation: recruitProfile.salary_expectation,
+ }),
+ });
+ }
+ this.setState({
+ formData: _.merge(formData, user),
+ });
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ const { recruitProfile, user } = this.props;
+ if (recruitProfile !== prevProps.recruitProfile && !_.isEmpty(recruitProfile)) {
+ // when recruit profile loaded
+ const { formData } = this.state;
+ const { country, skills } = formData;
+ const recruitSkills = recruitProfile.skill.split(',').map(s => s.toLowerCase());
+ const updatedForm = {
+ formData: _.merge(formData, user, {
+ phone: recruitProfile.contact_number,
+ country: _.map(
+ country,
+ c => ({
+ label: c.label,
+ selected: c.label.toLowerCase() === recruitProfile.locality.toLowerCase(),
+ }),
+ ),
+ skills: skills.map(s => ({
+ label: s.label,
+ selected: recruitSkills.includes(s.label.toLowerCase()),
+ })),
+ payExpectation: recruitProfile.salary_expectation,
+ }),
+ };
+ // eslint-disable-next-line react/no-did-update-set-state
+ this.setState(updatedForm);
+ }
}
onFormInputChange(key, value) {
@@ -71,9 +133,10 @@ class RecruitCRMJobApplyContainer extends React.Component {
validateForm(prop) {
this.setState((state) => {
const { formData, formErrors } = state;
+ const { recruitProfile } = this.props;
// 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 +148,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 +165,19 @@ 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 (_.isEmpty(recruitProfile)) {
+ 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') {
@@ -134,8 +200,8 @@ class RecruitCRMJobApplyContainer extends React.Component {
}
// has CV file ready for upload
if (!prop || prop === 'fileCV') {
- if (!formData.fileCV) formErrors.fileCV = 'Please, pick your CV file for uploading';
- else {
+ if (!formData.fileCV && _.isEmpty(recruitProfile)) formErrors.fileCV = 'Please, pick your CV file for uploading';
+ else if (formData.fileCV) {
const sizeInMB = (formData.fileCV.size / (1024 * 1024)).toFixed(2);
if (sizeInMB > 8) {
formErrors.fileCV = 'Max file size is limited to 8 MB';
@@ -147,6 +213,24 @@ class RecruitCRMJobApplyContainer extends React.Component {
}
}
}
+ // timezone
+ if (!prop || prop === 'timezoneConfirm') {
+ 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];
+ } else if (prop) formErrors[prop] = 'Required field';
+ else if (!prop && !_.find(formData.timezoneConfirm, { value: true })) formErrors.timezoneConfirm = 'Required field';
+ }
+ // duration
+ if (!prop || 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];
+ } else if (prop) formErrors[prop] = 'Required field';
+ else if (!prop && !_.find(formData.durationConfirm, { value: true })) formErrors.durationConfirm = 'Required field';
+ }
// updated state
return {
...state,
@@ -157,7 +241,8 @@ class RecruitCRMJobApplyContainer extends React.Component {
render() {
const { formErrors, formData } = this.state;
- return (
+ const { recruitProfile, user } = this.props;
+ return !recruitProfile && user ? : (
{
+ dispatch(a.searchCandidatesInit(email));
+ dispatch(a.searchCandidatesDone(email));
+ },
};
}
diff --git a/src/shared/reducers/recruitCRM.js b/src/shared/reducers/recruitCRM.js
index 786caef018..0ff13090e3 100644
--- a/src/shared/reducers/recruitCRM.js
+++ b/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);
}
diff --git a/src/shared/routes/index.jsx b/src/shared/routes/index.jsx
index 53ead154ec..34782cdfc0 100644
--- a/src/shared/routes/index.jsx
+++ b/src/shared/routes/index.jsx
@@ -18,7 +18,7 @@ import PT from 'prop-types';
import { connect } from 'react-redux';
-import socialImage from 'assets/images/social.jpg';
+import socialImage from 'assets/images/social.png';
import Communities from './Communities';
import Examples from './Examples';
diff --git a/src/shared/services/recruitCRM.js b/src/shared/services/recruitCRM.js
index e20cccb5f4..c71bae877b 100644
--- a/src/shared/services/recruitCRM.js
+++ b/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();
+ }
}