Skip to content

Commit

Permalink
Merge pull request #51777 from hungvu193/fix-51776
Browse files Browse the repository at this point in the history 
Correct validation message for legal name

(cherry picked from commit a727991)

(CP triggered by Beamanator)
  • Loading branch information
@Beamanator @OSBotify
Beamanator authored and OSBotify committed Oct 31, 2024
1 parent 2ba5845 commit 167c535
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 46 deletions.
39 changes: 33 additions & 6 deletions src/components/SubStepForms/FullNameStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,14 @@ type FullNameStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepPro
lastName: string;
};

/** Should show the help link or not */
shouldShowHelpLinks?: boolean;

/** Custom label of the first name input */
customFirstNameLabel?: string;

/** Custom label of the last name input */
customLastNameLabel?: string;
};

function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
Expand All @@ -55,6 +62,8 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
defaultValues,
isEditing,
shouldShowHelpLinks = true,
customFirstNameLabel,
customLastNameLabel,
}: FullNameStepProps<TFormID>) {
const {translate} = useLocalize();
const styles = useThemeStyles();
Expand All @@ -64,15 +73,33 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);

const firstName = values[firstNameInputID as keyof FormOnyxValues<TFormID>] as string;
if (firstName && !ValidationUtils.isValidLegalName(firstName)) {
if (!ValidationUtils.isRequiredFulfilled(firstName)) {
// @ts-expect-error type mismatch to be fixed
errors[firstNameInputID] = translate('common.error.fieldRequired');
} else if (!ValidationUtils.isValidLegalName(firstName)) {
// @ts-expect-error type mismatch to be fixed
errors[firstNameInputID] = translate('privatePersonalDetails.error.hasInvalidCharacter');
} else if (firstName.length > CONST.LEGAL_NAME.MAX_LENGTH) {
// @ts-expect-error type mismatch to be fixed
errors[firstNameInputID] = translate('common.error.characterLimitExceedCounter', {
length: firstName.length,
limit: CONST.LEGAL_NAME.MAX_LENGTH,
});
}

const lastName = values[lastNameInputID as keyof FormOnyxValues<TFormID>] as string;
if (lastName && !ValidationUtils.isValidLegalName(lastName)) {
if (!ValidationUtils.isRequiredFulfilled(lastName)) {
// @ts-expect-error type mismatch to be fixed
errors[lastNameInputID] = translate('common.error.fieldRequired');
} else if (!ValidationUtils.isValidLegalName(lastName)) {
// @ts-expect-error type mismatch to be fixed
errors[lastNameInputID] = translate('privatePersonalDetails.error.hasInvalidCharacter');
} else if (lastName.length > CONST.LEGAL_NAME.MAX_LENGTH) {
// @ts-expect-error type mismatch to be fixed
errors[lastNameInputID] = translate('common.error.characterLimitExceedCounter', {
length: lastName.length,
limit: CONST.LEGAL_NAME.MAX_LENGTH,
});
}
return errors;
},
Expand All @@ -92,8 +119,8 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
<InputWrapper
InputComponent={TextInput}
inputID={firstNameInputID}
label={translate('common.firstName')}
aria-label={translate('common.firstName')}
label={customFirstNameLabel ?? translate('personalInfoStep.legalFirstName')}
aria-label={customFirstNameLabel ?? translate('personalInfoStep.legalFirstName')}
role={CONST.ROLE.PRESENTATION}
defaultValue={defaultValues.firstName}
shouldSaveDraft={!isEditing}
Expand All @@ -102,8 +129,8 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
<InputWrapper
InputComponent={TextInput}
inputID={lastNameInputID}
label={translate('common.lastName')}
aria-label={translate('common.lastName')}
label={customLastNameLabel ?? translate('personalInfoStep.legalLastName')}
aria-label={customLastNameLabel ?? translate('personalInfoStep.legalLastName')}
role={CONST.ROLE.PRESENTATION}
defaultValue={defaultValues.lastName}
shouldSaveDraft={!isEditing}
Expand Down
41 changes: 1 addition & 40 deletions src/pages/MissingPersonalDetails/substeps/LegalName.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import React, {useCallback} from 'react';
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
import React from 'react';
import FullNameStep from '@components/SubStepForms/FullNameStep';
import useLocalize from '@hooks/useLocalize';
import usePersonalDetailsFormSubmit from '@hooks/usePersonalDetailsFormSubmit';
import * as ErrorUtils from '@libs/ErrorUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import type {CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import INPUT_IDS from '@src/types/form/PersonalDetailsForm';

Expand All @@ -20,40 +16,6 @@ function LegalName({isEditing, onNext, onMove, personalDetailsValues}: CustomSub
lastName: personalDetailsValues[INPUT_IDS.LEGAL_LAST_NAME],
};

const validate = useCallback(
(values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.fieldRequired');
} else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
} else if (values[INPUT_IDS.LEGAL_FIRST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.characterLimitExceedCounter', {
length: values[INPUT_IDS.LEGAL_FIRST_NAME].length,
limit: CONST.LEGAL_NAME.MAX_LENGTH,
});
}
if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_FIRST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_FIRST_NAME, translate('personalDetails.error.containsReservedWord'));
}
if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_LAST_NAME])) {
errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.fieldRequired');
} else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_LAST_NAME])) {
errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
} else if (values[INPUT_IDS.LEGAL_LAST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.characterLimitExceedCounter', {
length: values[INPUT_IDS.LEGAL_LAST_NAME].length,
limit: CONST.LEGAL_NAME.MAX_LENGTH,
});
}
if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_LAST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_LAST_NAME, translate('personalDetails.error.containsReservedWord'));
}
return errors;
},
[translate],
);

const handleSubmit = usePersonalDetailsFormSubmit({
fieldIds: STEP_FIELDS,
onNext,
Expand All @@ -68,7 +30,6 @@ function LegalName({isEditing, onNext, onMove, personalDetailsValues}: CustomSub
formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
formTitle={translate('privatePersonalDetails.enterLegalName')}
onSubmit={handleSubmit}
customValidate={validate}
stepFields={STEP_FIELDS}
firstNameInputID={INPUT_IDS.LEGAL_FIRST_NAME}
lastNameInputID={INPUT_IDS.LEGAL_LAST_NAME}
Expand Down

0 comments on commit 167c535

Please sign in to comment.