[$250] Web - Pay - Not here page opens when Gmail user Pay with Expensify

[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: 9.0.38-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): gocemate+a2207@gmail.com Issue reported by: Applause Internal Team

Action Performed:

1. Open 1:1 chat with other user
2. Go to Pay
3. Select USD -$ currency>Enter amount> Next> Pay with Expensify

Expected Result:

Add bank account page should open

Actual Result:

Not here page opens when Gmail user Pay with Expensify

Workaround:

Unknown

Platforms:

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/b9c18590-c3bb-44f9-b8c3-e875c378dbb8

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837168425885571920
• Upwork Job ID: 1837168425885571920
• Last Price Increase: 2024-09-20

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot[bot]]

Triggered auto assignment to @isabelastisser (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]

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

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-09-20 11:10:39 UTC.

Proposal

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

Pay - Not here page opens when gmail user Pay with Expensify

What is the root cause of that problem?

When user is not validated and navigates to bankAccountRoute (settings/wallet/add-bank-account) hmm it not page is displayed https://github.com/Expensify/App/blob/d009d8ed4830c7d0562c524c991b8a688e2b4869/src/components/MoneyRequestConfirmationList.tsx#L849

https://github.com/Expensify/App/blob/d009d8ed4830c7d0562c524c991b8a688e2b4869/src/pages/AddPersonalBankAccountPage.tsx#L70

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

We should check if the user is validated first before we display pay with expensify button here. And hide the button when the user is not validated

• get currentUserPersoanlDetails using

  const currentUserPersonalDetails = useCurrentUserPersonalDetails();

• Display paywith Expensify button when the user is validated

  const canUseWallet = !isExpenseReport && !isInvoiceReport && currency === CONST.CURRENCY.USD && currentUserPersonalDetails.validated;

https://github.com/Expensify/App/blob/d009d8ed4830c7d0562c524c991b8a688e2b4869/src/components/SettlementButton/index.tsx#L98

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[isabelastisser]

@davidcardoza, I can't add this issue to the bill pay project. Can you please help? Thanks!

[1subodhpathak]

Not able to reproduce!

[eucool]

Edited by proposal-police: This proposal was edited at 2024-09-20 18:01:01 UTC.

Proposal

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

Not here page appears for New Unvalidated Accounts when they try to Pay someone using expensify.

What is the root cause of that problem?



We do not allow unvalidated accounts to add bank account, hence when a unvalidated user is navigated to the page, he sees a not found page: 



https://github.com/Expensify/App/blob/d009d8ed4830c7d0562c524c991b8a688e2b4869/src/pages/AddPersonalBankAccountPage.tsx#L70

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

Like we have for Security Page, when an unvalidated user clicks on Two factor Authentication, we show them the RHP to first validated their account:

We can do the same here, when the user clicks Pay with Expensify, we can show them the same screen

A sample mock is as follows:

I used the existing ValidateAccountMessage component from here, the changes will be implemented in AddPersonalBankAccountPage page

What alternative solutions did you explore? (Optional)

[eucool]

Updated Proposal

Updated the proposal to add mock of the changes needed for the PR

[cretadn22]

Proposal

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

When New Unvalidated Accounts attempt to pay someone via Expensify, the Not Here page shows.

What is the root cause of that problem?

TriggerKYCF is triggered when an unverified user clicks "Pay with Expensify". This function will navigate to the '/settings/wallet/add-bank-account' URL (AddPersonalBankAccountPage) https://github.com/Expensify/App/blob/513e6b3c714adbe24cd8b88c9fc9c20130a6c9d4/src/components/SettlementButton/index.tsx#L184-L188

After navigating to AddPersonalBankAccountPage, If the user isn't validated, we show a not found page

https://github.com/Expensify/App/blob/d009d8ed4830c7d0562c524c991b8a688e2b4869/src/pages/AddPersonalBankAccountPage.tsx#L70

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

In this PR, we have created a new page, which we will access whenever an unauthenticated user performs an action that necessitates authenticating their account.

I believe we can apply the same strategy to this bug as well.

https://github.com/Expensify/App/blob/513e6b3c714adbe24cd8b88c9fc9c20130a6c9d4/src/components/SettlementButton/index.tsx#L184

        if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
            if (!isUserValidated) {
                Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(currentRoute));   // This route will be added in https://github.com/Expensify/App/pull/49230
                return;
            }
            triggerKYCFlow(event, iouPaymentType);
            BankAccounts.setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS);
            return;
        }

What alternative solutions did you explore? (Optional)

[ikevin127]

♻️ Reviewing proposals in progress.

[ikevin127]

🎉 Thanks everybody for the proposals and great variety in solutions!

From reviewing the existing proposals, three variants are surfacing (see below) and I'm not sure whether this is a design or business decision but I'll tag @Expensify/design anyways to get their take on this before assignment since the team was active recently in PR #49230.

ℹ️ As reviewer, I lean towards proposal 3 because, given PR #49230, we can agree that some work was put into this flow already specifically for the case when user account is not validated yet. My second option would be proposal 2 since it's the closest to what I think will be preferred here, and we wouldn't need to HOLD if we were to go with this version.

Proposal 1: ♻️ Hide Pay with Expensify button via canUseWallet when using unvalidated account, ⏳ Can be implemented right away	Proposal 2: ♻️ Display ValidateAccountMessage component when pressing Pay with Expensify with unvalidated account, ⏳ Can be implemented right away	Proposal 3 [HOLD #49230]: ♻️ Display new VERIFY_ACCOUNT screen when pressing Pay with Expensify with unvalidated account, ⚠️ Can be implemented as soon as https://github.com/Expensify/App/pull/49230 is merged

[dubielzyk-expensify]

Yeah I kinda wanna hear what @JmillsExpensify and @trjExpensify thinks too. I can see an argument for both 1 and 3. 2 feels weird to me

[dannymcclain]

Agree that I'd like to hear from Jason and Tom, but my understanding was that Proposal 3 was how we wanted to handle all these unvalidated account situations (basically just add the validate screen to the beginning of whatever flow the user was trying to go through) so I have a strong preference for that option.

[trjExpensify]

Yep, same. Proposal 3 for the win.

I'd also say let's make sure that copy gives them a hint to go check their mail to grab the magic code we just fired off. I.e "This feature requires you to validate your account. Enter the magic code sent to your email."