Topcoder Member Profile UI Fixes and Enhancements - Part 2

src/shared/components/Settings/CofirmationModal/index.jsx

@@ -4,15 +4,14 @@ import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
 import modal from './styles.scss';
 
 export default function ConfirmationModal(props) {
-  const { onConfirm, onCancel } = props;
+  const { onConfirm, onCancel, name } = props;
   return (
     <Modal theme={modal}>
       <div styleName="modal.deletion-confirmation-container">
         <div styleName="modal.deletion-confirmation">
-          <div styleName="modal.deletion-confirmation-title">Heads Up!</div>
+          <div styleName="modal.deletion-confirmation-title">HEADS UP!</div>
           <div styleName="modal.deletion-confirmation-message">
-            Are you sure you want to delete? This action can&apos;t be undone
-            later.
+            Are you sure you want to delete `{name}`? This action can&apos;t be undone.
           </div>
           <div styleName="modal.deletion-confirmation-buttons">
             <div styleName="modal.deletion-confirmation-button-yes">
@@ -31,4 +30,5 @@ export default function ConfirmationModal(props) {
 ConfirmationModal.propTypes = {
   onConfirm: PT.func.isRequired,
   onCancel: PT.func.isRequired,
+  name: PT.string.isRequired,
 };

src/shared/components/Settings/ErrorMessage/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+const marginTop = (value) => {
+  if (value) {
+    return 'active-margin';
+  }
+
+  return 'active';
+};
+
+const ErrorMessage = ({ invalid, message, addMargin }) => (
+  <span styleName={`error-message ${invalid ? marginTop(addMargin) : ''}`}>
+    {message}
+  </span>
+);
+
+ErrorMessage.defaultProps = {
+  addMargin: false,
+};
+
+ErrorMessage.propTypes = {
+  invalid: PropTypes.bool.isRequired,
+  message: PropTypes.string.isRequired,
+  addMargin: PropTypes.bool,
+};
+
+export default ErrorMessage;

src/shared/components/Settings/ErrorMessage/styles.scss

@@ -0,0 +1,27 @@
+@import "../style";
+
+.error-message {
+  display: none;
+
+  &.active {
+    @include roboto-medium;
+
+    display: inline;
+    border-radius: 5px;
+    background-color: $tc-red-10;
+    color: $tc-red-110;
+    font-size: 15px;
+    margin: 0 auto 0 0;
+  }
+
+  &.active-margin {
+    @include roboto-medium;
+
+    display: inline;
+    border-radius: 5px;
+    background-color: $tc-red-10;
+    color: $tc-red-110;
+    font-size: 15px;
+    margin: 10px auto 0 0;
+  }
+}

src/shared/components/Settings/Profile/BasicInfo/index.jsx

@@ -15,12 +15,14 @@ import { PrimaryButton } from 'topcoder-react-ui-kit';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import Select from 'components/Select';
 import DatePicker from 'components/challenge-listing/Filters/DatePicker';
+import ErrorMessage from 'components/Settings/ErrorMessage';
 import ImageInput from '../ImageInput';
 import Track from './Track';
 import DefaultImageInput from './ImageInput';
 import dropdowns from './dropdowns.json';
 import tracks from './tracks';
 
+
 import './styles.scss';
 
 export default class BasicInfo extends ConsentComponent {
@@ -41,7 +43,6 @@ export default class BasicInfo extends ConsentComponent {
     this.state = {
       inputChanged: false,
       formInvalid: false,
-      errorMessage: '',
       basicInfoTrait: this.loadBasicInfoTraits(userTraits),
       personalizationTrait: this.loadPersonalizationTrait(userTraits),
       newBasicInfo: {
@@ -98,46 +99,26 @@ export default class BasicInfo extends ConsentComponent {
 
   onCheckFormValue(newBasicInfo) {
     let invalid = false;
-    let errorMessage = '';
-    let dateError = '';
-    let birthDateInvalid = false;
-    const invalidFields = [];
 
     if (!_.trim(newBasicInfo.firstName).length) {
-      invalidFields.push('First Name');
       invalid = true;
     }
 
     if (!_.trim(newBasicInfo.lastName).length) {
-      invalidFields.push('Last Name');
       invalid = true;
     }
 
     if (!_.trim(newBasicInfo.country).length) {
-      invalidFields.push('Country');
       invalid = true;
     }
 
-    if (invalidFields.length > 0) {
-      errorMessage += invalidFields.join(', ');
-      errorMessage += ' cannot be empty';
-    }
-
     if (_.trim(newBasicInfo.birthDate).length > 0) {
       if (!moment().isAfter(newBasicInfo.birthDate)) {
-        dateError = 'You must enter a valid date for Birth Date';
-        birthDateInvalid = true;
+        invalid = true;
       }
     }
 
-    if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
-    } else if (dateError.length > 0) {
-      errorMessage = dateError;
-      invalid = birthDateInvalid;
-    }
-
-    this.setState({ errorMessage, formInvalid: invalid });
+    this.setState({ formInvalid: invalid });
     return invalid;
   }
 
@@ -170,7 +151,7 @@ export default class BasicInfo extends ConsentComponent {
    */
   onHandleSaveBasicInfo(e) {
     e.preventDefault();
-    this.setState({ isSaving: true });
+    this.setState({ isSaving: true, inputChange: true });
     const { newBasicInfo } = this.state;
     if (this.onCheckFormValue(newBasicInfo)) {
       this.setState({ isSaving: false });
@@ -465,8 +446,7 @@ export default class BasicInfo extends ConsentComponent {
   render() {
     const {
       newBasicInfo,
-      formInvalid,
-      errorMessage,
+      inputChanged,
     } = this.state;
 
     const canModifyTrait = !this.props.traitRequestCount;
@@ -507,6 +487,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="firstName" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newBasicInfo.firstName} maxLength="64" required />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && inputChanged} message="First Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">
@@ -519,6 +500,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="lastName" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newBasicInfo.lastName} maxLength="64" required />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && inputChanged} message="Last Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">
@@ -619,6 +601,7 @@ export default class BasicInfo extends ConsentComponent {
                   disabled={!canModifyTrait}
                   clearable={false}
                 />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.country) && inputChanged} message="Country cannot be empty" addMargin />
               </div>
             </div>
           </form>
@@ -745,6 +728,7 @@ export default class BasicInfo extends ConsentComponent {
                       </label>
 
                       <input disabled={!canModifyTrait} id="firstNameId" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newBasicInfo.firstName} maxLength="64" required />
+                      <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && inputChanged} addMargin message="First Name cannot be empty" />
                     </div>
                     <div styleName="field">
                       <label htmlFor="lastNameId">
@@ -753,6 +737,7 @@ export default class BasicInfo extends ConsentComponent {
                         <input type="hidden" />
                       </label>
                       <input disabled={!canModifyTrait} id="lastNameId" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newBasicInfo.lastName} maxLength="64" required />
+                      <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && inputChanged} addMargin message="Last Name cannot be empty" />
                     </div>
                   </div>
                 </div>
@@ -826,6 +811,7 @@ export default class BasicInfo extends ConsentComponent {
                     clearable={false}
                     disabled={!canModifyTrait}
                   />
+                  <ErrorMessage invalid={_.isEmpty(newBasicInfo.country) && inputChanged} message="Country cannot be empty" />
                 </div>
               </div>
               <div styleName="row">
@@ -931,9 +917,6 @@ export default class BasicInfo extends ConsentComponent {
             }
           </div>
         </div>
-        <div styleName={`error-message ${formInvalid ? 'active' : ''}`}>
-          {errorMessage}
-        </div>
         <div styleName="button-save">
           <PrimaryButton
             styleName="white-label"

src/shared/components/Settings/Profile/BasicInfo/styles.scss

@@ -52,22 +52,6 @@
   }
 }
 
-.error-message {
-  display: none;
-
-  &.active {
-    @include roboto-medium;
-
-    display: block;
-    border-radius: 5px;
-    background-color: $tc-red-10;
-    color: $tc-red-110;
-    font-size: 15px;
-    padding: 15px;
-    margin: 15px 0;
-  }
-}
-
 .form-container-default {
   @include form-container-default;
 
@@ -181,22 +165,6 @@
     }
   }
 
-  .error-message {
-    display: none;
-
-    &.active {
-      @include roboto-medium;
-
-      display: block;
-      border-radius: 5px;
-      background-color: $tc-red-10;
-      color: $tc-red-110;
-      font-size: 15px;
-      padding: 15px;
-      margin-bottom: 15px;
-    }
-  }
-
   .form-container {
     flex: 1;
     display: flex;
@@ -238,7 +206,8 @@
         margin-right: 10px;
 
         @include upto-sm {
-          display: block;
+          display: flex;
+          flex-direction: column;
           margin-right: 0;
           padding-bottom: 10px;
         }

src/shared/components/Settings/Profile/Education/List/Item/index.jsx

@@ -40,7 +40,7 @@ export default function Item(props) {
         </div>
         <div styleName={`education-parameters${hasSecondLine() ? '' : ' single-line'}`}>
           <div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
-            { `${education.schoolCollegeName} ${education.type}` }
+            { `${education.schoolCollegeName}` }
           </div>
           {
             hasSecondLine() && (