[$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs #32739

lanitochka17 · 2023-12-08T18:40:23Z

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.10-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:

Login to ND Expensify
Tap FAB button
Tap Request money
Select Manual tab
Select a currency and enter any amount
Tap Next
Tap Back
Switch between tabs Scan or Distance and return to Manual tab

Expected Result:

The amount previously entered is remembered and displayed on the BNP

Actual Result:

If user proceeds until attendee selector and then returns back, switching between tabs make the amount disappear

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6306099_1702060371938.1000024236.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~017941ed9191037a56
Upwork Job ID: 1733194841222483968
Last Price Increase: 2023-12-08
Automatic offers:

c3024 | Reviewer | 28037175
FitseTLT | Contributor | 28037178

melvin-bot · 2023-12-08T18:40:27Z

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

melvin-bot · 2023-12-08T18:40:27Z

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

melvin-bot · 2023-12-08T18:40:29Z

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 · 2023-12-08T18:40:33Z

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

FitseTLT · 2023-12-08T18:55:22Z

Proposal

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

Request money amount disappears if tap Next&Back and then switching between tabs

What is the root cause of that problem?

currentAmount state is being reset to iou.amount here as we navigate to the receipt selector page because iou.amount is reset (to 0) always when we change between tabs

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 125 to 128 in 269e866

    
               initializeAmount(amount); 
        
               // we want to update the state only when the amount is changed 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, [amount]);

But the reason this is not happening before the user's first click of Next is that when a user inputs an amount it will only set the currentAmount state in MoneyRequestAmountForm not iou.amount and iou.amount is 0 so navigating between tabs will not reset the currentAmount state as there will be no change in iou.amount on navigating between tabs the iou.amount is reset to 0 but iou.amount was not changed it was already 0.

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

We shouldn't reset currentAmount state on iou.amount change if iou.amount is 0 as that means we are having a reset on the iou.amount and we need to preserve currentAmount state for MoneyRequestAmountForm (same as it is preserving between switch of tabs before the first user clicks of Next )

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 125 to 126 in 269e866

    
           initializeAmount(amount); 
        
           // we want to update the state only when the amount is changed

if(amount !== 0){
initializeAmount(amount);
}

What alternative solutions did you explore? (Optional)

If we don't have any special reason we can leave updating currentAmount state to iou.amount value at all. Because currentAmount is a state of the user's amount input as long as the MoneyRequestAmountForm is rendered and preserving that state will be better user experience as the user will always have his draft amount value present always.

yh-0218 · 2023-12-08T19:11:30Z

Proposal

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

Request money amount disappears if tap Next&Back and then switching between tabs

What is the root cause of that problem?

When we enter first tap(manual), we reset iou.

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

We need to give amount when reset

App/src/pages/iou/MoneyRequestSelectorPage.js

Line 87 in 0a8ad47

resetMoneyRequestInfo();

What alternative solutions did you explore? (Optional)

Screen.Recording.2023-12-08.at.9.13.36.PM.mov

BhuvaneshPatil · 2023-12-08T19:48:45Z

Proposal

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

Request amount is changing whenever we go to next step and come back again

What is the root cause of that problem?

We are resetting the transaction details here -

App/src/libs/actions/IOU.js

Lines 113 to 121 in 138e6a2

    
           Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${newTransactionID}`, { 
        
               amount: 0, 
        
               comment, 
        
               created, 
        
               currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD), 
        
               iouRequestType, 
        
               reportID, 
        
               transactionID: newTransactionID, 
        
           });

Whenever we change the tab this method is being called. There are two instances -

App/src/pages/iou/request/IOURequestStartPage.js

Line 85 in d4fb27a

    
           IOU.startMoneyRequest_temporaryForRefactor(reportID, transactionRequestType.current);

App/src/pages/iou/request/IOURequestStartPage.js

Line 105 in d4fb27a

IOU.startMoneyRequest_temporaryForRefactor(reportID, newIouType);

This causes the amount to set zero.
But the question arises that why it is not resetting to zero when we change the tab without going next and coming back.

Screen.Recording.2023-12-09.at.1.11.27.AM.mov

The reason behind that is the MoneyRequestAmountForm component isn't unmounted, and thus state is preserved.

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

We shall pass amount to startMoneyRequest_temporaryForRefactor(), the default value will be zero.
Whenever we call this method we pass the current amount in transaction.

...
IOU.startMoneyRequest_temporaryForRefactor(reportID, transactionRequestType.current, TransactionUtils.getAmount(transaction));
...

and we use the amount we received as parameter to set the amount.

    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${newTransactionID}`, {
        amount: currentAmount,
        comment,
        created,
        currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD),
        iouRequestType,
        reportID,
        transactionID: newTransactionID,
    });

Screen.Recording.2023-12-09.at.1.17.52.AM.mov

What alternative solutions did you explore? (Optional)

AmjedNazzal · 2023-12-08T20:07:49Z

Proposal

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

Request - Request money amount disappears if tap Next&Back and then switching between tabs

What is the root cause of that problem?

To understand the cause of this, let's take a look at this section of the code from MoneyRequestAmountForm:

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 112 to 128 in d4fb27a

    
           const initializeAmount = useCallback((newAmount) => { 
        
               const frontendAmount = newAmount ? CurrencyUtils.convertToFrontendAmount(newAmount).toString() : ''; 
        
               setCurrentAmount(frontendAmount); 
        
               setSelection({ 
        
                   start: frontendAmount.length, 
        
                   end: frontendAmount.length, 
        
               }); 
        
           }, []); 
        
           useEffect(() => { 
        
               if (!currency || !_.isNumber(amount)) { 
        
                   return; 
        
               } 
        
               initializeAmount(amount); 
        
               // we want to update the state only when the amount is changed 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, [amount]);

So what the above code is doing is simple, if there is newAmount, which is retrieved from the onyx store, it will set the currentAmount to that amount, else it will reset it to 0.

Now the problem is that when we proceed to the next step, the value of the amount variable will change since we are updating the amount in the onyx store, also as we navigate to other tabs after that, we are resetting that onyx store amount to initialise the other tabs, what happens because of that is that the useEffect will kick in as the amount has changed, resulting in currentAmount being reset the same as if we were to unmount and remount the component.

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

Since the currentAmount will be reset to 0 anyway when we unmount and remount the component, I don't see the point in calling setCurrentAmount just to pass it nothing, so we can add a check to not do that unless frontendAmount does hold a value

const initializeAmount = useCallback((newAmount) => {
    const frontendAmount = newAmount ? CurrencyUtils.convertToFrontendAmount(newAmount).toString() : '';
    if(frontendAmount){
        setCurrentAmount(frontendAmount);
        setSelection({
            start: frontendAmount.length,
            end: frontendAmount.length,
        });
    }

Result

Screen.Recording.2023-12-08.at.11.01.26.PM.mov

c3024 · 2023-12-11T14:57:41Z

Proposal by @FitseTLT identifies the root cause correctly and the solution suggested works well.

🎀 👀 🎀 C+ Reviewed

melvin-bot · 2023-12-11T14:57:48Z

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

melvin-bot · 2023-12-11T18:31:48Z

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

Offer link
Upwork job

melvin-bot · 2023-12-11T18:31:52Z

📣 @FitseTLT 🎉 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 📖

0xmiros · 2023-12-13T16:32:51Z

As per new expected behavior, I think we can close this.

c3024 · 2023-12-14T12:44:06Z

Yes, the expected behavior changed since this proposal was approved. Now, the suggested changes are not required. The issue may be closed.

@kadiealexander @stitesExpensify

Since, the issue proceeded to the point of making a PR, some compensation might be due.

FitseTLT · 2023-12-18T12:18:51Z

@stitesExpensify U can close this issue; from my side I am OK ❤️ with no compensation 👍

stitesExpensify · 2023-12-18T21:03:33Z

Great, thanks @FitseTLT !

c3024 · 2023-12-19T07:20:30Z

Please close the PR @FitseTLT .

lanitochka17 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 Dec 8, 2023

melvin-bot bot assigned kadiealexander Dec 8, 2023

melvin-bot bot changed the title ~~Request - Request money amount disappears if tap Next&Back and then switching between tabs~~ [$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs Dec 8, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 8, 2023

melvin-bot bot assigned c3024 Dec 8, 2023

melvin-bot bot added the Overdue label Dec 11, 2023

melvin-bot bot removed the Overdue label Dec 11, 2023

melvin-bot bot assigned stitesExpensify Dec 11, 2023

stitesExpensify assigned FitseTLT Dec 11, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 11, 2023

FitseTLT mentioned this issue Dec 13, 2023

Fix reset of money request amount on tab change issue #32987

Closed

47 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Dec 13, 2023

stitesExpensify closed this as completed Dec 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs #32739

[$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs #32739

lanitochka17 commented Dec 8, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Dec 8, 2023

melvin-bot bot commented Dec 8, 2023

melvin-bot bot commented Dec 8, 2023

melvin-bot bot commented Dec 8, 2023

FitseTLT commented Dec 8, 2023 •

edited

Loading

yh-0218 commented Dec 8, 2023 •

edited

Loading

BhuvaneshPatil commented Dec 8, 2023

AmjedNazzal commented Dec 8, 2023

c3024 commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

0xmiros commented Dec 13, 2023

c3024 commented Dec 14, 2023

FitseTLT commented Dec 18, 2023

stitesExpensify commented Dec 18, 2023

c3024 commented Dec 19, 2023

[$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs #32739

[$500] Request - Request money amount disappears if tap Next&Back and then switching between tabs #32739

Comments

lanitochka17 commented Dec 8, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Dec 8, 2023

melvin-bot bot commented Dec 8, 2023

melvin-bot bot commented Dec 8, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Dec 8, 2023

FitseTLT commented Dec 8, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

yh-0218 commented Dec 8, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

BhuvaneshPatil commented Dec 8, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

AmjedNazzal commented Dec 8, 2023

Proposal

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

What is the root cause of that problem?

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

Result

c3024 commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

melvin-bot bot commented Dec 11, 2023

0xmiros commented Dec 13, 2023

c3024 commented Dec 14, 2023

FitseTLT commented Dec 18, 2023

stitesExpensify commented Dec 18, 2023

c3024 commented Dec 19, 2023

lanitochka17 commented Dec 8, 2023 •

edited by melvin-bot bot

Loading

FitseTLT commented Dec 8, 2023 •

edited

Loading

yh-0218 commented Dec 8, 2023 •

edited

Loading