Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-11-09] [$500] Manual request - Amount is not shown in the confirmation page after adding a receipt #29854

Closed
6 tasks done
izarutskaya opened this issue Oct 18, 2023 · 34 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@izarutskaya
Copy link

izarutskaya commented Oct 18, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


Issue found when executing PR: #29474

Version Number: v1.3.86-1

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:

  1. Go to staging.new.expensify.com
  2. Go to chat > + > Request money > Manual.
  3. Enter amount and proceed to confirmation page.
  4. Click 3-dot menu > Add receipt.
  5. Select a receipt.

Expected Result:

The amount field and amount entered should be visible in the confirmation page.

Actual Result:

There is no any data about amount requested in the confirmation page.

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

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Bug6241500_1697620412215.20231018_101618.mp4
MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01e9f9de38a831eccf
  • Upwork Job ID: 1714604111977570304
  • Last Price Increase: 2023-10-18
@izarutskaya izarutskaya added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Oct 18, 2023
@melvin-bot melvin-bot bot changed the title Manual request - Amount is not shown in the confirmation page after adding a receipt [$500] Manual request - Amount is not shown in the confirmation page after adding a receipt Oct 18, 2023
@melvin-bot
Copy link

melvin-bot bot commented Oct 18, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Oct 18, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Oct 18, 2023

Bug0 Triage Checklist (Main S/O)

  • This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
  • This bug is not a duplicate report (check E/App issues and #expensify-bugs)
    • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
  • This bug is reproducible using the reproduction steps in the OP. S/O
    • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
    • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
  • This issue is filled out as thoroughly and clearly as possible
    • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
  • I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 18, 2023
@melvin-bot
Copy link

melvin-bot bot commented Oct 18, 2023

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

@cooldev900
Copy link
Contributor

cooldev900 commented Oct 18, 2023

Proposal

from: @cooldev900

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

The amount doesn't show when getting back confirmation page after adding receipt.

What is the root cause of that problem?

The root cause is that props.receiptPath is set when we get back to confirmation page after adding the receipt.

} else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) {
text = translate('iou.request');

So props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute turns to true and then text becomes only Request without amount.

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

We have to check if formattedAmount has value.
if it has value, we need to update the text with that value.

if (isSplitBill && props.iouAmount === 0) {
            text = translate('iou.split');
        } else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) {
            text = translate('iou.request');
            if (formattedAmount) {
                text = translate('iou.requestAmount', { amount: formattedAmount });    
            }
        } else {
            const translationKey = isSplitBill ? 'iou.splitAmount' : 'iou.requestAmount';
            text = translate(translationKey, {amount: formattedAmount});
        }

What alternative solutions did you explore? (Optional)

N/A

@akamefi202
Copy link
Contributor

akamefi202 commented Oct 18, 2023

Proposal

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

Amount is not shown in the confirmation page after adding a receipt.

What is the root cause of that problem?

{props.shouldShowSmartScanFields && (
<MenuItemWithTopDescription
shouldShowRightIcon={!props.isReadOnly && !props.isDistanceRequest}
title={formattedAmount}
description={translate('iou.amount')}

Amount is not shown because shouldShowSmartScanFields is false.

shouldShowSmartScanFields={_.isEmpty(props.iou.receiptPath)}

The value of shouldShowSmartScanFields is false because receiptPath is not empty.
Which means that we added a receipt in this issue.

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

shouldShowSmartScanFields={_.isEmpty(props.iou.receiptPath) || props.iou.amount !== 0} 

I think we need to update shouldShowSmartScanFields property of MoneyRequestConfirmationList component.
If amount is not 0, it means that the user inputted the mount and the app should show amount field in next step.

So we can update the property like above code.
As a result, Amount will be shown in the confirmation page after adding a receipt.

What alternative solutions did you explore? (Optional)

N/A

@ikevin127
Copy link
Contributor

Proposal

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

There is no amount data shown in the confirmation's page Request button for Request Money - Manual request -> upon adding receipt from the more 3 dot menu.

What is the root cause of that problem?

const splitOrRequestOptions = useMemo(() => {
let text;
if (isSplitBill && props.iouAmount === 0) {
text = translate('iou.split');
} else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) {
text = translate('iou.request');
} else {
const translationKey = isSplitBill ? 'iou.splitAmount' : 'iou.requestAmount';
text = translate(translationKey, {amount: formattedAmount});
}
return [
{
text: text[0].toUpperCase() + text.slice(1),
value: props.iouType,
},
];
}, [isSplitBill, isTypeRequest, props.iouType, props.iouAmount, props.receiptPath, formattedAmount, isDistanceRequestWithoutRoute, translate]);

In the code above, the else if condition (props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute applies in the case of this issue which returns the Request button label only, without the amount.

The else condition would actually return in this case Request {currency+amount} which this issue is about, if only the else would be reached.

The reason why the else if condition mentioned above does not return the Request {currency+amount} is because:

  • it does not take into account the props.iouAmount which is different than 0 when a Manual request is issued because the input of the amount is required in Manual request's first step as it can be seen here:
Screenshot 2023-10-18 at 18 51 22

step which does not take place in the case of Request money -> Scan / Distance because in these 2 cases the amount is calculated / estimated from either the receipt itself and not shown on the Request button label or the waypoints distance which does show the amount on the Request button label.

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

Carefully taking into account the 2 Request money -> Scan / Distance cases, my changes to solve this problem would be to change the else if condition from:

-    else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute)
     to
+    else if ((props.receiptPath && isTypeRequest && props.iouAmount === 0) || isDistanceRequestWithoutRoute)

adding a check for the props.iouAmount === 0 case in which we should only show Request label on the button.

If there is an amount, which in the case of this issue is because it is required in the step 1 of the Manual request type, then the else if would not pass and we would return the else which will show label Request {currency+amount} on the button.

Result:

MacOS: Chrome / Safari
Screen.Recording.2023-10-18.at.19.08.29.mov

@melvin-bot melvin-bot bot added the Overdue label Oct 20, 2023
@joekaufmanexpensify
Copy link
Contributor

Reproduced, and this def seems like a bug. @ArekChr thoughts on any of these proposals?

@melvin-bot melvin-bot bot removed the Overdue label Oct 20, 2023
@abdel-h66
Copy link
Contributor

abdel-h66 commented Oct 20, 2023

Proposal

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

Manual request - Amount is not shown in the confirmation page after adding a receipt

What is the root cause of that problem?

When we attach a receipt to a manual request, we update the property in the iou object called receiptPath.
→ We use this value to check if we want to show the smart scan fields in the MoneyRequestConfirmationList
→ We also use it to show the correct label on the request button

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

→ To fix the first issue of displaying the missing amount field after attaching the receipt, in the iou object the amount is already set, we can take advantage of that and update the props passed to in MoneyRequestConfirmPage to

shouldShowSmartScanFields={_.isEmpty(props.iou.receiptPath) || props.iou.amount !== 0}

→ For the button label, that is managed by splitOrRequestOptions, we can show the text Request 22EUR by adding a check props.receiptPath && props.iouAmount !== 0 here

        if (isSplitBill && props.iouAmount === 0) {
            text = translate('iou.split');
        } else if(props.receiptPath && props.iouAmount !== 0) {
           text = translate('iou.requestAmount', {amount: formattedAmount});
        } else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) {
            text = translate('iou.request');
        }  else {
            const translationKey = isSplitBill ? 'iou.splitAmount' : 'iou.requestAmount';
            text = translate(translationKey, {amount: formattedAmount});
        } 
Results

image

What alternative solutions did you explore? (Optional)

N/A

@melvin-bot melvin-bot bot added the Overdue label Oct 23, 2023
@joekaufmanexpensify
Copy link
Contributor

Pending review of proposals

@melvin-bot melvin-bot bot removed the Overdue label Oct 23, 2023
@ArekChr
Copy link
Contributor

ArekChr commented Oct 24, 2023

@cooldev900 Understood the root cause first and his proposal solves the problem effectively.

🎀 👀 🎀 C+ reviewed

@melvin-bot
Copy link

melvin-bot bot commented Oct 24, 2023

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

@abdel-h66
Copy link
Contributor

@ArekChr The solution I offered addresses both problems: it rectifies the display of the amount field and ensures the corresponding update to the CTA button

@ikevin127
Copy link
Contributor

@ArekChr The reason I posted my proposal was because I tested @cooldev900's first and if merged with the changes he proposed, it would cause a regression in the following scenario:

  • Requests money -> Scan -> Add receipt
  • notice the Request button which now displays Request {currency + 0.00}
Video / Screenshot of regression
Screen.Recording.2023-10-24.at.21.09.55.mov
Screenshot 2023-10-24 at 21 14 24

As mentioned in my proposal, my changes account for Scan / Distance requests as to not create any regressions, plus it's cleaner code wise because it doesn't nest if within else if.

@cooldev900
Copy link
Contributor

cooldev900 commented Oct 24, 2023

if (isSplitBill && props.iouAmount === 0) {
            text = translate('iou.split');
        } else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) {
            text = translate('iou.request');
            if (props.iouAmount !== 0) {
                text = translate('iou.requestAmount', { amount: formattedAmount });    
            }
        } else {
            const translationKey = isSplitBill ? 'iou.splitAmount' : 'iou.requestAmount';
            text = translate(translationKey, {amount: formattedAmount});
     }

how about this? @ikevin127
It will eliminate regression and thank you.

@ikevin127
Copy link
Contributor

ikevin127 commented Oct 24, 2023

Well, that's for you and the C+ to thoroughly test and review said proposal in the future before deciding to post or go with said proposal 🙂

And no, you do not have my blessing to take inspiration from my proposal to "fix" yours after the fact if that's what you're asking for 😅

I take that back, seems I wasn't aware of some unwritten rules like:

If 2nd proposal identified important thing like regressions which wouldn't have been easily caught even in PR review, go with that one. Otherwise always pick up 1st proposal.
It's fine to apply 2nd proposal's additional changes in PR where 1st proposal is accepted.

I still support my proposal for the reasons I mentioned in my last comment.
Whatever happens, good luck with future proposals and keep an eye out for regressions!

Edit:
Got a bit of a discussion going on Slack regarding the way this issue was handled in case anybody wants to give their 2 cents' on the matter, regardless. Slack: https://expensify.slack.com/archives/C01GTK53T8Q/p1698184282934899

@abdel-h66
Copy link
Contributor

abdel-h66 commented Oct 24, 2023

Also the chosen proposal in lacking the part where we need to show the Amount field in the form.

The amount field and amount entered should be visible in the confirmation page.

The expected results clearly state the presence of both the field and the amount in the CTA

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Oct 25, 2023
@cooldev900
Copy link
Contributor

PR raised. Please check @ArekChr

@cooldev900
Copy link
Contributor

@bondydaa @joekaufmanexpensify
I didn't get a job offer yet. Should I wait?

@cooldev900 cooldev900 mentioned this issue Oct 26, 2023
59 tasks
@melvin-bot melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 26, 2023
@cooldev900
Copy link
Contributor

@ArekChr
I signed all commits and create a new PR.

@ArekChr
Copy link
Contributor

ArekChr commented Oct 27, 2023

@ikevin127, Thanks for pointing this out and for the Slack discussion link. I've already chosen @cooldev900's proposal earlier, but I see now that I might have missed a potential regression you caught. I'll pay close attention to this during the code review and also when reviewing the next proposals, Thanks and apologise for the inattention.

@ikevin127
Copy link
Contributor

@ArekChr Sorry for the way I approached this, I was a bit to harsh.

I wasn't aware of some of the unwritten rules when it comes to proposals and the way they are selected by C+, as somebody mentioned in the Slack discussion:

If 2nd proposal identified important thing like regressions which wouldn't have been easily caught even in PR review, go with that one. Otherwise always pick up 1st proposal.
It's fine to apply 2nd proposal's additional changes in PR where 1st proposal is accepted.

I had a similar situation with this one in another issue, with me being the first to propose and the second proposal had minor adjustments compared to mine and the 2nd got selected, hence my confusion in this case.

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Nov 2, 2023
@melvin-bot melvin-bot bot changed the title [$500] Manual request - Amount is not shown in the confirmation page after adding a receipt [HOLD for payment 2023-11-09] [$500] Manual request - Amount is not shown in the confirmation page after adding a receipt Nov 2, 2023
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Nov 2, 2023
Copy link

melvin-bot bot commented Nov 2, 2023

Reviewing label has been removed, please complete the "BugZero Checklist".

Copy link

melvin-bot bot commented Nov 2, 2023

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.94-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2023-11-09. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

  • External issue reporter
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

Copy link

melvin-bot bot commented Nov 2, 2023

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

  • [@bondydaa] The PR that introduced the bug has been identified. Link to the PR: No bug was identified.
  • [@bondydaa] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
  • [@bondydaa] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
  • [@cooldev900 / @ArekChr] Determine if we should create a regression test for this bug.
  • [@cooldev900 / @ArekChr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
  • [@joekaufmanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/334633

@joekaufmanexpensify
Copy link
Contributor

@ArekChr could you take care of BZ checklist this week so we can prep to issue payments? TY!

@ArekChr
Copy link
Contributor

ArekChr commented Nov 7, 2023

  • Link to the PR: No bug was identified.
  • Link to comment: n/a
  • Link to discussion: n/a
  • Determine if we should create a regression test for this bug: Yes, we can regression test here:

Regression Test Proposal

  1. Go to any chat.
  2. Request money using manual flow.
  3. Enter the amount and proceed to a confirmation page.
  4. Click the 3-dot menu > Add receipt.
  5. Select any receipt.
  6. Verify that the amount field entered should be visible on the confirmation page.

Do we agree 👍 or 👎

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Nov 8, 2023
@joekaufmanexpensify
Copy link
Contributor

BZ checklist complete!

@joekaufmanexpensify
Copy link
Contributor

All set to issue payment. Since @ArekChr is paid separately, the only payment due here is $500 to @cooldev900, paid via Upwork. Will pay this tomorrow!

@joekaufmanexpensify
Copy link
Contributor

@cooldev900 offer sent for $500!

@cooldev900
Copy link
Contributor

@joekaufmanexpensify
I accepted an offer. Thank you.

@joekaufmanexpensify
Copy link
Contributor

@cooldev900 $500 sent and contract ended!

@joekaufmanexpensify
Copy link
Contributor

All set. Thanks everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests

8 participants