Frontend: Private Domain Onboarding Check

src/CONST.ts

@@ -5615,6 +5615,9 @@ const CONST = {
             DEBUG: 'DEBUG',
         },
     },
+
+    // We need to store this server side error in order to not show the blocking screen when the error is for invalid code
+    MERGE_ACCOUNT_INVALID_CODE_ERROR: '401 Not authorized - Invalid validateCode',
     REIMBURSEMENT_ACCOUNT: {
         DEFAULT_DATA: {
             achData: {

src/ONYXKEYS.ts

@@ -786,6 +786,8 @@ const ONYXKEYS = {
         RULES_CUSTOM_FORM_DRAFT: 'rulesCustomFormDraft',
         DEBUG_DETAILS_FORM: 'debugDetailsForm',
         DEBUG_DETAILS_FORM_DRAFT: 'debugDetailsFormDraft',
+        ONBOARDING_WORK_EMAIL_FORM: 'onboardingWorkEmailForm',
+        ONBOARDING_WORK_EMAIL_FORM_DRAFT: 'onboardingWorkEmailFormDraft',
         MERGE_ACCOUNT_DETAILS_FORM: 'mergeAccountDetailsForm',
         MERGE_ACCOUNT_DETAILS_FORM_DRAFT: 'mergeAccountDetailsFormDraft',
         WORKSPACE_PER_DIEM_FORM: 'workspacePerDiemForm',
@@ -890,6 +892,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_CUSTOM_FORM]: FormTypes.RulesCustomForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
     [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
+    [ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM]: FormTypes.OnboardingWorkEmailForm;
     [ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM]: FormTypes.MergeAccountDetailsForm;
     [ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM]: FormTypes.InternationalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_PER_DIEM_FORM]: FormTypes.WorkspacePerDiemForm;

src/ROUTES.ts

@@ -1879,6 +1879,14 @@ const ROUTES = {
         route: 'onboarding/join-workspaces',
         getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/join-workspaces`, backTo),
     },
+    ONBOARDING_WORK_EMAIL: {
+        route: 'onboarding/work-email',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/work-email`, backTo),
+    },
+    ONBOARDING_WORK_EMAIL_VALIDATION: {
+        route: 'onboarding/work-email-validation',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/work-email-validation`, backTo),
+    },
     WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
     EXPLANATION_MODAL_ROOT: 'onboarding/explanation',
     WORKSPACE_CONFIRMATION: {

src/SCREENS.ts

@@ -641,6 +641,8 @@ const SCREENS = {
         EMPLOYEES: 'Onboarding_Employees',
         ACCOUNTING: 'Onboarding_Accounting',
         WORKSPACES: 'Onboarding_Workspaces',
+        WORK_EMAIL: 'Onboarding_Work_Email',
+        WORK_EMAIL_VALIDATION: 'Onboarding_Work_Email_Validation',
     },
 
     WELCOME_VIDEO: {

src/components/AutoEmailLink.tsx

@@ -18,32 +18,43 @@ type AutoEmailLinkProps = {
 
 function AutoEmailLink({text, style}: AutoEmailLinkProps) {
     const styles = useThemeStyles();
+    const emailRegex = COMMON_CONST.REG_EXP.EXTRACT_EMAIL;
+    const matches = [...text.matchAll(emailRegex)];
+
+    if (matches.length === 0) {
+        return <Text style={style}>{text}</Text>;
+    }
+
+    let lastIndex = 0;
+
     return (
         <Text style={style}>
-            {text.split(COMMON_CONST.REG_EXP.EXTRACT_EMAIL).map((str, index) => {
-                if (COMMON_CONST.REG_EXP.EMAIL.test(str)) {
-                    return (
-                        <TextLink
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${index}-${str}`}
-                            href={`mailto:${str}`}
-                            style={styles.link}
-                        >
-                            {str}
-                        </TextLink>
-                    );
+            {matches.flatMap((match, index) => {
+                const email = match[0];
+                const startIndex = match.index ?? 0;
+                const elements = [];
+
+                // Push plain text before email
+                if (startIndex > lastIndex) {
+                    elements.push(text.slice(lastIndex, startIndex));
                 }
 
-                return (
-                    <Text
-                        style={style}
+                // Push email as a link
+                elements.push(
+                    <TextLink
                         // eslint-disable-next-line react/no-array-index-key
-                        key={`${index}-${str}`}
+                        key={`email-${index}`}
+                        href={`mailto:${email}`}
+                        style={styles.link}
                     >
-                        {str}
-                    </Text>
+                        {email}
+                    </TextLink>,
                 );
+
+                lastIndex = startIndex + email.length;
+                return elements;
             })}
+            {lastIndex < text.length && text.slice(lastIndex)}
         </Text>
     );
 }

src/components/Form/FormProvider.tsx

@@ -73,6 +73,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
     /** Whether HTML is allowed in form inputs */
     allowHTML?: boolean;
 
+    /** Whether to render the submit button above the footer. */
+    shouldRenderFooterAboveSubmit?: boolean;
+
     /** Whether the form is loading */
     isLoading?: boolean;
 
@@ -98,13 +101,14 @@ function FormProvider(
         shouldTrimValues = true,
         allowHTML = false,
         isLoading = false,
+        shouldRenderFooterAboveSubmit = false,
         ...rest
     }: FormProviderProps,
     forwardedRef: ForwardedRef<FormRef>,
 ) {
-    const [network] = useOnyx(ONYXKEYS.NETWORK);
-    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`);
-    const [draftValues] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`);
+    const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true});
+    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`, {canBeMissing: true});
+    const [draftValues] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`, {canBeMissing: true});
     const {preferredLocale, translate} = useLocalize();
     const inputRefs = useRef<InputRefs>({});
     const touchedInputs = useRef<Record<string, boolean>>({});
@@ -432,6 +436,7 @@ function FormProvider(
                 errors={errors}
                 isLoading={isLoading}
                 enabledWhenOffline={enabledWhenOffline}
+                shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
             >
                 {typeof children === 'function' ? children({inputValues}) : children}
             </FormWrapper>

src/components/Form/FormWrapper.tsx

@@ -38,6 +38,9 @@ type FormWrapperProps = ChildrenProps &
         /** Callback to submit the form */
         onSubmit: () => void;
 
+        /** should render the extra button above submit button */
+        shouldRenderFooterAboveSubmit?: boolean;
+
         /** Whether the form is loading */
         isLoading?: boolean;
 
@@ -76,6 +79,7 @@ function FormWrapper({
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = false,
     isSubmitDisabled = false,
+    shouldRenderFooterAboveSubmit = false,
     isLoading = false,
     shouldScrollToEnd = false,
     addBottomSafeAreaPadding,
@@ -87,7 +91,7 @@ function FormWrapper({
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
 
-    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`);
+    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`, {canBeMissing: true});
 
     const errorMessage = useMemo(() => (formState ? getLatestErrorMessage(formState) : undefined), [formState]);
 
@@ -168,6 +172,7 @@ function FormWrapper({
                     isSubmitActionDangerous={isSubmitActionDangerous}
                     disablePressOnEnter={disablePressOnEnter}
                     enterKeyEventListenerPriority={1}
+                    shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
                 />
             ),
@@ -196,6 +201,7 @@ function FormWrapper({
             submitButtonStylesWithBottomSafeAreaPadding,
             submitButtonText,
             submitFlexEnabled,
+            shouldRenderFooterAboveSubmit,
         ],
     );
 

src/components/Form/types.ts

@@ -164,6 +164,8 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     /** Disable press on enter for submit button */
     disablePressOnEnter?: boolean;
 
+    /** Render extra button above submit button */
+    shouldRenderFooterAboveSubmit?: boolean;
     /**
      * Determines whether the form should automatically scroll to the end upon rendering or when the value changes.
      * If `true`, the form will smoothly scroll to the bottom after interactions have completed.

src/components/FormAlertWithSubmitButton.tsx

@@ -63,6 +63,9 @@ type FormAlertWithSubmitButtonProps = {
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;
 
+    /** should render the extra button above submit button */
+    shouldRenderFooterAboveSubmit?: boolean;
+
     /**
      * Whether the button should have a background layer in the color of theme.appBG.
      * This is needed for buttons that allow content to display under them.
@@ -92,6 +95,7 @@ function FormAlertWithSubmitButton({
     useSmallerSubmitButtonSize = false,
     errorMessageStyle,
     enterKeyEventListenerPriority = 0,
+    shouldRenderFooterAboveSubmit = false,
     shouldBlendOpacity = false,
     addButtonBottomPadding = true,
 }: FormAlertWithSubmitButtonProps) {
@@ -115,6 +119,7 @@ function FormAlertWithSubmitButton({
         >
             {(isOffline: boolean | undefined) => (
                 <View>
+                    {shouldRenderFooterAboveSubmit && footerContent}
                     {isOffline && !enabledWhenOffline ? (
                         <Button
                             success
@@ -143,7 +148,7 @@ function FormAlertWithSubmitButton({
                             large={!useSmallerSubmitButtonSize}
                         />
                     )}
-                    {footerContent}
+                    {!shouldRenderFooterAboveSubmit && footerContent}
                 </View>
             )}
         </FormAlertWrapper>

src/components/ValidateCodeActionForm/type.ts

@@ -33,6 +33,12 @@ type ValidateCodeActionFormProps = {
     /** Ref for validate code form */
     forwardedRef: ForwardedRef<ValidateCodeFormHandle>;
 
+    /** Whether to show the skip button */
+    shouldShowSkipButton?: boolean;
+
+    /** Function to call when the skip button is pressed */
+    handleSkipButtonPress?: () => void;
+
     /** Text for submit button */
     submitButtonText?: string;
 

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -75,6 +75,12 @@ type ValidateCodeFormProps = {
 
     /** Whether the form is loading or not */
     isLoading?: boolean;
+
+    /** Whether to show skip button */
+    shouldShowSkipButton?: boolean;
+
+    /** Function to call when skip button is pressed */
+    handleSkipButtonPress?: () => void;
 };
 
 function BaseValidateCodeForm({
@@ -91,6 +97,8 @@ function BaseValidateCodeForm({
     hideSubmitButton,
     submitButtonText,
     isLoading,
+    shouldShowSkipButton = false,
+    handleSkipButtonPress,
 }: ValidateCodeFormProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -100,7 +108,7 @@ function BaseValidateCodeForm({
     const [formError, setFormError] = useState<ValidateCodeFormError>({});
     const [validateCode, setValidateCode] = useState('');
     const inputValidateCodeRef = useRef<MagicCodeInputHandle>(null);
-    const [account = {}] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [account = {}] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
     const shouldDisableResendValidateCode = !!isOffline || account?.isLoading;
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -277,14 +285,23 @@ function BaseValidateCodeForm({
                     messages={{0: translate('validateCodeModal.successfulNewCodeRequest')}}
                 />
             )}
+
             <OfflineWithFeedback
                 shouldDisplayErrorAbove
                 pendingAction={validatePendingAction}
                 errors={canShowError ? validateError : undefined}
-                errorRowStyles={[styles.mt2]}
+                errorRowStyles={[styles.mt2, styles.textWrap]}
                 onClose={() => clearError()}
                 style={buttonStyles}
             >
+                {shouldShowSkipButton && (
+                    <Button
+                        text={translate('common.skip')}
+                        onPress={handleSkipButtonPress}
+                        success={false}
+                        large
+                    />
+                )}
                 {!hideSubmitButton && (
                     <Button
                         isDisabled={isOffline}

src/languages/en.ts

@@ -227,6 +227,8 @@ import type {
     WelcomeEnterMagicCodeParams,
     WelcomeToRoomParams,
     WeSentYouMagicSignInLinkParams,
+    WorkEmailMergingBlockedParams,
+    WorkEmailResendCodeParams,
     WorkspaceLockedPlanTypeParams,
     WorkspaceMemberList,
     WorkspaceOwnerWillNeedToAddOrUpdatePaymentCardParams,
@@ -532,6 +534,7 @@ const translations = {
         skip: 'Skip',
         chatWithAccountManager: ({accountManagerDisplayName}: ChatWithAccountManagerParams) => `Need something specific? Chat with your account manager, ${accountManagerDisplayName}.`,
         chatNow: 'Chat now',
+        workEmail: 'Work email',
         destination: 'Destination',
         subrate: 'Subrate',
         perDiem: 'Per diem',
@@ -2021,6 +2024,28 @@ const translations = {
         error: {
             requiredFirstName: 'Please input your first name to continue',
         },
+        workEmail: {
+            title: 'What’s your work email?',
+            subtitle: 'Expensify works best when you connect your work email.',
+            explanationModal: {
+                descriptionOne: 'Forward to [email protected] for scanning',
+                descriptionTwo: 'Join your colleagues already using Expensify',
+                descriptionThree: 'Enjoy a more customized experience',
+            },
+            addWorkEmail: 'Add work email',
+        },
+        workEmailValidation: {
+            title: 'Verify your work email',
+            magicCodeSent: ({workEmail}: WorkEmailResendCodeParams) => `Please enter the magic code sent to ${workEmail}. It should arrive in a minute or two.`,
+        },
+        workEmailValidationError: {
+            publicEmail: 'Please enter a valid work email from a private domain e.g. [email protected]',
+            offline: 'We couldn’t add your work email as you appear to be offline',
+        },
+        mergeBlockScreen: {
+            title: 'Couldn’t add work email',
+            subtitle: ({workEmail}: WorkEmailMergingBlockedParams) => `We couldn’t add ${workEmail}. Please try again later in Settings or chat with Concierge for guidance.`,
+        },
     },
     featureTraining: {
         doNotShowAgain: "Don't show me this again",

src/languages/es.ts

@@ -227,6 +227,8 @@ import type {
     WelcomeEnterMagicCodeParams,
     WelcomeToRoomParams,
     WeSentYouMagicSignInLinkParams,
+    WorkEmailMergingBlockedParams,
+    WorkEmailResendCodeParams,
     WorkspaceLockedPlanTypeParams,
     WorkspaceMemberList,
     WorkspaceOwnerWillNeedToAddOrUpdatePaymentCardParams,
@@ -523,6 +525,7 @@ const translations = {
         minuteAbbreviation: 'm',
         chatWithAccountManager: ({accountManagerDisplayName}: ChatWithAccountManagerParams) => `¿Necesitas algo específico? Habla con tu gerente de cuenta, ${accountManagerDisplayName}.`,
         chatNow: 'Chatear ahora',
+        workEmail: 'correo electrónico de trabajo',
         destination: 'Destino',
         subrate: 'Subtasa',
         perDiem: 'Per diem',
@@ -2023,6 +2026,29 @@ const translations = {
         error: {
             requiredFirstName: 'Introduce tu nombre para continuar',
         },
+        workEmail: {
+            title: 'Cuál es tu correo electrónico de trabajo',
+            subtitle: 'Expensify funciona mejor cuando conectas tu correo electrónico de trabajo.',
+            explanationModal: {
+                descriptionOne: 'Reenvía a [email protected] para escanear',
+                descriptionTwo: 'Únete a tus compañeros de trabajo que ya están usando Expensify',
+                descriptionThree: 'Disfruta de una experiencia más personalizada',
+            },
+            addWorkEmail: 'Añadir correo electrónico de trabajo',
+        },
+        workEmailValidation: {
+            title: 'Verifica tu correo electrónico de trabajo',
+            magicCodeSent: ({workEmail}: WorkEmailResendCodeParams) => `Por favor, introduce el código mágico enviado a ${workEmail}. Debería llegar en uno o dos minutos.`,
+        },
+        workEmailValidationError: {
+            publicEmail: 'Por favor, introduce un correo electrónico laboral válido de un dominio privado, por ejemplo: [email protected]',
+            offline: 'No pudimos añadir tu correo electrónico laboral porque parece que estás sin conexión.',
+        },
+        mergeBlockScreen: {
+            title: 'No se pudo añadir el correo electrónico de trabajo',
+            subtitle: ({workEmail}: WorkEmailMergingBlockedParams) =>
+                `No pudimos añadir ${workEmail}. Por favor, inténtalo de nuevo más tarde en Configuración o chatea con Concierge para obtener ayuda.`,
+        },
     },
     featureTraining: {
         doNotShowAgain: 'No muestres esto otra vez',