fix: progressive registration form issue

ref issue #3833
- show "Company Name" for customers
- align labels when showing validation errors
- added validation for business email
- fixed "Send My Request" button typo

Author: Maksym Mykhailenko

src/projects/create/components/UpdateUserInfo.js

@@ -62,12 +62,12 @@ class UpdateUserInfo extends Component {
             showAvatar={false}
             showBusinessEmail={!isTopcoderUser}
             showBusinessPhone={!isTopcoderUser}
-            showCompanyName={false}
+            showCompanyName={!isTopcoderUser}
             isRequiredTimeZone={isTopcoderUser}
             isRequiredCountry={isTopcoderUser}
             isRequiredWorkingHours={isTopcoderUser}
             isRequiredBusinessEmail={!isTopcoderUser}
-            submitButton="Send my Request"
+            submitButton="Send My Request"
             showBackButton
             onBack={closeUserSettings}
             shouldDoValidateOnStart

src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx

@@ -120,13 +120,24 @@ class ProfileSettingsForm extends Component {
 
   getField(label, name, isRequired = false, isDisabled = false) {
     let validations = null
+    let validationErrors
+
     if (name === 'businessPhone') {
       validations = {
         // use same regexp as on server side
         matchRegexp: /^\+(?:[0-9] ?){6,14}[0-9]$/,
       }
     }
 
+    if (name === 'businessEmail') {
+      validations = {
+        isEmail: true,
+      }
+      validationErrors = {
+        isEmail: 'Please, enter correct email'
+      }
+    }
+
     return (
       <div className="field">
         <div className="label">
@@ -139,7 +150,8 @@ class ProfileSettingsForm extends Component {
           name={name}
           validations={validations}
           value={this.props.values.settings[name] || ''}
-          validationError={`Please enter ${label}`}
+          validationError={`Please, enter ${label}`}
+          validationErrors={validationErrors}
           required={isRequired}
           disabled={isDisabled}
         />
@@ -340,12 +352,12 @@ class ProfileSettingsForm extends Component {
         </div>
         <div className="field">
           {isRequiredWorkingHours ? (
-            <div className="label">
+            <div className="label label-working-hours">
               <span styleName="fieldLabelText">Normal Working Hours</span>&nbsp;
               <sup styleName="requiredMarker">*</sup>
             </div>
           ) : (
-            <div className="label">
+            <div className="label label-working-hours">
               <span styleName="fieldLabelText">Normal Working Hours</span>
             </div>
           )}

src/routes/settings/routes/profile/components/ProfileSettingsForm.scss

@@ -12,7 +12,7 @@
     > .field {
       display: flex;
       flex-wrap: wrap;
-      align-items: center;
+      align-items: flex-start;
 
       @media screen and (max-width: $screen-md - 1px) {
         flex-direction: column;
@@ -34,16 +34,26 @@
         min-width: 180px;
         max-width: 200px;
         text-align: right;
-        padding-right: 15px;
+        padding: 11px 15px 11px 0;
         color: $tc-gray-80;
         font-size: 15px;
         line-height: 18px;
 
+        &.label-working-hours {
+          padding-top: 28px;
+        }
+
         @media screen and (max-width: $screen-md - 1px) {
           flex: none;
           margin-bottom: 10px;
           margin-left: 10px;
+          padding-top: 0;
+          padding-bottom: 0;
           text-align: left;
+
+          &.label-working-hours {
+            padding-top: 0;
+          }
         }
       }