Merge pull request #5531 from akshayasalvi/vba-flow-validation

VBA Fields validation
Expensify · Oct 4, 2021 · 817240d · 817240d
2 parents 11cfb68 + 43f209a
commit 817240d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -73,6 +73,11 @@ const CONST = {
             VERIFYING: 'VERIFYING',
             PENDING: 'PENDING',
         },
+        MAX_LENGTH: {
+            TAX_ID_NUMBER: 9,
+            SSN: 4,
+            ZIP_CODE: 5,
+        },
     },
     INCORPORATION_TYPES: {
         LLC: 'LLC',
@@ -420,11 +425,12 @@ const CONST = {
         LARGE: 'large',
         DEFAULT: 'default',
     },
-
+    PHONE_MAX_LENGTH: 15,
     REGEX: {
         US_PHONE: /^\+1\d{10}$/,
         DIGITS_AND_PLUS: /^\+?[0-9]*$/,
         PHONE_E164_PLUS: /^\+?[1-9]\d{1,14}$/,
+        PHONE_WITH_SPECIAL_CHARS: /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\\./0-9]{0,12}$/,
         NON_ALPHA_NUMERIC: /[^A-Za-z0-9+]/g,
         PO_BOX: /\b[P|p]?(OST|ost)?\.?\s*[O|o|0]?(ffice|FFICE)?\.?\s*[B|b][O|o|0]?[X|x]?\.?\s+[#]?(\d+)\b/,
         ANY_VALUE: /^.+$/,

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -568,7 +568,7 @@ export default {
         confirmCompanyIsNot: 'I confirm that this company is not on the',
         listOfRestrictedBusinesses: 'list of restricted businesses',
         incorporationDatePlaceholder: 'Start date (yyyy-mm-dd)',
-        companyPhonePlaceholder: '10 digits, no hyphens',
+        companyPhonePlaceholder: 'Phone Number (xxx)xxx-xxxx',
     },
     requestorStep: {
         headerTitle: 'Personal information',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -570,7 +570,7 @@ export default {
         confirmCompanyIsNot: 'Confirmo que esta empresa no está en el',
         listOfRestrictedBusinesses: 'lista de negocios restringidos',
         incorporationDatePlaceholder: 'Fecha de inicio (aaaa-mm-dd)',
-        companyPhonePlaceholder: '10 dígitos, sin guiones',
+        companyPhonePlaceholder: '(prefijo) + (número)',
     },
     requestorStep: {
         headerTitle: 'Información personal',

diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
@@ -146,6 +146,14 @@ function meetsAgeRequirements(date) {
 
 /**
  *
+ * @param {String} phoneNumber
+ * @returns {Boolean}
+ */
+function isValidPhoneWithSpecialChars(phoneNumber) {
+    return CONST.REGEX.PHONE_WITH_SPECIAL_CHARS.test(phoneNumber) && phoneNumber.length <= CONST.PHONE_MAX_LENGTH;
+}
+
+/**
  * @param {String} url
  * @returns {Boolean}
  */
@@ -208,6 +216,7 @@ export {
     isValidIndustryCode,
     isValidZipCode,
     isRequiredFulfilled,
+    isValidPhoneWithSpecialChars,
     isValidUSPhone,
     isValidURL,
     validateIdentity,

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -24,7 +24,7 @@ import TextLink from '../../components/TextLink';
 import StatePicker from '../../components/StatePicker';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import {
-    isValidAddress, isValidDate, isValidZipCode, isRequiredFulfilled, isValidURL,
+    isValidAddress, isValidDate, isValidZipCode, isRequiredFulfilled, isValidPhoneWithSpecialChars, isValidURL,
 } from '../../libs/ValidationUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -145,6 +145,10 @@ class CompanyStep extends React.Component {
             errors.incorporationDate = true;
         }
 
+        if (!isValidPhoneWithSpecialChars(this.state.companyPhone)) {
+            errors.companyPhone = true;
+        }
+
         _.each(this.requiredFields, (inputKey) => {
             if (!isRequiredFulfilled(this.state[inputKey])) {
                 errors[inputKey] = true;
@@ -218,10 +222,11 @@ class CompanyStep extends React.Component {
                     <ExpensiTextInput
                         label={this.props.translate('common.zip')}
                         containerStyles={[styles.mt4]}
-                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                        keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                         onChangeText={value => this.clearErrorAndSetValue('addressZipCode', value)}
                         value={this.state.addressZipCode}
                         errorText={this.getErrorText('addressZipCode')}
+                        maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
                     />
                     <ExpensiTextInput
                         label={this.props.translate('common.phoneNumber')}
@@ -231,6 +236,8 @@ class CompanyStep extends React.Component {
                         value={this.state.companyPhone}
                         placeholder={this.props.translate('companyStep.companyPhonePlaceholder')}
                         errorText={this.getErrorText('companyPhone')}
+                        maxLength={CONST.PHONE_MAX_LENGTH}
+
                     />
                     <ExpensiTextInput
                         label={this.props.translate('companyStep.companyWebsite')}
@@ -242,12 +249,13 @@ class CompanyStep extends React.Component {
                     <ExpensiTextInput
                         label={this.props.translate('companyStep.taxIDNumber')}
                         containerStyles={[styles.mt4]}
-                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                        keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                         onChangeText={value => this.clearErrorAndSetValue('companyTaxID', value)}
                         value={this.state.companyTaxID}
                         disabled={shouldDisableCompanyTaxID}
                         placeholder={this.props.translate('companyStep.taxIDNumberPlaceholder')}
                         errorText={this.getErrorText('companyTaxID')}
+                        maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.TAX_ID_NUMBER}
                     />
                     <View style={styles.mt4}>
                         <ExpensiPicker

diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -110,10 +110,11 @@ const IdentityForm = ({
             <ExpensiTextInput
                 label={`${translate('common.ssnLast4')}`}
                 containerStyles={[styles.mt4]}
-                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                 value={ssnLast4}
                 onChangeText={value => onFieldChange('ssnLast4', value)}
                 errorText={errors.ssnLast4 ? translate('bankAccount.error.ssnLast4') : ''}
+                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
             />
             <ExpensiTextInput
                 label={translate('common.personalAddress')}
@@ -145,10 +146,11 @@ const IdentityForm = ({
             <ExpensiTextInput
                 label={translate('common.zip')}
                 containerStyles={[styles.mt4]}
-                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
                 value={zipCode}
                 onChangeText={value => onFieldChange('zipCode', value)}
                 errorText={errors.zipCode ? translate('bankAccount.error.zipCode') : ''}
+                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
             />
         </View>
     );