Merge pull request #9495 from thesahindia/thesahindia/fix-error-message

Add specific error messages for additional details page
Expensify · Jul 8, 2022 · 3ee772b · 3ee772b
2 parents 0fcc492 + 35454e1
commit 3ee772b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -609,6 +609,7 @@ export default {
         legalMiddleNameLabel: 'Legal middle name',
         legalLastNameLabel: 'Legal last name',
         selectAnswer: 'You need to select a response to proceed.',
+        ssnFull9Error: 'Please enter a valid 9 digit SSN',
         needSSNFull9: 'We\'re having trouble verifying your SSN. Please enter the full 9 digits of your SSN.',
         weCouldNotVerify: 'We could not verify',
         pleaseFixIt: 'Please fix this information before continuing.',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -609,6 +609,7 @@ export default {
         legalMiddleNameLabel: 'Segundo nombre legal',
         legalLastNameLabel: 'Apellido legal',
         selectAnswer: 'Selecciona una respuesta.',
+        ssnFull9Error: 'Por favor escribe los 9 dígitos de un SSN válido',
         needSSNFull9: 'Estamos teniendo problemas para verificar su SSN. Ingresa los 9 dígitos del SSN.',
         weCouldNotVerify: 'No pudimos verificar',
         pleaseFixIt: 'Corrije esta información antes de continuar.',

diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
@@ -256,7 +256,7 @@ function validateIdentity(identity) {
  * @param {Boolean} [isCountryCodeOptional]
  * @returns {Boolean}
  */
-function isValidUSPhone(phoneNumber, isCountryCodeOptional) {
+function isValidUSPhone(phoneNumber = '', isCountryCodeOptional) {
     // Remove non alphanumeric characters from the phone number
     const sanitizedPhone = phoneNumber.replace(CONST.REGEX.NON_ALPHA_NUMERIC, '');
     const isUsPhone = isCountryCodeOptional

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -106,6 +106,20 @@ class AdditionalDetailsStep extends React.Component {
             'ssn',
         ];
 
+        this.errorTranslationKeys = {
+            legalFirstName: 'bankAccount.error.firstName',
+            legalLastName: 'bankAccount.error.lastName',
+            addressStreet: 'bankAccount.error.addressStreet',
+            addressCity: 'bankAccount.error.addressCity',
+            addressState: 'bankAccount.error.addressState',
+            addressZip: 'bankAccount.error.zipCode',
+            phoneNumber: 'bankAccount.error.phoneNumber',
+            dob: 'bankAccount.error.dob',
+            age: 'bankAccount.error.age',
+            ssn: 'bankAccount.error.ssnLast4',
+            ssnFull9: 'additionalDetailsStep.ssnFull9Error',
+        };
+
         this.fieldNameTranslationKeys = {
             legalFirstName: 'additionalDetailsStep.legalFirstNameLabel',
             legalLastName: 'additionalDetailsStep.legalLastNameLabel',
@@ -141,7 +155,7 @@ class AdditionalDetailsStep extends React.Component {
             return '';
         }
 
-        return `${this.props.translate(this.fieldNameTranslationKeys[fieldName])} ${this.props.translate('common.isRequiredField')}.`;
+        return this.props.translate(this.errorTranslationKeys[fieldName]);
     }
 
     /**
@@ -164,6 +178,10 @@ class AdditionalDetailsStep extends React.Component {
             errors.dob = true;
         }
 
+        if (!ValidationUtils.meetsAgeRequirements(this.props.walletAdditionalDetailsDraft.dob)) {
+            errors.age = true;
+        }
+
         if (!ValidationUtils.isValidAddress(this.props.walletAdditionalDetailsDraft.addressStreet)) {
             errors.addressStreet = true;
         }
@@ -172,7 +190,11 @@ class AdditionalDetailsStep extends React.Component {
             errors.phoneNumber = true;
         }
 
-        if (!ValidationUtils.isValidSSNLastFour(this.props.walletAdditionalDetailsDraft.ssn) && !ValidationUtils.isValidSSNFullNine(this.props.walletAdditionalDetailsDraft.ssn)) {
+        if (this.props.walletAdditionalDetails.shouldAskForFullSSN) {
+            if (!ValidationUtils.isValidSSNFullNine(this.props.walletAdditionalDetailsDraft.ssn)) {
+                errors.ssnFull9 = true;
+            }
+        } else if (!ValidationUtils.isValidSSNLastFour(this.props.walletAdditionalDetailsDraft.ssn)) {
             errors.ssn = true;
         }
 
@@ -201,6 +223,26 @@ class AdditionalDetailsStep extends React.Component {
         });
     }
 
+    /**
+     * Clear both errors associated with dob, and set the new value.
+     *
+     * @param {String} value
+     */
+    clearDateErrorsAndSetValue(value) {
+        this.formHelper.clearErrors(this.props, ['dob', 'age']);
+        Wallet.updateAdditionalDetailsDraft({dob: value});
+    }
+
+    /**
+     * Clear ssn and ssnFull9 error and set the new value
+     *
+     * @param {String} value
+     */
+    clearSSNErrorAndSetValue(value) {
+        this.formHelper.clearErrors(this.props, ['ssn', 'ssnFull9']);
+        Wallet.updateAdditionalDetailsDraft({ssn: value});
+    }
+
     /**
      * @param {String} fieldName
      * @param {String} value
@@ -327,18 +369,18 @@ class AdditionalDetailsStep extends React.Component {
                                 <DatePicker
                                     containerStyles={[styles.mt4]}
                                     label={this.props.translate(this.fieldNameTranslationKeys.dob)}
-                                    onInputChange={val => this.clearErrorAndSetValue('dob', val)}
+                                    onInputChange={val => this.clearDateErrorsAndSetValue(val)}
                                     defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''}
                                     placeholder={this.props.translate('common.dob')}
-                                    errorText={this.getErrorText('dob')}
+                                    errorText={this.getErrorText('dob') || this.getErrorText('age')}
                                     maximumDate={new Date()}
                                 />
                                 <TextInput
                                     containerStyles={[styles.mt4]}
                                     label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
-                                    onChangeText={val => this.clearErrorAndSetValue('ssn', val)}
+                                    onChangeText={val => this.clearSSNErrorAndSetValue(val)}
                                     value={this.props.walletAdditionalDetailsDraft.ssn || ''}
-                                    errorText={this.getErrorText('ssn')}
+                                    errorText={this.getErrorText('ssnFull9') || this.getErrorText('ssn')}
                                     maxLength={shouldAskForFullSSN ? 9 : 4}
                                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                                 />