Pay Someone - Wallet page opens when refreshing in "Validate your account" page

[lanitochka17]

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: 9.0.45-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): dave0123seife@gmail.com
Issue reported by: Applause - internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Gmail account
3. Complete the onboarding
4. Open DM with any user
5. Click + >. Pay someone
6. Select currency in USD, enter amount and click Next
7. Click Pay with Expensify
8. Refresh the page

Expected Result:

Wallet page is not opened. DM chat is shown

Actual Result:

The DM chat page changes to Wallet page after refreshing in "Validate your account" page

Workaround:

Unknown

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

Bug6625141_1728100368377.Screen_Recording_2024-10-05_at_6.35.48_in_the_morning.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@slafortune FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-05 16:08:40 UTC.

Proposal

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

The DM chat page changes to Wallet page after refreshing in "Validate your account" page

What is the root cause of that problem?

• We are navigating to RHN settings/wallet/verify in:

App/src/components/SettlementButton/index.tsx

Line 193 in 99f280b

Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute());

which will be mapped to wallet page.

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

• We can create a new route for the pages/settings/Wallet/VerifyAccountPage, can be settings/verify like we did in there for categories page, there for tags page and there for wallet and expensify card page.

1. In there, add:

    VERIFY_ACCOUNT: {route: 'settings/verify', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/verify', backTo)},

2. In there, add:

   VERIFY_ACCOUNT: {
        VERIFY_ACCOUNT_ROOT: 'Verify_Account_Root,
    },

3. In there create new navigator:

const VerifyAccountModalStackNavigator = createModalStackNavigator({
    [SCREENS.VERIFY_ACCOUNT_ROOT]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/VerifyAccountPage').default,

4. In there add:

                   <Stack.Screen
                        name={SCREENS.RIGHT_MODAL.VERIFY_ACCOUNT}
                        component={ModalStackNavigators.VefiryAccountModalStackNavigator}
                    />

5. In there, add:

 [SCREENS.RIGHT_MODAL.VERIFY_ACCOUNT]: {
                    screens: {
                        [SCREENS.VERIFY_ACCOUNT.VERIFY_ACCOUNT_ROOT]: ROUTES.VERIFY_ACCOUNT.route,
                    },
                },

6. In there, use:

                Navigation.navigate(ROUTES.VERIFY_ACCOUNT.getRoute());

instead.

What alternative solutions did you explore? (Optional)

[twilight294]

regression from #50169 #49523 @ikevin127 @cretadn22

[truph01]

IMO, I don't think this issue is a regression from that PR, as the issue is more of an improvement, and we can't reproduce the same behavior in production for comparison.

[truph01]

Proposal updated

[bernhardoj]

Proposal

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

Page behind RHP changes to wallet page after refresh while on the wallet verify account page.

What is the root cause of that problem?

By default, wallet verify account page is mapped to the wallet page.

App/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

Lines 28 to 40 in 99f280b

	[SCREENS.SETTINGS.WALLET.ROOT]: [
	SCREENS.SETTINGS.WALLET.DOMAIN_CARD,
	SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.NAME,
	SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.PHONE,
	SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.ADDRESS,
	SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.CONFIRM,
	SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE,
	SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT,
	SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS,
	SCREENS.SETTINGS.WALLET.CARD_ACTIVATE,
	SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD,
	SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS,
	SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT,

So, refreshing it will show the matching route, that is the wallet page.

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

We can pass backTo when opening the wallet verify account page,

App/src/components/SettlementButton/index.tsx

Line 193 in 99f280b

Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute());

Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute()));

so it will be used as the matching screen. In our case, the backTo is the pay someone confirm page which will return a report screen as the matching screen.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 112 to 125 in 99f280b

	function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): NavigationPartialRoute<CentralPaneName | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR> | undefined {
	// Check for backTo param. One screen with different backTo value may need diferent screens visible under the overlay.
	if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') {
	const stateForBackTo = getStateFromPath(route.params.backTo, config);
	if (stateForBackTo) {
	// If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen.
	const rhpNavigator = stateForBackTo.routes.find((rt) => rt.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);
	if (rhpNavigator && rhpNavigator.state) {
	const isRHPinState = stateForBackTo.routes.at(0)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
	if (isRHPinState) {
	return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
	}
	}

But there is currently another bug where the backTo as the matching screen doesn't work which should be handled here.

[truph01]

Proposal updated