Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setting required field errors in app #24379

Merged
merged 21 commits into from
Aug 18, 2023
Merged

setting required field errors in app #24379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0f775f6
getFieldRequiredErrors util created
chiragxarora Aug 10, 2023
dae2c4b
jsdoc edit
chiragxarora Aug 10, 2023
fe6bd37
debitcardpage fixed
chiragxarora Aug 10, 2023
672203c
paypalme page fixed
chiragxarora Aug 10, 2023
f62658f
dob page fixed
chiragxarora Aug 10, 2023
1a755f8
merge main
chiragxarora Aug 11, 2023
7fe0802
bankaccountmanualstep page fixed
chiragxarora Aug 11, 2023
8e0bb21
variable rename
chiragxarora Aug 11, 2023
f686c7f
companystep page fixed
chiragxarora Aug 11, 2023
9e70f42
requestor page fixed
chiragxarora Aug 11, 2023
12bd6a7
prettier
chiragxarora Aug 11, 2023
450f1bb
merge main
chiragxarora Aug 12, 2023
d9688aa
additionaldetailsstep page fixed
chiragxarora Aug 12, 2023
627f365
merge main
chiragxarora Aug 16, 2023
78850e2
close account page fixed
chiragxarora Aug 16, 2023
97ea069
date errors fixed
chiragxarora Aug 16, 2023
7038aff
state added to req fields
chiragxarora Aug 17, 2023
3f9a9d7
fix
chiragxarora Aug 17, 2023
97b6e53
remaining state error
chiragxarora Aug 17, 2023
97a3e6c
prettier
chiragxarora Aug 17, 2023
aaf4813
merge main
chiragxarora Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/libs/ValidationUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,24 @@ function isRequiredFulfilled(value) {
return Boolean(value);
}

/**
* Used to add requiredField error to the fields passed.
*
* @param {Object} values
* @param {Array} requiredFields
* @returns {Object}
*/
function getFieldRequiredErrors(values, requiredFields) {
const errors = {};
_.each(requiredFields, (fieldKey) => {
if (isRequiredFulfilled(values[fieldKey])) {
return;
}
errors[fieldKey] = 'common.error.fieldRequired';
});
return errors;
}

/**
* Validates that this is a valid expiration date. Supports the following formats:
* 1. MM/YY
Expand Down Expand Up @@ -451,6 +469,7 @@ export {
isValidIndustryCode,
isValidZipCode,
isRequiredFulfilled,
getFieldRequiredErrors,
isValidUSPhone,
isValidWebsite,
validateIdentity,
Expand Down
109 changes: 38 additions & 71 deletions src/pages/EnablePayments/AdditionalDetailsStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import TextLink from '../../components/TextLink';
import TextInput from '../../components/TextInput';
import * as Wallet from '../../libs/actions/Wallet';
import * as ValidationUtils from '../../libs/ValidationUtils';
import * as ErrorUtils from '../../libs/ErrorUtils';
import AddressForm from '../ReimbursementAccount/AddressForm';
import DatePicker from '../../components/DatePicker';
import Form from '../../components/Form';
Expand Down Expand Up @@ -70,29 +69,6 @@ const defaultProps = {
...withCurrentUserPersonalDetailsDefaultProps,
};

const INPUT_IDS = {
LEGAL_FIRST_NAME: 'legalFirstName',
LEGAL_LAST_NAME: 'legalLastName',
PHONE_NUMBER: 'phoneNumber',
DOB: 'dob',
SSN: 'ssn',
ADDRESS: {
street: 'addressStreet',
city: 'addressCity',
state: 'addressState',
zipCode: 'addressZip',
},
};
const errorTranslationKeys = {
legalFirstName: 'bankAccount.error.firstName',
legalLastName: 'bankAccount.error.lastName',
phoneNumber: 'bankAccount.error.phoneNumber',
dob: 'bankAccount.error.dob',
age: 'bankAccount.error.age',
ssn: 'bankAccount.error.ssnLast4',
ssnFull9: 'additionalDetailsStep.ssnFull9Error',
};

const fieldNameTranslationKeys = {
legalFirstName: 'additionalDetailsStep.legalFirstNameLabel',
legalLastName: 'additionalDetailsStep.legalLastNameLabel',
Expand All @@ -113,50 +89,37 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
* @returns {Object}
*/
const validate = (values) => {
const errors = {};

if (_.isEmpty(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
errors[INPUT_IDS.LEGAL_FIRST_NAME] = errorTranslationKeys.legalFirstName;
}

if (_.isEmpty(values[INPUT_IDS.LEGAL_LAST_NAME])) {
errors[INPUT_IDS.LEGAL_LAST_NAME] = errorTranslationKeys.legalLastName;
}

if (!ValidationUtils.isValidPastDate(values[INPUT_IDS.DOB]) || !ValidationUtils.meetsMaximumAgeRequirement(values[INPUT_IDS.DOB])) {
ErrorUtils.addErrorMessage(errors, INPUT_IDS.DOB, errorTranslationKeys.dob);
} else if (!ValidationUtils.meetsMinimumAgeRequirement(values[INPUT_IDS.DOB])) {
ErrorUtils.addErrorMessage(errors, INPUT_IDS.DOB, errorTranslationKeys.age);
}
const requiredFields = ['legalFirstName', 'legalLastName', 'addressStreet', 'addressCity', 'addressZipCode', 'phoneNumber', 'dob', 'ssn', 'addressState'];
const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);

if (!ValidationUtils.isValidAddress(values[INPUT_IDS.ADDRESS.street]) || _.isEmpty(values[INPUT_IDS.ADDRESS.street])) {
errors[INPUT_IDS.ADDRESS.street] = 'bankAccount.error.addressStreet';
}

if (_.isEmpty(values[INPUT_IDS.ADDRESS.city])) {
errors[INPUT_IDS.ADDRESS.city] = 'bankAccount.error.addressCity';
if (values.dob) {
chiragxarora marked this conversation as resolved.
Show resolved Hide resolved
if (!ValidationUtils.isValidPastDate(values.dob) || !ValidationUtils.meetsMaximumAgeRequirement(values.dob)) {
errors.dob = 'bankAccount.error.dob';
} else if (!ValidationUtils.meetsMinimumAgeRequirement(values.dob)) {
errors.dob = 'bankAccount.error.age';
}
}

if (_.isEmpty(values[INPUT_IDS.ADDRESS.state])) {
errors[INPUT_IDS.ADDRESS.state] = 'bankAccount.error.addressState';
if (values.addressStreet && !ValidationUtils.isValidAddress(values.addressStreet)) {
errors.addressStreet = 'bankAccount.error.addressStreet';
}

if (!ValidationUtils.isValidZipCode(values[INPUT_IDS.ADDRESS.zipCode])) {
errors[INPUT_IDS.ADDRESS.zipCode] = 'bankAccount.error.zipCode';
if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
errors.addressZipCode = 'bankAccount.error.zipCode';
}

if (!ValidationUtils.isValidUSPhone(values[INPUT_IDS.PHONE_NUMBER], true)) {
errors[INPUT_IDS.PHONE_NUMBER] = errorTranslationKeys.phoneNumber;
if (values.phoneNumber && !ValidationUtils.isValidUSPhone(values.phoneNumber, true)) {
errors.phoneNumber = 'bankAccount.error.phoneNumber';
}

// walletAdditionalDetails stores errors returned by the server. If the server returns an SSN error
// then the user needs to provide the full 9 digit SSN.
if (walletAdditionalDetails.errorCode === CONST.WALLET.ERROR.SSN) {
if (!ValidationUtils.isValidSSNFullNine(values[INPUT_IDS.SSN])) {
errors[INPUT_IDS.SSN] = errorTranslationKeys.ssnFull9;
if (values.ssn && !ValidationUtils.isValidSSNFullNine(values.ssn)) {
errors.ssn = 'additionalDetailsStep.ssnFull9Error';
}
} else if (!ValidationUtils.isValidSSNLastFour(values[INPUT_IDS.SSN])) {
errors[INPUT_IDS.SSN] = errorTranslationKeys.ssn;
} else if (values.ssn && !ValidationUtils.isValidSSNLastFour(values.ssn)) {
errors.ssn = 'bankAccount.error.ssnLast4';
}

return errors;
Expand All @@ -167,17 +130,16 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
*/
const activateWallet = (values) => {
const personalDetails = {
phoneNumber: parsePhoneNumber(values[INPUT_IDS.PHONE_NUMBER], {regionCode: CONST.COUNTRY.US}).number.significant,
legalFirstName: values[INPUT_IDS.LEGAL_FIRST_NAME],
legalLastName: values[INPUT_IDS.LEGAL_LAST_NAME],
addressStreet: values[INPUT_IDS.ADDRESS.street],
addressCity: values[INPUT_IDS.ADDRESS.city],
addressState: values[INPUT_IDS.ADDRESS.state],
addressZip: values[INPUT_IDS.ADDRESS.zipCode],
dob: values[INPUT_IDS.DOB],
ssn: values[INPUT_IDS.SSN],
phoneNumber: parsePhoneNumber(values.phoneNumber, {regionCode: CONST.COUNTRY.US}).number.significant,
legalFirstName: values.legalFirstName,
legalLastName: values.legalLastName,
addressStreet: values.addressStreet,
addressCity: values.addressCity,
addressState: values.addressState,
addressZip: values.addressZipCode,
dob: values.dob,
ssn: values.ssn,
};

// Attempt to set the personal details
Wallet.updatePersonalDetails(personalDetails);
};
Expand Down Expand Up @@ -222,7 +184,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
style={[styles.mh5, styles.flexGrow1]}
>
<TextInput
inputID={INPUT_IDS.LEGAL_FIRST_NAME}
inputID="legalFirstName"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.legalFirstName)}
accessibilityLabel={translate(fieldNameTranslationKeys.legalFirstName)}
Expand All @@ -231,7 +193,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
shouldSaveDraft
/>
<TextInput
inputID={INPUT_IDS.LEGAL_LAST_NAME}
inputID="legalLastName"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.legalLastName)}
accessibilityLabel={translate(fieldNameTranslationKeys.legalLastName)}
Expand All @@ -240,13 +202,18 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
shouldSaveDraft
/>
<AddressForm
inputKeys={INPUT_IDS.ADDRESS}
inputKeys={{
street: 'addressStreet',
city: 'addressCity',
state: 'addressState',
zipCode: 'addressZipCode',
}}
translate={translate}
streetTranslationKey={fieldNameTranslationKeys.addressStreet}
shouldSaveDraft
/>
<TextInput
inputID={INPUT_IDS.PHONE_NUMBER}
inputID="phoneNumber"
containerStyles={[styles.mt4]}
keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
label={translate(fieldNameTranslationKeys.phoneNumber)}
Expand All @@ -257,7 +224,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
shouldSaveDraft
/>
<DatePicker
inputID={INPUT_IDS.DOB}
inputID="dob"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.dob)}
placeholder={translate('common.dob')}
Expand All @@ -266,7 +233,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
shouldSaveDraft
/>
<TextInput
inputID={INPUT_IDS.SSN}
inputID="ssn"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
accessibilityLabel={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
Expand Down
22 changes: 12 additions & 10 deletions src/pages/ReimbursementAccount/BankAccountManualStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,27 @@ function BankAccountManualStep(props) {
*/
const validate = useCallback(
(values) => {
const errorFields = {};
const requiredFields = ['routingNumber', 'accountNumber'];
const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);
const routingNumber = values.routingNumber && values.routingNumber.trim();

if (
!values.accountNumber ||
(!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) && !CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim()))
values.accountNumber &&
!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) &&
!CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim())
) {
errorFields.accountNumber = 'bankAccount.error.accountNumber';
} else if (values.accountNumber === routingNumber) {
errorFields.accountNumber = translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
errors.accountNumber = 'bankAccount.error.accountNumber';
} else if (values.accountNumber && values.accountNumber === routingNumber) {
errors.accountNumber = translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
}
if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
errorFields.routingNumber = 'bankAccount.error.routingNumber';
if (routingNumber && (!CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber))) {
errors.routingNumber = 'bankAccount.error.routingNumber';
}
if (!values.acceptTerms) {
errorFields.acceptTerms = 'common.error.acceptTerms';
errors.acceptTerms = 'common.error.acceptTerms';
}

return errorFields;
return errors;
},
[translate],
);
Expand Down
49 changes: 21 additions & 28 deletions src/pages/ReimbursementAccount/CompanyStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,54 +80,47 @@ class CompanyStep extends React.Component {
* @returns {Object} - Object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
*/
validate(values) {
const errors = {};
const requiredFields = [
'companyName',
'addressStreet',
'addressZipCode',
'addressCity',
'addressState',
'companyPhone',
'website',
'companyTaxID',
'incorporationType',
'incorporationDate',
'incorporationState',
];
const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);

if (!values.companyName) {
errors.companyName = 'bankAccount.error.companyName';
}

if (!values.addressStreet || !ValidationUtils.isValidAddress(values.addressStreet)) {
if (values.addressStreet && !ValidationUtils.isValidAddress(values.addressStreet)) {
errors.addressStreet = 'bankAccount.error.addressStreet';
}

if (!values.addressZipCode || !ValidationUtils.isValidZipCode(values.addressZipCode)) {
if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
errors.addressZipCode = 'bankAccount.error.zipCode';
}

if (!values.addressCity) {
errors.addressCity = 'bankAccount.error.addressCity';
}

if (!values.addressState) {
errors.addressState = 'bankAccount.error.addressState';
}

if (!values.companyPhone || !ValidationUtils.isValidUSPhone(values.companyPhone, true)) {
if (values.companyPhone && !ValidationUtils.isValidUSPhone(values.companyPhone, true)) {
errors.companyPhone = 'bankAccount.error.phoneNumber';
}

if (!values.website || !ValidationUtils.isValidWebsite(values.website)) {
if (values.website && !ValidationUtils.isValidWebsite(values.website)) {
errors.website = 'bankAccount.error.website';
}

if (!values.companyTaxID || !ValidationUtils.isValidTaxID(values.companyTaxID)) {
if (values.companyTaxID && !ValidationUtils.isValidTaxID(values.companyTaxID)) {
errors.companyTaxID = 'bankAccount.error.taxID';
}

if (!values.incorporationType) {
errors.incorporationType = 'bankAccount.error.companyType';
}

if (!values.incorporationDate || !ValidationUtils.isValidDate(values.incorporationDate)) {
if (values.incorporationDate && !ValidationUtils.isValidDate(values.incorporationDate)) {
errors.incorporationDate = 'common.error.dateInvalid';
} else if (!values.incorporationDate || !ValidationUtils.isValidPastDate(values.incorporationDate)) {
} else if (values.incorporationDate && !ValidationUtils.isValidPastDate(values.incorporationDate)) {
errors.incorporationDate = 'bankAccount.error.incorporationDateFuture';
}

if (!values.incorporationState) {
errors.incorporationState = 'bankAccount.error.incorporationState';
}

if (!values.hasNoConnectionToCannabis) {
errors.hasNoConnectionToCannabis = 'bankAccount.error.restrictedBusiness';
}
Expand Down
37 changes: 7 additions & 30 deletions src/pages/ReimbursementAccount/RequestorStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,49 +38,26 @@ class RequestorStep extends React.Component {
* @returns {Object}
*/
validate(values) {
const errors = {};

if (!ValidationUtils.isRequiredFulfilled(values.firstName)) {
errors.firstName = 'bankAccount.error.firstName';
}

if (!ValidationUtils.isRequiredFulfilled(values.lastName)) {
errors.lastName = 'bankAccount.error.lastName';
}

if (!ValidationUtils.isRequiredFulfilled(values.dob)) {
errors.dob = 'bankAccount.error.dob';
}
const requiredFields = ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);

if (values.dob) {
if (!ValidationUtils.meetsMinimumAgeRequirement(values.dob)) {
errors.dob = 'bankAccount.error.age';
} else if (!ValidationUtils.meetsMaximumAgeRequirement(values.dob)) {
if (!ValidationUtils.isValidPastDate(values.dob) || !ValidationUtils.meetsMaximumAgeRequirement(values.dob)) {
errors.dob = 'bankAccount.error.dob';
} else if (!ValidationUtils.meetsMinimumAgeRequirement(values.dob)) {
errors.dob = 'bankAccount.error.age';
}
}

if (!ValidationUtils.isRequiredFulfilled(values.ssnLast4) || !ValidationUtils.isValidSSNLastFour(values.ssnLast4)) {
if (values.ssnLast4 && !ValidationUtils.isValidSSNLastFour(values.ssnLast4)) {
errors.ssnLast4 = 'bankAccount.error.ssnLast4';
}

if (!ValidationUtils.isRequiredFulfilled(values.requestorAddressStreet)) {
errors.requestorAddressStreet = 'bankAccount.error.address';
}

if (values.requestorAddressStreet && !ValidationUtils.isValidAddress(values.requestorAddressStreet)) {
errors.requestorAddressStreet = 'bankAccount.error.addressStreet';
}

if (!ValidationUtils.isRequiredFulfilled(values.requestorAddressCity)) {
errors.requestorAddressCity = 'bankAccount.error.addressCity';
}

if (!ValidationUtils.isRequiredFulfilled(values.requestorAddressState)) {
errors.requestorAddressState = 'bankAccount.error.addressState';
}

if (!ValidationUtils.isRequiredFulfilled(values.requestorAddressZipCode) || !ValidationUtils.isValidZipCode(values.requestorAddressZipCode)) {
if (values.requestorAddressZipCode && !ValidationUtils.isValidZipCode(values.requestorAddressZipCode)) {
errors.requestorAddressZipCode = 'bankAccount.error.zipCode';
}

Expand Down
Loading