[HOLD for payment 2024-07-26] [$250] Send invoice - "Choose a payment method" disappears after returning from Pay elsewhere page

[izarutskaya]

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.4-0
Reproducible in staging?: Y
Reproducible in production?: Y
Found when validating PR : #43036
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. [User A] Send an invoice to user B.
3. [User B] Go to invoice chat.
4. [User B] Click Pay button.
5. [User B] Click Pay as individual or Pay as business.
6. [User B] Click on the back button.

Expected Result:

"Choose a payment method below" in the payment method selection page will persist.

Actual Result:

"Choose a payment method below" in the payment method selection page disappears.

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

Bug6532611_1720055363822.20240704_090314.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ace2c2d5df911f17
• Upwork Job ID: 1809200291724480759
• Last Price Increase: 2024-07-05
• Automatic offers:
• cretadn22 | Contributor | 103046339

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #vip-bills.

[daledah]

Proposal

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

"Choose a payment method below" in the payment method selection page disappears.

What is the root cause of that problem?

We don't use setState when click back button in

App/src/components/PopoverMenu.tsx

Line 159 in 6ac95e4

enteredSubMenuIndexes.splice(-1);

so state enteredSubMenuIndexes is not updated and popover isn't rendered again

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

We should create a function renderHeader() and it'll update header everytime enteredSubMenuIndexes changes

    const renderHeader = () => {
        if(!headerText || enteredSubMenuIndexes.length > 0) {
            return;
        }
        return <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3]}>{headerText}</Text>
    }

What alternative solutions did you explore? (Optional)

Using setState in this case

setEnteredSubMenuIndexes((prevState) => prevState.splice(-1)) 

[cretadn22]

Proposal

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

"Choose a payment method" disappears after returning from Pay elsewhere page

What is the root cause of that problem?

We update enteredSubMenuIndexes state directly

App/src/components/PopoverMenu.tsx

Line 159 in 6ac95e4

enteredSubMenuIndexes.splice(-1);

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

Need to utilize setState to adjust the state value

App/src/components/PopoverMenu.tsx

Line 159 in 6ac95e4

enteredSubMenuIndexes.splice(-1);

setEnteredSubMenuIndexes((prevState) => prevState.slice(0, -1)) 

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[Abdelrahman286]

it would be better if you explain with voice