#4891 team review fixes

Author: kkartunov

src/assets/images/back-arrow-gig-apply.png

@@ -106,12 +106,22 @@ function normalizeRecruitPayload(job, payload) {
  */
 async function applyForJobDone(job, payload) {
   const ss = new Service();
-  const res = await ss.applyForJob(job.slug, normalizeRecruitPayload(job, payload));
+  try {
+    const res = await ss.applyForJob(job.slug, normalizeRecruitPayload(job, payload));
 
-  return {
-    id: job.slug,
-    data: res,
-  };
+    return {
+      id: job.slug,
+      data: res,
+    };
+  } catch (error) {
+    return {
+      id: job.slug,
+      data: {
+        error: true,
+        errorObj: error,
+      },
+    };
+  }
 }
 
 export default redux.createActions({

src/shared/actions/recruitCRM.js

@@ -3,6 +3,7 @@ $gui-kit-gray-30: #aaa;
 $gui-kit-gray-90: #2a2a2a;
 $gui-kit-level-2: #0ab88a;
 $gui-kit-level-5: #ef476f;
+$gui-kit-active-label: #229174;
 
 @mixin textInputLabel {
   font-size: 12px;

src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss

@@ -47,7 +47,7 @@
   }
 
   input:not([type='checkbox']):focus + label {
-    color: $gui-kit-level-2;
+    color: $gui-kit-active-label;
   }
 
   input:not([type='checkbox']).haveError + label,

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

@@ -15,9 +15,11 @@ import { getCustomField } from 'utils/gigs';
 import Modal from 'components/Contentful/Modal';
 import FilestackFilePicker from 'components/GUIKit/FilePicker';
 import Dropdown from 'components/GUIKit/Dropdown';
+import LoadingIndicator from 'components/LoadingIndicator';
 import './style.scss';
 import bigCheckmark from 'assets/images/big-checkmark.png';
 import SadFace from 'assets/images/sad-face-icon.svg';
+import backArrowGig from 'assets/images/back-arrow-gig-apply.png';
 
 export default function GigApply(props) {
   const {
@@ -36,8 +38,8 @@ export default function GigApply(props) {
           </div>
         ) : (
           <div styleName="wrap">
+            <Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="back-link"><img src={backArrowGig} alt="back-arrow-icon" /> GIG DETAILS</Link>
             <h2>{job.name}</h2>
-            <Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="back-link">GIG DETAILS</Link>
             <div styleName="separator" />
             {
               application ? (
@@ -72,8 +74,16 @@ export default function GigApply(props) {
               ) : null
             }
             {
-              !application ? (
-                <div styleName={`form-wrap ${applying ? 'applying' : ''}`}>
+              applying ? (
+                <div styleName="loading-wrap">
+                  <LoadingIndicator />
+                  <p styleName="loading-text">Processing your application…</p>
+                </div>
+              ) : null
+            }
+            {
+              !application && !applying ? (
+                <div styleName="form-wrap">
                   <h4>PERSONAL INFORMATION</h4>
                   <p>Welcome to Topcoder Gigs! We’d like to get to know you.</p>
                   <div styleName="form-section">

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

@@ -1,9 +1,22 @@
 @import '~styles/mixins';
 @import "~components/Contentful/default";
 
+.loading-wrap {
+  margin-top: 35px;
+
+  .loading-text {
+    font-family: Roboto, sans-serif;
+    font-size: 24px;
+    line-height: 26px;
+    color: #2a2a2a;
+    text-align: center;
+    margin-top: 26px;
+  }
+}
+
 .container {
   max-width: $screen-lg;
-  min-height: 50vh;
+  min-height: 80vh;
   margin: auto;
   color: #2a2a2a;
 
@@ -46,8 +59,8 @@
     h2 {
       color: #26b3c5;
       text-align: center;
-      margin-top: 47px;
-      margin-bottom: 40px;
+      margin-top: 6px;
+      margin-bottom: 83px;
 
       @include xs-to-md {
         text-align: left;
@@ -77,6 +90,8 @@
 
       h2 {
         color: #2a2a2a;
+        margin-top: 31px;
+        margin-bottom: 20px;
       }
 
       p {
@@ -89,6 +104,10 @@
           line-height: 36px;
         }
       }
+
+      .cta-buttons {
+        margin-top: 30px;
+      }
     }
 
     .form-wrap {
@@ -103,6 +122,10 @@
       p {
         font-size: 14px;
         line-height: 22px;
+
+        a {
+          font-size: 14px;
+        }
       }
 
       .form-section {
@@ -112,7 +135,7 @@
           display: grid;
           gap: 20px;
           grid-template-columns: 1fr 1fr;
-          margin-bottom: 20px;
+          margin-bottom: 8px;
 
           @include xs-to-md {
             display: flex;
@@ -212,7 +235,7 @@
       }
     }
   }
-
+/* stylelint-disable */
   .cta-buttons {
     display: flex;
     justify-content: center;
@@ -222,7 +245,6 @@
       flex-direction: column;
     }
 
-    /* stylelint-disable */
     a {
       background-color: #fff;
       border: 1px solid #137d60;
@@ -243,11 +265,6 @@
         text-align: center;
       }
     }
-    /* stylelint-enable */
-  }
-
-  .form-wrap.applying .form-section {
-    opacity: 0.6;
-    pointer-events: none !important;
   }
+  /* stylelint-enable */
 }

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

@@ -35,7 +35,7 @@ const ReactHtmlParserOptions = {
 };
 
 export default function GigDetails(props) {
-  const { job } = props;
+  const { job, application } = props;
   let shareUrl;
   if (isomorphy.isClientSide()) {
     shareUrl = encodeURIComponent(window.location.href);
@@ -110,7 +110,11 @@ export default function GigDetails(props) {
                   </strong>
                 </div>
                 <div styleName="cta-buttons">
-                  <Link styleName="primaryBtn" to={`${config.GIGS_PAGES_PATH}/${job.slug}/apply`}>APPLY TO THIS JOB</Link>
+                  {
+                    !application || !application.success ? (
+                      <Link styleName="primaryBtn" to={`${config.GIGS_PAGES_PATH}/${job.slug}/apply`}>APPLY TO THIS JOB</Link>
+                    ) : null
+                  }
                   <Link to={config.GIGS_PAGES_PATH}>VIEW OTHER JOBS</Link>
                 </div>
               </div>
@@ -159,6 +163,11 @@ export default function GigDetails(props) {
   );
 }
 
+GigDetails.defaultProps = {
+  application: null,
+};
+
 GigDetails.propTypes = {
   job: PT.shape().isRequired,
+  application: PT.shape(),
 };

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

@@ -46,7 +46,6 @@ class RecruitCRMJobApplyContainer extends React.Component {
     this.setState({
       formData: _.merge(formData, user),
     });
-    this.validateForm();
   }
 
   onFormInputChange(key, value) {
@@ -65,7 +64,12 @@ class RecruitCRMJobApplyContainer extends React.Component {
   onApplyClick() {
     const { applyForJob, job } = this.props;
     const { formData } = this.state;
-    applyForJob(job, formData);
+    this.validateForm();
+    this.setState((state) => {
+      if (_.isEmpty(state.formErrors)) {
+        applyForJob(job, formData);
+      }
+    });
   }
 
   validateForm() {

src/shared/containers/Gigs/RecruitCRMJobApply.jsx

@@ -30,18 +30,21 @@ class RecruitCRMJobDetailsContainer extends React.Component {
       loading,
       job,
       isApply,
+      application,
     } = this.props;
 
     if (loading) {
       return <LoadingIndicator />;
     }
 
-    return isApply ? <RecruitCRMJobApply job={job} /> : <GigDetails job={job} />;
+    return isApply
+      ? <RecruitCRMJobApply job={job} /> : <GigDetails job={job} application={application} />;
   }
 }
 
 RecruitCRMJobDetailsContainer.defaultProps = {
   job: {},
+  application: null,
 };
 
 RecruitCRMJobDetailsContainer.propTypes = {
@@ -50,13 +53,15 @@ RecruitCRMJobDetailsContainer.propTypes = {
   job: PT.shape(),
   id: PT.string.isRequired,
   isApply: PT.bool.isRequired,
+  application: PT.shape(),
 };
 
 function mapStateToProps(state, ownProps) {
   const data = state.recruitCRM[ownProps.id];
   return {
     job: data ? data.job : {},
     loading: data ? data.loading : true,
+    application: data ? data.application : null,
   };
 }