[HOLD for payment 2024-08-26][$250] Desktop - Wallet - "Complete Process in Browser" link is not redirecting on Desktop app

[IuliiaHerets]

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: v9.0.18-1
Reproducible in staging?: Y
Reproducible in production?: Y
The issue was found when executing this PR #46380
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Open the ND app on Desktop
2. Sign into an Expensifail account
3. Access /settings/wallet
4. Go to Enable Wallet & Tap on the Blue link on Desktop

Expected Result:

User expects to be redirected to Safari browser

Actual Result:

No redirect occurs on desktop for this area (If you do the same thing on VBA flow, the redirect does occur, this issue is specific to the wallet section)

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6565203_1723086492226.No_redirect.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01660f526bffd95298
• Upwork Job ID: 1822029378202620298
• Last Price Increase: 2024-08-09

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

Triggered auto assignment to @adelekennedy (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.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@adelekennedy 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

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-08-12 14:50:05 UTC.

Proposal

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

Enable payment to complete process in browser link on Desktop app is not opening the URL in a browser

What is the root cause of that problem?

The href value in here is "https://staging.new.expensify.com/settings/wallet/enable-payments" which is exactly the same page as the current page in the desktop app

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 31 in 107e7ba

const enablePayments = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ENABLE_PAYMENTS}`;

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 49 in 107e7ba

<TextLink href={enablePayments}>{translate(plaidDesktopMessage)}</TextLink>

Since the link is internal expensify path and also has same origin with the desktop app, this code will executed which is navigated to the current page. So it appears that no redirection is occurring

App/src/libs/actions/Link.ts

Lines 167 to 174 in 4ef1202

	if (internalNewExpensifyPath && hasSameOrigin) {
	if (Session.isAnonymousUser() && !Session.canAnonymousUserAccessRoute(internalNewExpensifyPath)) {
	Session.signOutAndRedirectToSignIn();
	return;
	}
	Navigation.navigate(internalNewExpensifyPath as Route);
	return;
	}

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

use Link.openExternalLinkWithToken like in BankAccountStep

const enablePaymentsRoute = `${ROUTES.SETTINGS_ENABLE_PAYMENTS}`;

<TextLink onPress={() => Link.openExternalLinkWithToken(enablePaymentsRoute)}>{translate(plaidDesktopMessage)}</TextLink>

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

No redirect occurs on desktop for this area (If you do the same thing on VBA flow, the redirect does occur, this issue is specific to the wallet section)

What is the root cause of that problem?

I noticed that the previous solution doesn't clarify the RCA. That's the reason I posted my proposal

I tested and the redirect link still works but the user doesn't auto login in browser

Screen.Recording.2024-08-09.at.14.24.32.mov

The problem is the href is the new Expensify URL that doesn't contain the token param then it simply opens the URL without logging in

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 31 in 87c116b

const enablePayments = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ENABLE_PAYMENTS}`;

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 49 in 87c116b

<TextLink href={enablePayments}>{translate(plaidDesktopMessage)}</TextLink>

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

We fixed the same bug in BankAccountStep here by using openExternalLinkWithToken to get the authToken and add this as param in the URL

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 137 in 87c116b

<TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>

We can use the same solution here

const enablePaymentsRoute = ROUTES.SETTINGS_ENABLE_PAYMENTS;
<TextLink onPress={() => Link.openExternalLinkWithToken(enablePaymentsRoute)}>{translate(plaidDesktopMessage)}</TextLink>

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 49 in 87c116b

<TextLink href={enablePayments}>{translate(plaidDesktopMessage)}</TextLink>

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01660f526bffd95298

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (External)

[trjExpensify]

Putting wallet in vip-split for P2P, issue says VBBA is fine.

[wildan-m]

Proposal

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

Desktop - Wallet - "Complete Process in Browser" link is not redirecting on Desktop app

What is the root cause of that problem?

I can only reproduce it in the staging build, but it works fine in dev. Currently, we utilize Linking.openURL to open external URLs for Electron, even though this method is not officially supported in Electron.

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

Use electron specific ways to open an external link (shell.openExternal()

In desktop/main.ts add new ipcMain event

                ipcMain.on(ELECTRON_EVENTS.OPEN_EXTERNAL_LINK, (event, url) => {
                    shell.openExternal(url);
                });

create new desktop specific code

src/libs/asyncOpenURL/index.desktop.ts

import Log from '@libs/Log';
import type AsyncOpenURL from './types';
import ELECTRON_EVENTS from '@desktop/ELECTRON_EVENTS';

const asyncOpenURL: AsyncOpenURL = (promise, url) => {
    if (!url) {
        return;
    }
    promise
        .then((params) => {
            window.electron.send(ELECTRON_EVENTS.OPEN_EXTERNAL_LINK, typeof url === 'string' ? url : url(params));
        })
        .catch(() => {
            Log.warn('[asyncOpenURL] error occured while opening URL', {url});
        });
};

export default asyncOpenURL;

Branch for this solution

What alternative solutions did you explore? (Optional)

[ntdiary]

Under review. :)

[ntdiary]

This issue can be reproduced in the production environment.
I think using openExternalLinkWithToken is feasible, but the above proposals don't provide an accurate RCA.
Based on my breakpoint debugging, internalNewExpensifyPath && hasSameOrigin is true, and the href prop is exactly the current route, so it 'appears' that no redirection is occurring.

@nyomanjyotisa, can you please update your RCA so we can move forward with your proposal?
Additionally, in the first part of the proposal, please re-state the problem in your own words so we can ensure you have a full understanding of the issue. :)

[nyomanjyotisa]

Proposal updated

RCA and the first part of the proposal updated @ntdiary

[ntdiary]

Proposal updated

RCA and the first part of the proposal updated @ntdiary

Great, let's move forward with your proposal. :)

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[luacmartins]

Proposal LGTM!

[ntdiary]

Hi, @nyomanjyotisa, do you have an ETA for the PR? :)

[nyomanjyotisa]

PR is ready for review

[luacmartins]

PR was deployed to prod on Aug 19

[ntdiary]

Hi, @adelekennedy, when you have a moment, can you please make a payment summary here? 🙂

[adelekennedy]

Yes! I'm so sorry

Payouts due:

• Contributor: $250 @nyomanjyotisa - Upwork @nyomanjyotisa invited you to the job!
• Contributor+: $250 @ntdiary - NewDot

Upwork job is here.

[JmillsExpensify]

$250 approved for @ntdiary