From 167c5354c4d163eb4d1e41f8ffb636f82adeecca Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Thu, 31 Oct 2024 12:57:31 +0300
Subject: [PATCH] Merge pull request #51777 from hungvu193/fix-51776

Correct validation message for legal name

(cherry picked from commit a727991ab3390b893859ecf8c15a5e9e77f0bfb8)

(CP triggered by Beamanator)
---
 src/components/SubStepForms/FullNameStep.tsx  | 39 +++++++++++++++---
 .../substeps/LegalName.tsx                    | 41 +------------------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/components/SubStepForms/FullNameStep.tsx b/src/components/SubStepForms/FullNameStep.tsx
index f5c234650879..3e8951f00d33 100644
--- a/src/components/SubStepForms/FullNameStep.tsx
+++ b/src/components/SubStepForms/FullNameStep.tsx
@@ -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>({
@@ -55,6 +62,8 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
     defaultValues,
     isEditing,
     shouldShowHelpLinks = true,
+    customFirstNameLabel,
+    customLastNameLabel,
 }: FullNameStepProps<TFormID>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -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;
         },
@@ -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}
@@ -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}
diff --git a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
index 7480cd95ab4c..ab2a500f237e 100644
--- a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
@@ -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';
 
@@ -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,
@@ -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}