Skip to content

Commit

Permalink
feat: applied to the UBO steps
Browse files Browse the repository at this point in the history
  • Loading branch information
@barttom
barttom committed Jan 22, 2024
1 parent dfb67dc commit 7521554
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 30 deletions.
35 changes: 21 additions & 14 deletions ...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx/lib/types';
import FormProvider from '@components/Form/FormProvider';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ValidationUtils from '@libs/ValidationUtils';
Expand All @@ -27,51 +28,57 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
const {translate} = useLocalize();
const styles = useThemeStyles();

const INPUT_KEYS: Record<string, keyof FormValues> = {
const inputKeys: Record<string, keyof FormValues> = {
street: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.STREET}`,
city: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.CITY}`,
state: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.STATE}`,
zipCode: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.ZIP_CODE}`,
};

const REQUIRED_FIELDS = [INPUT_KEYS.street, INPUT_KEYS.city, INPUT_KEYS.state, INPUT_KEYS.zipCode];
const stepFields = [inputKeys.street, inputKeys.city, inputKeys.state, inputKeys.zipCode];

const defaultValues = {
street: reimbursementAccountDraft?.[INPUT_KEYS.street] ?? '',
city: reimbursementAccountDraft?.[INPUT_KEYS.city] ?? '',
state: reimbursementAccountDraft?.[INPUT_KEYS.state] ?? '',
zipCode: reimbursementAccountDraft?.[INPUT_KEYS.zipCode] ?? '',
street: reimbursementAccountDraft?.[inputKeys.street] ?? '',
city: reimbursementAccountDraft?.[inputKeys.city] ?? '',
state: reimbursementAccountDraft?.[inputKeys.state] ?? '',
zipCode: reimbursementAccountDraft?.[inputKeys.zipCode] ?? '',
};

const validate = (values: FormValues) => {
const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);

if (values[INPUT_KEYS.street] && !ValidationUtils.isValidAddress(values[INPUT_KEYS.street])) {
errors[INPUT_KEYS.street] = 'bankAccount.error.addressStreet';
if (values[inputKeys.street] && !ValidationUtils.isValidAddress(values[inputKeys.street])) {
errors[inputKeys.street] = 'bankAccount.error.addressStreet';
}

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

return errors;
};

const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: stepFields,
isEditing,
onNext,
});

return (
// @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
validate={validate}
onSubmit={onNext}
onSubmit={handleSubmit}
submitButtonStyles={[styles.mb0, styles.pb5]}
style={[styles.mh5, styles.flexGrow1]}
>
<Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
<Text>{translate('common.noPO')}</Text>
<AddressForm
inputKeys={INPUT_KEYS}
shouldSaveDraft
inputKeys={inputKeys}
shouldSaveDraft={!isEditing}
translate={translate}
defaultValues={defaultValues}
streetTranslationKey="common.streetAddress"
Expand Down
16 changes: 12 additions & 4 deletions ...ccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ValidationUtils from '@libs/ValidationUtils';
Expand All @@ -30,14 +31,15 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia
const styles = useThemeStyles();

const dobInputID: keyof FormValues = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${DOB}`;
const stepFields = [dobInputID];

const dobDefaultValue = reimbursementAccountDraft?.[dobInputID] ?? '';

const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);

const validate = (values: FormValues) => {
const errors = ValidationUtils.getFieldRequiredErrors(values, [dobInputID]);
const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);

if (values[dobInputID]) {
if (!ValidationUtils.isValidPastDate(values[dobInputID]) || !ValidationUtils.meetsMaximumAgeRequirement(values[dobInputID])) {
Expand All @@ -49,13 +51,20 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia

return errors;
};

const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: stepFields,
isEditing,
onNext,
});

return (
// @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
validate={validate}
onSubmit={onNext}
onSubmit={handleSubmit}
style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
submitButtonStyles={[styles.pb5, styles.mb0]}
>
Expand All @@ -65,14 +74,13 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia
InputComponent={DatePicker}
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
inputID={dobInputID}
z
label={translate('common.dob')}
containerStyles={[styles.mt6]}
placeholder={translate('common.dateFormat')}
defaultValue={dobDefaultValue}
minDate={minDate}
maxDate={maxDate}
shouldSaveDraft
shouldSaveDraft={!isEditing}
/>
</FormProvider>
);
Expand Down
17 changes: 12 additions & 5 deletions ...tAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import InputWrapper from '@components/Form/InputWrapper';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
import useLocalize from '@hooks/useLocalize';
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ValidationUtils from '@libs/ValidationUtils';
Expand All @@ -30,19 +31,25 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO

const firstNameInputID: keyof FormValues = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${FIRST_NAME}`;
const lastNameInputID: keyof FormValues = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${LAST_NAME}`;

const stepFields = [firstNameInputID, lastNameInputID];
const defaultFirstName = reimbursementAccountDraft?.[firstNameInputID] ?? '';
const defaultLastName = reimbursementAccountDraft?.[lastNameInputID] ?? '';

const validate = (values: FormValues) => ValidationUtils.getFieldRequiredErrors(values, [firstNameInputID, lastNameInputID]);
const validate = (values: FormValues) => ValidationUtils.getFieldRequiredErrors(values, stepFields);

const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: stepFields,
isEditing,
onNext,
});

return (
// @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
validate={validate}
onSubmit={onNext}
onSubmit={handleSubmit}
style={[styles.mh5, styles.flexGrow1]}
submitButtonStyles={[styles.pb5, styles.mb0]}
>
Expand All @@ -56,7 +63,7 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
inputID={firstNameInputID}
containerStyles={[styles.mt4]}
defaultValue={defaultFirstName}
shouldSaveDraft
shouldSaveDraft={!isEditing}
/>
<InputWrapper
// @ts-expect-error TODO: Remove this once InputWrapper (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
Expand All @@ -67,7 +74,7 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
inputID={lastNameInputID}
containerStyles={[styles.mt4]}
defaultValue={defaultLastName}
shouldSaveDraft
shouldSaveDraft={!isEditing}
/>
</FormProvider>
);
Expand Down
14 changes: 11 additions & 3 deletions ...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import InputWrapper from '@components/Form/InputWrapper';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
import useLocalize from '@hooks/useLocalize';
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ValidationUtils from '@libs/ValidationUtils';
Expand All @@ -31,22 +32,29 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,

const ssnLast4InputID: keyof FormValues = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${SSN_LAST_4}`;
const defaultSsnLast4 = reimbursementAccountDraft?.[ssnLast4InputID] ?? '';
const stepFields = [ssnLast4InputID];

const validate = (values: FormValues) => {
const errors = ValidationUtils.getFieldRequiredErrors(values, [ssnLast4InputID]);
const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
if (values[ssnLast4InputID] && !ValidationUtils.isValidSSNLastFour(values[ssnLast4InputID])) {
errors[ssnLast4InputID] = 'bankAccount.error.ssnLast4';
}
return errors;
};

const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: stepFields,
isEditing,
onNext,
});

return (
// @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
validate={validate}
onSubmit={onNext}
onSubmit={handleSubmit}
style={[styles.mh5, styles.flexGrow1]}
submitButtonStyles={[styles.pb5, styles.mb0]}
>
Expand All @@ -65,7 +73,7 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
inputMode={CONST.INPUT_MODE.NUMERIC}
defaultValue={defaultSsnLast4}
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
shouldSaveDraft
shouldSaveDraft={!isEditing}
/>
</View>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
};

const handleSubmit = useReimbursementAccountStepFormSubmit({
formId: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
fieldIds: STEP_FIELDS,
onNext,
isEditing,
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ function DateOfBirth({reimbursementAccount, reimbursementAccountDraft, onNext, i
const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);

const handleSubmit = useReimbursementAccountStepFormSubmit({
formId: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
fieldIds: STEP_FIELDS,
onNext,
isEditing,
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
};

const handleSubmit = useReimbursementAccountStepFormSubmit({
formId: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
fieldIds: STEP_FIELDS,
onNext,
isEditing,
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}: SocialS
const defaultSsnLast4 = reimbursementAccount?.achData?.[personalInfoStepKey.SSN_LAST_4] ?? '';

const handleSubmit = useReimbursementAccountStepFormSubmit({
formId: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
fieldIds: STEP_FIELDS,
onNext,
isEditing,
Expand Down

0 comments on commit 7521554

Please sign in to comment.