Expensify
[$500] Approve button not displayed by default in the dropdown
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: 1.4.54-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: https://expensify.testrail.io/index.php?/tests/view/4433593 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:
- As an employee submit an expense report to workspace chat
- Log in as the Admin of the workspace
- Navigate to the workspace chat of the employee who submitted the report
- Observe the button in the report preview
Expected Result:
Approve should be appearing by default in the button which has dropdown
Actual Result:
Pay Elsewhere is displayed by default, user needs to click on drop down menu and then select Approve.
Workaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [ ] Android: Native
- [ ] Android: mWeb Chrome
- [ ] iOS: Native
- [ ] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [ ] MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/43996225/d39eb4fa-cca6-4d53-88c1-0bb57207fccd
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~0167219d0cf776ee3b
- Upwork Job ID: 1770252974466375680
- Last Price Increase: 2024-03-20
Issue Owner
Current Issue Owner: @mallenexpensify
Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
@mallenexpensify 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.
Proposal
Please re-state the problem that we are trying to solve in this issue.
Pay Elsewhere is displayed by default, user needs to click on drop down menu and then select Approve.
What is the root cause of that problem?
We're pushing approve button at the end of the list
https://github.com/Expensify/App/blob/71e3aa4eb3be90eeadd27260dfb87a3ff67185be/src/components/SettlementButton.tsx#L189-L191
What changes do you think we should make in order to solve the problem?
We should add approveButtonOption to the beginning of buttonOptions
if (shouldShowApproveButton) {
buttonOptions.unshift(approveButtonOption);
}
What alternative solutions did you explore? (Optional)
NA
Result
https://github.com/Expensify/App/assets/113963320/c461ebe3-9643-4e72-aa10-230e842ee2eb
Proposal
Please re-state the problem that we are trying to solve in this issue.
Approve button not displayed by default in the dropdown.
What is the root cause of that problem?
Approve button is pushed at end of the list. Also, payment options are being sorted.
https://github.com/Expensify/App/blob/71e3aa4eb3be90eeadd27260dfb87a3ff67185be/src/components/SettlementButton.tsx#L180-L196
What changes do you think we should make in order to solve the problem?
After the whole logic is done, push approve button at beginning if it needs to be shown.
const paymentMethod = nvpLastPaymentMethod?.[policyID] ?? '';
if (canUseWallet) {
buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
}
if (isExpenseReport && shouldShowPaywithExpensifyOption) {
buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
}
buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]);
// Put the preferred payment method to the front of the array, so it's shown as default if approve button is not to be shown.
if (paymentMethod) {
return buttonOptions.sort((method) => (method.value === paymentMethod ? -1 : 0));
}
if (shouldShowApproveButton) {
buttonOptions.unshift(approveButtonOption);
}
Proposal
Please re-state the problem that we are trying to solve in this issue.
Approve button not displayed by default in the dropdown
What is the root cause of that problem?
We push the button options and sort the option based on paymentMethod, this will always sort the option regardless of the sequence we put the buttons in.
https://github.com/Expensify/App/blob/71e3aa4eb3be90eeadd27260dfb87a3ff67185be/src/components/SettlementButton.tsx#L194-L195
What changes do you think we should make in order to solve the problem?
First, we need to put the approve button at the top of the button list:
+ if (shouldShowApproveButton) {
+ buttonOptions.push(approveButtonOption);
+ }
if (canUseWallet) {
buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
}
........
Then update the condition such that it will not sort the order if shouldShowApproveButton is set to true, then it will by default return the unsorted order of options:
- if (paymentMethod) {
+ if (paymentMethod && !shouldShowApproveButton) {
return buttonOptions.sort((method) => (method.value === paymentMethod ? -1 : 0));
}
What alternative solutions did you explore? (Optional)
N/A
Job added to Upwork: https://www.upwork.com/jobs/~0167219d0cf776ee3b
Triggered auto assignment to Contributor Plus for review of internal employee PR - @mananjadhav (Internal)
Unable to reproduce, the steps in the OP aren't the most clear to me either. @mananjadhav can you attempt reproduction? If you're able to, can you propose the steps and I'll update the OP? Thx
I am unable to send/request money on staging for my collect policy. It is asking to update the billing info. Meanwhile, I just manually enabled the condition and I can Approve is in the dropdown.
If we plan to go ahead, I think @tienifr's proposal looks good to me. All the proposals have the correct RCA and on similar lines.
🎀 👀 🎀 C+ reviewed
Triggered auto assignment to @pecanoro, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
I managed to reproduce it. However, after checking the solutions, I am a bit confused about the expected behavior when there is a preferred payment method. @mallenexpensify Should we always show Approve first or should the preferred payment method go first if there is any? It would be great if you can double check before assigning a proposal.
Current assignee @mananjadhav is eligible for the External assigner, not assigning anyone new.
I managed to reproduce it. However, after checking the solutions, I am a bit confused about the expected behavior when there is a preferred payment method. @mallenexpensify Should we always show Approve first or should the preferred payment method go first if there is any? It would be great if you can double check before assigning a proposal.
@pecanoro , I got this thought too and hence in my proposal, i put a condition:
- if (paymentMethod) {
+ if (paymentMethod && !shouldShowApproveButton) {
return buttonOptions.sort((method) => (method.value === paymentMethod ? -1 : 0));
}
This would solve the issue of the preferred payments as well :)
So when shouldShowApproveButton if false, i.e. the report has been approved, then we automatically push the preferred payment method to the top,
@mananjadhav Can you check my proposal once? I think the unshift should be done after sorting is complete, which will ensure that Approve is always at top.
Else it doesn't make much sense if sorting is done after approve is added at top, because it will then again get shifted.
As mentioned in
https://github.com/Expensify/App/blob/71e3aa4eb3be90eeadd27260dfb87a3ff67185be/src/components/SettlementButton.tsx#L193-L196
I think we want to show the preferred payment method first if there is. Otherwise the approve button is shown as the OP expectation.
But we still need to hear what the final expectation is
We can discuss the proposals once @mallenexpensify can get clarification on what's the expected order of these buttons
I am unable to send/request money on staging for my collect policy. It is asking to update the billing info. Meanwhile, I just manually enabled the condition and I can Approve is in the dropdown.
@mananjadhav How and where did you manually enable the condition to send/request money on collect policies when there was an error asking you to update your billing info?
I am a bit confused about the expected behavior when there is a preferred payment method
I am also a lil confused. If there is a preferred payment setup in Expensify then I'd imagine that the Approve button would show. If there's not, I can see reasoning for Pay Elsewhere cuz approving would do anything.
So... back to the OP, do we know if a bank account or preferred payment method is setup for the admin or user?
@mallenexpensify Could you ask in product was the desired behaviour? I think neither of us is sure about the expected one
Checking on in #qa to see if admin and/or user have bank accounts setup, since I think that would affect expected behaviour https://expensify.slack.com/archives/C9YU7BX5M/p1711498027841129
From the post in #qa
Neither have bank accounts set up.
I think that's why the expected behaviour isn't to show Approve. We show Pay elsewhere because it's the only way for the user to get paid back. If the default was Approve, then nothing would happen. Right?
Approve is different from reimburse, a report can be approved a not reimbursed
What do you think of this proposal then @pecanoro , this will sort to most preferred option only when shouldShowApproveButton will become false, otherwise if shouldShowApproveButton is true then it will show the approve at the top !
Also it moves away from the time and space complexity associated with unshift function and is faster than other suggested approaches
Checking in #expensify-open-source https://expensify.slack.com/archives/C01GTK53T8Q/p1711580170798549
Checking on internally in #qa. Also, added to #wave-collect because it has to do with approving a payment and that'd first be encountered in that project.
Ok! I got double confirmation that we do want to show Approve
@mananjadhav can you review the above and provide feedback? Thx