Merge pull request Expensify#71522 from Expensify/blimpich-surfaceErrorMessages

surface specific error messages for AddWorkEmail

Author: inimaga

src/components/OnboardingMergingAccountBlockedView.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import {setOnboardingErrorMessage} from '@userActions/Welcome';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import BlockingView from './BlockingViews/BlockingView';
 import Button from './Button';
@@ -20,14 +22,24 @@ type OnboardingMergingAccountBlockedViewProps = {
 function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergingAccountBlockedViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [onboardingErrorMessage] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE, {canBeMissing: true});
+
+    const getErrorSubtitle = () => {
+        if (onboardingErrorMessage) {
+            return onboardingErrorMessage;
+        }
+        // Fallback to generic error message
+        return translate('onboarding.mergeBlockScreen.subtitle', {workEmail});
+    };
+
     return (
         <>
             <BlockingView
                 icon={ToddBehindCloud}
                 iconWidth={variables.modalTopIconWidth}
                 iconHeight={variables.modalTopIconHeight}
                 title={translate('onboarding.mergeBlockScreen.title')}
-                subtitle={translate('onboarding.mergeBlockScreen.subtitle', {workEmail})}
+                subtitle={getErrorSubtitle()}
                 subtitleStyle={[styles.colorMuted]}
             />
             <Button

tests/ui/WorkEmailOnboarding.tsx

@@ -581,4 +581,59 @@ describe('OnboardingWorkEmailValidation Page', () => {
         unmount();
         await waitForBatchedUpdatesWithAct();
     });
+
+    it('should display specific error message when ONBOARDING_ERROR_MESSAGE is set', async () => {
+        await TestHelper.signInWithTestUser();
+
+        const specificErrorMessage = 'some extraordinarily specific error has occurred!';
+
+        await act(async () => {
+            await Onyx.merge(ONYXKEYS.NVP_ONBOARDING, {
+                hasCompletedGuidedSetupFlow: false,
+                shouldValidate: true,
+                isMergingAccountBlocked: true,
+            });
+            await Onyx.merge(ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM, {
+                onboardingWorkEmail: 'test@company.com',
+            });
+            await Onyx.merge(ONYXKEYS.ONBOARDING_ERROR_MESSAGE, specificErrorMessage);
+        });
+
+        const {unmount} = renderOnboardingWorkEmailValidationPage(SCREENS.ONBOARDING.WORK_EMAIL_VALIDATION, {backTo: ''});
+
+        await waitForBatchedUpdatesWithAct();
+
+        await waitFor(() => {
+            expect(screen.getByText(specificErrorMessage)).toBeOnTheScreen();
+        });
+
+        unmount();
+        await waitForBatchedUpdatesWithAct();
+    });
+
+    it('should fallback to generic error message when ONBOARDING_ERROR_MESSAGE is not set', async () => {
+        await TestHelper.signInWithTestUser();
+
+        await act(async () => {
+            await Onyx.merge(ONYXKEYS.NVP_ONBOARDING, {
+                hasCompletedGuidedSetupFlow: false,
+                shouldValidate: true,
+                isMergingAccountBlocked: true,
+            });
+            await Onyx.merge(ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM, {
+                onboardingWorkEmail: workEmail,
+            });
+        });
+
+        const {unmount} = renderOnboardingWorkEmailValidationPage(SCREENS.ONBOARDING.WORK_EMAIL_VALIDATION, {backTo: ''});
+
+        await waitForBatchedUpdatesWithAct();
+
+        await waitFor(() => {
+            expect(screen.getByText(translateLocal('onboarding.mergeBlockScreen.subtitle', {workEmail}))).toBeOnTheScreen();
+        });
+
+        unmount();
+        await waitForBatchedUpdatesWithAct();
+    });
 });