Country dropdown

Author: kkartunov

src/shared/actions/recruitCRM.js

@@ -1,5 +1,6 @@
 import { redux } from 'topcoder-react-utils';
 import Service from 'services/recruitCRM';
+import _ from 'lodash';
 
 /**
  * Jobs page fetch init
@@ -58,7 +59,7 @@ function normalizeRecruitPayload(payload) {
     email: payload.email,
     contact_number: payload.phone,
     city: payload.city,
-    locality: payload.country,
+    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(','),

src/shared/components/GUIKit/Dropdown/style.scss

@@ -27,6 +27,7 @@
   padding-top: 12px;
 
   &.haveValue .label,
+  &.haveError .label,
   &.isFocused .label {
     display: flex;
   }

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

@@ -14,6 +14,7 @@ import Checkbox from 'components/GUIKit/Checkbox';
 import { getCustomField } from 'utils/gigs';
 import Modal from 'components/Contentful/Modal';
 import FilestackFilePicker from 'components/GUIKit/FilePicker';
+import Dropdown from 'components/GUIKit/Dropdown';
 import './style.scss';
 import bigCheckmark from 'assets/images/big-checkmark.png';
 import SadFace from 'assets/images/sad-face-icon.svg';
@@ -72,7 +73,7 @@ export default function GigApply(props) {
             }
             {
               !application ? (
-                <div styleName="form-wrap">
+                <div styleName={`form-wrap ${applying ? 'applying' : ''}`}>
                   <h4>PERSONAL INFORMATION</h4>
                   <p>Welcome to Topcoder Gigs! We’d like to get to know you.</p>
                   <div styleName="form-section">
@@ -121,12 +122,12 @@ export default function GigApply(props) {
                         value={formData.city}
                         required
                       />
-                      <TextInput
+                      <Dropdown
                         placeholder="Country"
                         label="Country"
                         onChange={val => onFormInputChange('country', val)}
                         errorMsg={formErrors.country}
-                        value={formData.country}
+                        options={formData.country}
                         required
                       />
                     </div>

src/shared/components/Gigs/GigApply/style.scss

@@ -245,4 +245,9 @@
     }
     /* stylelint-enable */
   }
+
+  .form-wrap.applying .form-section {
+    opacity: 0.6;
+    pointer-events: none !important;
+  }
 }

src/shared/containers/Gigs/RecruitCRMJobApply.jsx

@@ -11,6 +11,9 @@ import { connect } from 'react-redux';
 import { isValidEmail } from 'utils/tc';
 import techSkills from './techSkills';
 
+const countries = require('i18n-iso-countries');
+countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
+
 class RecruitCRMJobApplyContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -26,6 +29,7 @@ class RecruitCRMJobApplyContainer extends React.Component {
           { label: '10 hours', checked: false }, { label: '20 hours', checked: false }, { label: '30 hours', checked: false }, { label: '40 hours', checked: false },
         ],
         agreedTerms: false,
+        country: _.map(countries.getNames('en'), val => ({ label: val, selected: false })),
         // eslint-disable-next-line react/destructuring-assignment
       },
     };
@@ -69,14 +73,17 @@ class RecruitCRMJobApplyContainer extends React.Component {
       const { formData, formErrors } = state;
       // Form validation happens here
       const requiredTextFields = [
-        'fname', 'lname', 'city', 'country', 'reffereal', 'phone', 'email',
+        'fname', 'lname', 'city', 'reffereal', 'phone', 'email',
       ];
       // check required text fields for value
       _.each(requiredTextFields, (key) => {
         if (!formData[key] || !_.trim(formData[key])) formErrors[key] = 'Required field';
         else if (formData[key] && _.trim(formData[key]).length < 2) formErrors[key] = 'Must be at least 2 characters';
         else delete formErrors[key];
       });
+      // check for selected country
+      if (!_.find(formData.country, { selected: true })) formErrors.country = 'Please, select your country';
+      else delete formErrors.country;
       // check payExpectation to be a number
       if (formData.payExpectation && _.trim(formData.payExpectation)) {
         if (!_.isInteger(_.toNumber(formData.payExpectation))) formErrors.payExpectation = 'Must be integer value in $';