[$500] Web - Expense - Approve button is displayed on the conversation preview, but not on report

[kbecciv]

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: 1.4.28-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Pre-requisite: user must have submitted a request to a collect workspace with an employee account.

1. Go to https://staging.new.expensify.com/
2. Log in with the admin account of the workspace.
3. Navigate to the workspace chat of the employee who submitted the report.
4. Click on the arrow of the green button for the dropdown menu to be displayed.
5. Select the "Approve" option.
6. Click on the report preview.

Expected Result:

The "Approve" button should be displayed also on the report page.

Actual Result:

The "Approve" button is not displayed on the report page even if already selected on the conversation preview.

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

Bug6348436_1705739592251.bandicam_2024-01-19_17-08-11-609.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011b6f801c0df1bacc
• Upwork Job ID: 1748733849801924608
• Last Price Increase: 2024-01-20
• Automatic offers:
• paultsimura | Contributor | 28124176

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #wave7-collect-approvers
CC @RachCHopkins
TR related https://expensify.testrail.io/index.php?/tests/view/4208298

[eucool]

Proposal

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

The Approve button is displayed on the conversation preview, but not on report

What is the root cause of that problem?

we do not update the ONYXKEYS.NVP_LAST_PAYMENT_METHOD Onyx key of the policy to the new value

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

1. First as stated in UI Layer, we should make a action to update the selected method by the user.

For this action we need to call Onyx.merge() function and pass policyID & paymentMethodType and update the key NVP_LAST_PAYMENT_METHOD , we can name this function as updatePaymentMethod in the IOU action.

The function would be:

function updatePaymentMethod(policyID, paymentMethodType) {
    Onyx.merge(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {[policyID]: paymentMethodType});
}

2. We need to update the menuItems prop and pass onUpdatedSelection so that we can update the Payment method in actions everytime the user changes the method of payment

App/src/components/ButtonWithDropdownMenu.tsx

Lines 165 to 180 in 1ae344b

	<PopoverMenu
	isVisible={isMenuVisible}
	onClose={() => setIsMenuVisible(false)}
	onItemSelected={() => setIsMenuVisible(false)}
	anchorPosition={popoverAnchorPosition}
	anchorRef={caretButton}
	withoutOverlay
	anchorAlignment={anchorAlignment}
	headerText={menuHeaderText}
	menuItems={options.map((item, index) => ({
	...item,
	onSelected: () => {
	setSelectedItemIndex(index);
	},
	}))}
	/>

3. Then we define function to update the method of the policy in SettlementButton:

const onUpdatedSelection = (paymentMethodType) => {
        IOU.updatePaymentMethod(policyID, paymentMethodType);
    };

4. Lastly, we need to pass the onUpdateSelection function as a prop to ButtonWithDropdownMenu in SettlementButton.js file

<ButtonWithDropdownMenu
                    onUpdatedSelection={onUpdatedSelection)}

What alternative solutions did you explore? (Optional)

N/A

[paultsimura]

Proposal

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

When selecting a preferred payment method on the settlement button, it's not persisted between screens

What is the root cause of that problem?

When selecting the option, we do not persist the selected preferred payment method in Onyx.
And when choosing, which option to make default, we check the ONYXKEYS.NVP_LAST_PAYMENT_METHOD Onyx key.

We persist this key only on performing the actual payment or approval.

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

We need to persist the ONYXKEYS.NVP_LAST_PAYMENT_METHOD key for a specific policy when selecting the payment option on the SettlementButton's dropdown.

For this, we can add a prop onItemSelected to the ButtonWithDropdownMenu component, and call it here when selecting an option:

App/src/components/ButtonWithDropdownMenu.tsx

Line 168 in 1ae344b

onItemSelected={() => setIsMenuVisible(false)}

Then, on the SettlementButton, pass the onItemSelected function that will merge the ONYXKEYS.NVP_LAST_PAYMENT_METHOD key with the preferred payment option and the policyID.

What alternative solutions did you explore? (Optional)

[JeremyCroff]

Can you please include steps on how to send a report that requires approval

[abzokhattab]

Proposal

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

When selecting a preferred payment method on the settlement button, it's not persisted

What is the root cause of that problem?

we dont update the ONYXKEYS.NVP_LAST_PAYMENT_METHOD key of the policy after selecting a certain method.

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

we need to add a new prop inside the the ButtonWithDropdownMenu : onChangeSelection

this will be triggered whenever the selection is change: here

App/src/components/ButtonWithDropdownMenu.tsx

Lines 174 to 178 in 1ae344b

	menuItems={options.map((item, index) => ({
	...item,
	onSelected: () => {
	setSelectedItemIndex(index);
	},

we can change it to:

   onSelected: () => {
                            onChangeSelection?.(item.value);
                            setSelectedItemIndex(index);
                        },

then inside the SettlementButton we need to define the following function that would update the last method of the policy:

    const onChangeSelection = (paymentMethodType) => {
        IOU.setPaymentMethod(policyID, paymentMethodType);
    };

the IOU.setPaymentMethod is a new action that needs to be defined as follows in the IOU actions file:

function setPaymentMethod(policyID, paymentMethodType) {
    if (!policyID) {
        return;
    }
    Onyx.merge(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {[policyID]: paymentMethodType});
}

finally, use this function as a prop of ButtonWithDropdownMenu

onChangeSelection={onChangeSelection}

and the last step is to remove the nvp_lastPaymentMethod from the dependencies listed here to prevent reordering the payment options

result

Screen.Recording.2024-01-20.at.6.36.32.PM.mov

[abzokhattab]

@codinggeek2023 please make sure to abide the contributing guides where if there is an update in the proposal, contributes should add a comment mentioning that the proposal was updated.

If you want to make an entirely new proposal or update an existing proposal, please go back and edit your original proposal, then post a new comment to the issue in this format to alert everyone that it has been updated:

Thanks for you understanding

[ntdiary]

Have requested another c+ @allroundexperts to take over this issue. :)

[allroundexperts]

Thanks for your proposals everyone!

@codinggeek2023 I see that you updated your proposal a lot of time after others proposed.

@abzokhattab I think your proposal is very similar to what @paultsimura proposed earlier. As such, I think we should go with there proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[abzokhattab]

Thank you @allroundexperts, my proposal was few minutes after the second proposal but it contained the implementation specific details unlike the other proposal which doesnt contain the code implementation.

[allroundexperts]

Thank you @allroundexperts, my proposal was few minutes after the second proposal but it contained the implementation specific details unlike the other proposal which doesnt contain the code implementation.

Thank you for the explanation but we don't really require concrete implementation details. I think what @paultsimura has proposed is good enough.

[marcochavezf]

Thanks @allroundexperts and agree with your decision, assigning @paultsimura 🚀

[melvin-bot]

📣 @paultsimura 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[marcochavezf]

Hi @paultsimura, let us know when the PR is ready for review :)

[paultsimura]

Hi @paultsimura, let us know when the PR is ready for review :)

Sure, will be ready today 👌

[paultsimura]

This was deployed to prod, the automation didn't work.

[paultsimura]

Hey @sonialiap, a friendly bump here – it was due payment on Feb 12. Thanks 😌

[allroundexperts]

Checklist

1. This was kind of a new feature request. We never implemented this since the creation of pay button (Add pay button to money request header #18692)
2. N/A
3. N/A
4. A regression test would be useful here. Again, the steps in the OP are clear enough and should suffice.

[sonialiap]

@paultsimura contributor $500 - paid ✔️
@allroundexperts C+ $500 - please request in ND

[JmillsExpensify]

$500 approved for @allroundexperts based on summary above.