search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.36k stars 2.79k forks source link

Split Bill - Incorrect back button functionality doesn't allow to cancel Split Bill in the group #20743

Closed kbecciv closed 1 year ago

kbecciv commented 1 year ago

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

Action Performed:

  1. Login to NewDot
  2. Create a group with 2+ people
  3. Use the FAB button to create a split within this new group
  4. Input amount and click next
  5. Try to exit Split Bill flow by clicking back buttons

Expected Result:

User can exit Split Bill flow

Actual Result:

User is blocked within Split Bill flow

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.27.4

Reproducible in staging?: yes

Reproducible in production?:yes

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

Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/93399543/7a66adae-f046-4071-a108-14cfbb4216eb

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Bug0 Triage Checklist (Main S/O)

moezh commented 1 year ago

Proposal

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

The problem we are aiming to address in this issue is that when users attempt to exit the split bill flow from the money request confirm page by clicking the back button, they find themselves unable to leave the split bill flow.

What is the root cause of that problem?

The root cause of this issue lies in the code within MoneyRequestModal.js. Specifically, the following code:

const navigateBack = isEditingAmountAfterConfirm ? () => navigateToStep(moneyRequestStepIndex) : navigateToPreviousStep;

prevents users from exiting the split bill flow if they click the back button multiple times from the confirm page.

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

To resolve this problem, I recommend making the following changes in MoneyRequestModal.js:

if (currentStepIndex === _.indexOf(steps, Steps.MoneyRequestConfirm)) {
   Navigation.dismissModal();
}

By including this code snippet within the navigateToPreviousStep function, we enable users to successfully exit the split bill flow from the confirm page by clicking the back button.

What alternative solutions did you explore? (Optional)

None

https://github.com/Expensify/App/assets/2527288/cf5e9924-cd08-4dff-83a0-3c58dbcdebdf

melvin-bot[bot] commented 1 year ago

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

ahmedGaber93 commented 1 year ago

Proposal

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

Split Bill - Incorrect back button functionality doesn't allow to cancel Split Bill in the group

What is the root cause of that problem?

Here in navigateToPreviousStep https://github.com/Expensify/App/blob/20f6ae7dab6cee8c537e491e64ece59163e209af/src/pages/iou/MoneyRequestModal.js#L207-L219

we call 

  setPreviousStepIndex(currentStepIndex); 
  setCurrentStepIndex(currentStepIndex - 1);

so if we in step 1 and user click back, the result will be current = 0; prev = 1 (note prev is larger than current);

  previousStepIndex = 1; 
  setCurrentStepIndex = 0;

This is cause infinite loop, the result should be current = 0; prev = -1;

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

The navigateToPreviousStep should be: if click back when step = 0; close modal; if click back when step = 1; currentStep = 0; and prevStep = -1; if click back when step = 2; currentStep = 1; and prevStep = 0; so the fix should be

  setPreviousStepIndex(currentStepIndex);
  setPreviousStepIndex(currentStepIndex - 2);  // <<<<<<<<<<<<<<<<<<<<<
  setCurrentStepIndex(currentStepIndex - 1);
result close. https://github.com/Expensify/App/assets/41129870/1cba0587-2f92-4e4d-991f-6582f088ddda
result go back then close. https://github.com/Expensify/App/assets/41129870/4789fc7d-304b-4a8c-8a4e-5c7541825ca1
result edit amount then go back then close. https://github.com/Expensify/App/assets/41129870/709a0581-31d0-4327-8ce7-aaa2760c0226

What alternative solutions did you explore? (Optional)

bernhardoj commented 1 year ago

We are refactoring money request page here and it's a dupe of https://github.com/Expensify/App/issues/17637

melvin-bot[bot] commented 1 year ago

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

johncschuster commented 1 year ago

@bernhardoj Thanks for calling out that this is a duplicate! I didn't think to use the keywords, "infinite loop" to locate a previously created issue.

Would you say we can close this issue then?

bernhardoj commented 1 year ago

Yes, I think we can close this one

johncschuster commented 1 year ago

Thanks! Doing it.