[HOLD for payment 2024-03-18] [$500] Public room - Sign-in modal is hidden behind welcome modal after selecting an option

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.31-2
Reproducible in staging?: y
Reproducible in production?: new feature
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Log out if logged in.

2. Navigate to public room https://staging.new.expensify.com/r/2376199970894587

3. Select any option in the welcome message modal.

Expected Result:

Welcome modal will dismiss and sign-in modal will appear after selecting an option.

Actual Result:

The link changes to sign-in URL, but the welcome modal does not dismiss and the sign-in modal is hidden behind it.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6354272_1706163569570.20240125_113158.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bdb196958ade050b
• Upwork Job ID: 1752411868444123136
• Last Price Increase: 2024-02-27
• Automatic offers:
• fedirjh | Reviewer | 0
• dukenv0307 | Contributor | 0

Issue Owner

Current Issue Owner: @kevinksullivan

[melvin-bot]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[aimane-chnaif]

Missing test case from #32154

[aimane-chnaif]

What's the expected behavior after opening public link while signed out?

• show FAB as usual
• show welcome modal and selecting any option dismiss modal and show sign-in modal

cc: @stitesExpensify

[dummy-1111]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Sign-in modal is hidden behind welcome modal after selecting an option in public room

What is the root cause of that problem?

We have recently introduced full screen engagement modal named PurposeForUsingExpensifyModal

We pass onPress handler to the MenuItem here

App/src/components/PurposeForUsingExpensifyModal.tsx

Line 123 in 0d0b0a8

onPress: () => completeModalAndClose(messageCopy[choice], choice),

When selecting an option, we redirect to the sign-in modal if the user is not signed in

App/src/components/MenuItem.tsx

Line 381 in 0d0b0a8

onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}

App/src/libs/actions/Session/index.ts

Lines 134 to 139 in 0d0b0a8

	function checkIfActionIsAllowed<TCallback extends (...args: any[]) => any>(callback: TCallback, isAnonymousAction = false): TCallback | (() => void) {
	if (isAnonymousUser() && !isAnonymousAction) {
	return () => signOutAndRedirectToSignIn();
	}
	return callback;
	}

So menu item's onPress handler isn't executed at all.
This is the root cause

What changes do you think we should make in order to solve the problem?

We can listen navigation state and hide the engagement modal if needed
We show this modal on mount here

App/src/components/PurposeForUsingExpensifyModal.tsx

Lines 91 to 101 in 0d0b0a8

	useEffect(() => {
	const navigationState = navigation.getState();
	const routes = navigationState.routes;
	const currentRoute = routes[navigationState.index];
	if (currentRoute && NAVIGATORS.CENTRAL_PANE_NAVIGATOR !== currentRoute.name && currentRoute.name !== SCREENS.HOME) {
	return;
	}
	Welcome.show(routes, () => setIsModalOpen(true));
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

We can add navigation listener here

    useEffect(() => {
        ~  ~  ~
        Welcome.show(routes, () => setIsModalOpen(true));
        return navigation.addListener('state', (event) => {
            const state = event.data.state;
            const route = state.routes[state.index];
            if (route.name === currentRoute.name) {
                return;
            }
            setIsModalOpen(false);
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

We compare the route's name to determine if we need to hide the modal in the above solution. We can use more optimized or suitable comparison

The solution works as expected

Result

35131.mp4

What alternative solutions did you explore? (Optional)