[Wave9] Require name + surname

src/components/Form/FormProvider.tsx

@@ -66,6 +66,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProvider
         /** Should validate function be called when the value of the input is changed */
         shouldValidateOnChange?: boolean;
 
+        /** Whether to remove invisible characters from strings before validation and submission */
+        shouldTrimValues?: boolean;
+
         /** Styles that will be applied to the submit button only */
         submitButtonStyles?: StyleProp<ViewStyle>;
 
@@ -89,6 +92,7 @@ function FormProvider(
         enabledWhenOffline = false,
         draftValues,
         onSubmit,
+        shouldTrimValues = true,
         ...rest
     }: FormProviderProps,
     forwardedRef: ForwardedRef<FormRef>,
@@ -102,7 +106,7 @@ function FormProvider(
 
     const onValidate = useCallback(
         (values: FormOnyxValues, shouldClearServerError = true) => {
-            const trimmedStringValues = ValidationUtils.prepareValues(values);
+            const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(values) : values;
 
             if (shouldClearServerError) {
                 FormActions.clearErrors(formID);
@@ -158,7 +162,7 @@ function FormProvider(
 
             return touchedInputErrors;
         },
-        [errors, formID, validate],
+        [errors, formID, validate, shouldTrimValues],
     );
 
     // When locales change from another session of the same account,
@@ -170,7 +174,7 @@ function FormProvider(
         }
 
         // Prepare validation values
-        const trimmedStringValues = ValidationUtils.prepareValues(inputValues);
+        const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(inputValues) : inputValues;
 
         // Validate in order to make sure the correct error translations are displayed,
         // making sure to not clear server errors if they exist
@@ -195,7 +199,7 @@ function FormProvider(
         }
 
         // Prepare values before submitting
-        const trimmedStringValues = ValidationUtils.prepareValues(inputValues);
+        const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(inputValues) : inputValues;
 
         // Touches all form inputs, so we can validate the entire form
         Object.keys(inputRefs.current).forEach((inputID) => (touchedInputs.current[inputID] = true));
@@ -211,7 +215,7 @@ function FormProvider(
         }
 
         onSubmit(trimmedStringValues);
-    }, [enabledWhenOffline, formState?.isLoading, inputValues, network?.isOffline, onSubmit, onValidate]);
+    }, [enabledWhenOffline, formState?.isLoading, inputValues, network?.isOffline, onSubmit, onValidate, shouldTrimValues]);
 
     const resetForm = useCallback(
         (optionalValue: FormOnyxValues) => {

src/components/Form/FormWrapper.tsx

@@ -56,6 +56,7 @@ function FormWrapper({
     isSubmitActionDangerous = false,
     formID,
     scrollContextEnabled = false,
+    fixErrorsAlert,
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = true,
 }: FormWrapperProps) {
@@ -108,7 +109,7 @@ function FormWrapper({
                         buttonText={submitButtonText}
                         isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
                         isLoading={!!formState?.isLoading}
-                        message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
+                        message={fixErrorsAlert ?? (isEmptyObject(formState?.errorFields) ? errorMessage : undefined)}
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
@@ -139,6 +140,7 @@ function FormWrapper({
             submitButtonStyles,
             submitFlexEnabled,
             submitButtonText,
+            fixErrorsAlert,
             shouldHideFixErrorsAlert,
             onFixTheErrorsLinkPressed,
             disablePressOnEnter,

src/components/Form/types.ts

@@ -101,6 +101,9 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous?: boolean;
 
+    /** Custom error message to show when there is an error in the form */
+    fixErrorsAlert?: string;
+
     /** Should fix the errors alert be displayed when there is an error in the form */
     shouldHideFixErrorsAlert?: boolean;
 

src/components/HeaderWithBackButton/index.tsx

@@ -74,11 +74,17 @@ function HeaderWithBackButton({
     const middleContent = useMemo(() => {
         if (progressBarPercentage) {
             return (
-                <View>
-                    <View style={styles.progressBarWrapper}>
-                        <View style={[{width: `${progressBarPercentage}%`}, styles.progressBar]} />
+                <>
+                    {/* Reserves as much space for the middleContent as possible */}
+                    <View style={styles.flexGrow1} />
+                    {/* Uses absolute positioning so that it's always centered instead of being affected by the
+                    presence or absence of back/close buttons to the left/right of it */}
+                    <View style={styles.headerProgressBarContainer}>
+                        <View style={styles.headerProgressBar}>
+                            <View style={[{width: `${progressBarPercentage}%`}, styles.headerProgressBarFill]} />
+                        </View>
                     </View>
-                </View>
+                </>
             );
         }
 
@@ -99,21 +105,7 @@ function HeaderWithBackButton({
                 textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []}
             />
         );
-    }, [
-        StyleUtils,
-        policy,
-        progressBarPercentage,
-        report,
-        shouldEnableDetailPageNavigation,
-        shouldShowAvatarWithDisplay,
-        stepCounter,
-        styles.progressBar,
-        styles.progressBarWrapper,
-        subtitle,
-        title,
-        titleColor,
-        translate,
-    ]);
+    }, [StyleUtils, policy, progressBarPercentage, report, shouldEnableDetailPageNavigation, shouldShowAvatarWithDisplay, stepCounter, styles, subtitle, title, titleColor, translate]);
 
     return (
         <View
@@ -125,6 +117,7 @@ function HeaderWithBackButton({
                 isCentralPaneSettings && styles.headerBarDesktopHeight,
                 shouldShowBorderBottom && styles.borderBottom,
                 shouldShowBackButton && styles.pl2,
+                progressBarPercentage !== undefined && styles.pl2,
                 shouldOverlay && StyleSheet.absoluteFillObject,
             ]}
         >

src/languages/en.ts

@@ -1210,6 +1210,14 @@ export default {
         loginForm: 'Login form',
         notYou: ({user}: NotYouParams) => `Not ${user}?`,
     },
+    onboarding: {
+        welcome: 'Welcome!',
+        whatsYourName: "What's your name?",
+        error: {
+            requiredFirstName: 'Please input your first name to continue',
+            requiredLasttName: 'Please input your last name to continue',
+        },
+    },
     personalDetails: {
         error: {
             containsReservedWord: 'Name cannot contain the words Expensify or Concierge',

src/languages/es.ts

@@ -1209,6 +1209,14 @@ export default {
         loginForm: 'Formulario de inicio de sesión',
         notYou: ({user}: NotYouParams) => `¿No eres ${user}?`,
     },
+    onboarding: {
+        welcome: '¡Bienvenido!',
+        whatsYourName: '¿Cómo te llamas?',
+        error: {
+            requiredFirstName: 'Por favor, ingresa tu primer nombre para continuar',
+            requiredLasttName: 'Por favor, ingresa tu apellido para continuar',
+        },
+    },
     personalDetails: {
         error: {
             containsReservedWord: 'El nombre no puede contener las palabras Expensify o Concierge',

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -52,7 +52,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             return;
         }
 
-        Welcome.isOnboardingFlowCompleted({onNotCompleted: () => Navigation.navigate(ROUTES.ONBOARD)});
+        Welcome.isOnboardingFlowCompleted({onNotCompleted: () => Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS)});
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoadingApp]);
 

src/libs/ValidationUtils.ts

@@ -356,7 +356,7 @@ function isValidPersonName(value: string) {
 /**
  * Checks if the provided string includes any of the provided reserved words
  */
-function doesContainReservedWord(value: string, reservedWords: string[]): boolean {
+function doesContainReservedWord(value: string, reservedWords: readonly string[]): boolean {
     const valueToCheck = value.trim().toLowerCase();
     return reservedWords.some((reservedWord) => valueToCheck.includes(reservedWord.toLowerCase()));
 }

src/libs/actions/PersonalDetails.ts

@@ -26,6 +26,10 @@ import type {PersonalDetails, PersonalDetailsList, PrivatePersonalDetails} from
 import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
 import * as Session from './Session';
 
+type OptionsProps = {
+    preventGoBack?: boolean;
+};
+
 let currentUserEmail = '';
 let currentUserAccountID = -1;
 Onyx.connect({
@@ -70,7 +74,7 @@ function updatePronouns(pronouns: string) {
     Navigation.goBack();
 }
 
-function updateDisplayName(firstName: string, lastName: string) {
+function updateDisplayName(firstName: string, lastName: string, options: OptionsProps = {}) {
     if (currentUserAccountID) {
         const parameters: UpdateDisplayNameParams = {firstName, lastName};
 
@@ -94,7 +98,9 @@ function updateDisplayName(firstName: string, lastName: string) {
         });
     }
 
-    Navigation.goBack();
+    if (!options.preventGoBack) {
+        Navigation.goBack();
+    }
 }
 
 function updateLegalName(legalFirstName: string, legalLastName: string) {

src/pages/OnboardingPersonalDetails.tsx

@@ -1,38 +1,130 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
 import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as Report from '@userActions/Report';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import * as PersonalDetails from '@userActions/PersonalDetails';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/DisplayNameForm';
 
-function OnboardingPersonalDetails() {
+type OnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps;
+
+function OnboardingPersonalDetails({currentUserPersonalDetails}: OnboardingPersonalDetailsProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
-    const {windowHeight} = useWindowDimensions();
+    const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useOnboardingLayout();
-    const theme = useTheme();
+    const currentUserDetails = currentUserPersonalDetails || {};
 
-    const closeModal = useCallback(() => {
-        Report.dismissEngagementModal();
-        Navigation.goBack();
+    const saveAndNavigate = useCallback((values: FormOnyxValues<'displayNameForm'>) => {
+        PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim(), {preventGoBack: true});
+
+        Navigation.navigate(ROUTES.ONBOARDING_PURPOSE);
     }, []);
 
+    const validate = (values: FormOnyxValues<'displayNameForm'>) => {
+        const errors = {};
+
+        // First we validate the first name field
+        if (values.firstName.length === 0) {
+            ErrorUtils.addErrorMessage(errors, 'firstName', 'onboarding.error.requiredFirstName');
+        }
+        if (!ValidationUtils.isValidDisplayName(values.firstName)) {
+            ErrorUtils.addErrorMessage(errors, 'firstName', 'personalDetails.error.hasInvalidCharacter');
+        }
+        if (ValidationUtils.doesContainReservedWord(values.firstName, CONST.DISPLAY_NAME.RESERVED_NAMES)) {
+            ErrorUtils.addErrorMessage(errors, 'firstName', 'personalDetails.error.containsReservedWord');
+        }
+
+        // Then we validate the last name field
+        if (values.lastName.length === 0) {
+            ErrorUtils.addErrorMessage(errors, 'lastName', 'onboarding.error.requiredLasttName');
+        }
+        if (!ValidationUtils.isValidDisplayName(values.lastName)) {
+            ErrorUtils.addErrorMessage(errors, 'lastName', 'personalDetails.error.hasInvalidCharacter');
+        }
+        if (ValidationUtils.doesContainReservedWord(values.lastName, CONST.DISPLAY_NAME.RESERVED_NAMES)) {
+            ErrorUtils.addErrorMessage(errors, 'lastName', 'personalDetails.error.containsReservedWord');
+        }
+
+        return errors;
+    };
+
     return (
-        <View style={[styles.defaultModalContainer, styles.w100, styles.h100, !shouldUseNarrowLayout && styles.pt8]}>
-            <View style={{maxHeight: windowHeight}}>
-                <HeaderWithBackButton
-                    shouldShowCloseButton
-                    shouldShowBackButton={false}
-                    onCloseButtonPress={closeModal}
-                    shouldOverlay
-                    iconFill={theme.iconColorfulBackground}
-                />
-            </View>
+        <View style={[styles.h100, styles.defaultModalContainer, !shouldUseNarrowLayout && styles.pt8]}>
+            <HeaderWithBackButton
+                shouldShowBackButton={false}
+                iconFill={theme.iconColorfulBackground}
+                progressBarPercentage={33.3}
+            />
+            <KeyboardAvoidingView
+                style={[styles.flex1, styles.dFlex]}
+                behavior="padding"
+            >
+                <FormProvider
+                    style={[styles.flexGrow1, styles.mt5, shouldUseNarrowLayout ? styles.mh8 : styles.mh5]}
+                    formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
+                    validate={validate}
+                    onSubmit={saveAndNavigate}
+                    submitButtonText={translate('common.continue')}
+                    enabledWhenOffline
+                    submitFlexEnabled
+                    shouldValidateOnBlur
+                    shouldValidateOnChange
+                    shouldTrimValues={false}
+                >
+                    <View style={[shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.mb5]}>
+                        <Text style={[styles.textHeroSmall]}>{translate('onboarding.welcome')} </Text>
+                        <Text style={[styles.textHeroSmall]}>{translate('onboarding.whatsYourName')}</Text>
+                    </View>
+                    <View style={styles.mb4}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID={INPUT_IDS.FIRST_NAME}
+                            name="fname"
+                            label={translate('common.firstName')}
+                            aria-label={translate('common.firstName')}
+                            role={CONST.ROLE.PRESENTATION}
+                            defaultValue={currentUserDetails?.firstName}
+                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                            spellCheck={false}
+                            autoFocus
+                        />
+                    </View>
+                    <View>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID={INPUT_IDS.LAST_NAME}
+                            name="lname"
+                            label={translate('common.lastName')}
+                            aria-label={translate('common.lastName')}
+                            role={CONST.ROLE.PRESENTATION}
+                            defaultValue={currentUserDetails?.lastName}
+                            maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
+                            spellCheck={false}
+                        />
+                    </View>
+                </FormProvider>
+            </KeyboardAvoidingView>
         </View>
     );
 }
 
 OnboardingPersonalDetails.displayName = 'OnboardingPersonalDetails';
-export default OnboardingPersonalDetails;
+
+export default withCurrentUserPersonalDetails(OnboardingPersonalDetails);

src/stories/HeaderWithBackButton.stories.js

@@ -35,12 +35,11 @@ Attachment.args = {
 };
 Profile.args = {
     title: 'Profile',
-    shouldShowBackButton: true,
 };
 ProgressBar.args = {
     title: 'ProgressBar',
-    shouldShowBackButton: true,
     progressBarPercentage: 33,
+    shouldShowBackButton: false,
 };
 
 export default story;