[$250] Next Steps - Next steps still shows "Waiting for you to add a bank account" after adding BA

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.70-1
Reproducible in staging?: Yes
Reproducible in production?: Unable to validate in Production because of BA setup
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
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): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. As an admin, create workspace and add an employee
3. As an admin, enable workflow and configure the following

• set delay submission to manually
• enable approvals
• add bank account (details below)

4. As an employee, submit an expense and click on the submit button.
5. As an admin, approve it and click on pay with Expensify once.
6. As an admin, Verify the next steps indicate "Waiting for [userSubmitter] to add a bank account"
7. As an employee, go to the expense details, click on add bank account and finish the flow(Choose the 0000 bank account)
8. As an employee, see the next steps after adding bank account.

Expected Result:

After adding bank account the next steps shouldn't show "Waiting for you to add a bank account"

Actual Result:

Next steps says "Waiting for you to add a bank account" even after adding bank account

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863967066967992824
• Upwork Job ID: 1863967066967992824
• Last Price Increase: 2024-12-10

Issue Owner

Current Issue Owner: @rlinoz

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[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.

[vincdargento]

@garrettmknight 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.

[rlinoz]

I think this might be reproducible in the production branch, let me see

[rlinoz]

Reproduced in the production branch:

[melvin-bot]

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

[melvin-bot]

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

[M00rish]

it seems to me like a backend issue, next_step value from onyx does not get updated as soon as bank account is added, after a minute or so it gets updated(or with a reload) :

[rlinoz]

I mean, backend might be at play here as well, but the fact that we instantly remove the add bank account button makes me think that we can improve this on the App side as well. Maybe even just a better optimistic data.

[M00rish]

Edited by proposal-police: This proposal was edited at 2024-12-05 23:55:30 UTC.

Proposal

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

Next Steps - Next steps still shows "Waiting for you to add a bank account" after adding BA

What is the root cause of that problem?

no optimistic data for this case in addPersonalBankAccount:

App/src/libs/actions/BankAccounts.ts

Lines 212 to 222 in da7252d

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
	value: {
	isLoading: true,
	errors: null,
	plaidAccountID: account.plaidAccountID,
	},
	},
	],

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

in this case, we are coming from here:

App/src/pages/home/report/ReportActionItem.tsx

Line 620 in 840c227

onPress={() => BankAccounts.openPersonalBankAccountSetupView(Navigation.getTopmostReportId() ?? linkedReport?.reportID, isUserValidated)}

we'll use ExitReportID, after it's merged in onyx:

App/src/libs/actions/BankAccounts.ts

Line 79 in 840c227

Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});

by updating AddPersonalBankAccount to accept it as optional argument

function addPersonalBankAccount(account: PlaidBankAccount,NextStepReportID:string | undefined = undefined) {
.....
    const onyxData: OnyxData = {
        optimisticData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                value: {
                    isLoading: true,
                    errors: null,
                    plaidAccountID: account.plaidAccountID,
                },
            },
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${NextStepReportID ?? ''}`,
                value: NextStepReportID ? buildOptmisticNextStepAfterBA() : '',
            },
        ],

buildOptmisticNextStepAfterBA will build the optmisticNextStep:

function buildOptmisticNextStepAfterBA(){
    const type: ReportNextStep['type'] = 'neutral';
    const optimisticNextStep: ReportNextStep = {
        type,
        icon: CONST.NEXT_STEP.ICONS.STOPWATCH,
        message: [
            {
                text: 'Waiting for ',
            },
            {
                text: `payment`,
            },
            {
                text: ' to ',
            },
            {
                text: 'complete',
            },
            {
                text: `By ${DateUtils.getFiveDaysFromNow().split(' ')[0]}`,
            },
        ],
    };

    return optimisticNextStep;
}

and we'll update addPersonalBankAccount use here :

 BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount,personalBankAccount?.exitReportID);

changes are in this branch

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

cases to test:

• employee without BA
• employee already with BA

What alternative solutions did you explore? (Optional)

for optimisticNextStep we can use instead buildNextStep:

function addPersonalBankAccount(account: PlaidBankAccount,NextStepReportID:string | undefined = undefined) {
const [report] =  useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${NextStepReportID}`) ?? '';
const optimisticNextStep = report ? buildNextStep(report,CONST.REPORT.STATUS_NUM.REIMBURSED) : '';
.....
    const onyxData: OnyxData = {
        optimisticData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                value: {
                    isLoading: true,
                    errors: null,
                    plaidAccountID: account.plaidAccountID,
                },
            },
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${NextStepReportID ?? ''}`,
                value: optimisticNextStep,
            },
        ],

and in buildNextStep we to update the REIMBURSED case:

case CONST.REPORT.STATUS_NUM.REIMBURSED:
  optimisticNextStep= {
          type,
          icon: CONST.NEXT_STEP.ICONS.STOPWATCH,
          message: [
              {
                  text: 'Waiting for ',
              },
              {
                  text: `payment`,
              },
              {
                  text: ' to ',
              },
              {
                  text: 'complete',
              },
              {
                  text: `By ${DateUtils.getFiveDaysFromNow().split(' ')[0]}`,
              },
          ],
      };
    break;

i still have a question in terms of the backend, if a report is paid, will it always send same response waiting for payment to complete...,? or there are cases where no action is required.

[sobitneupane]

@M00rish Thanks for the proposal:

            text: `By ${DateUtils.getFiveDaysFromNow().split(' ')[0]}`,

I don't think we can be completely sure that the payment will be completed within five days. Could you share why you chose this value? I believe we should align with the logic used in the backend, if possible.

There’s a buildNextStep function in NextStepUtils that, I believe, should handle this specific case as well."

[M00rish]

yes we can't be sure about that period, during my testing it added 5 five days, but it's something that we have to confirm with backend on how they calculate that value(is it based on days or hours etc...) so we simulate on the front end.

i updated my proposal with alternative solution to use NextStepUtils.buildNextStep, @sobitneupane, thanks.

[sobitneupane]

@rlinoz How should we estimate the date for the payment completion in the frontend? Could you please share the backend logic?

[rlinoz]

Ah crap, we actually have a expectedReimbursementDate that I though we sent to the FE, but apparently we don't, let me check what we can do.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rlinoz]

After a lot of digging I think this might get fixed entirely with a change in the backend, sorry about that.

[rlinoz]

PR is in staging

[melvin-bot]

@garrettmknight, @rlinoz, @sobitneupane Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[rlinoz]

Deployed to prod