Expensify Card: Back Button Bug After Deactivation

by Admin 51 views
Expensify Card: Back Button Bug After Deactivation

Introduction

Hey guys! We've got a quirky issue to dive into with the Expensify card. After deactivating a card, the back button on the success page isn't behaving as expected. Instead of navigating back to the card details page, it's leading to a "not here" page. Let's break down the details, steps to reproduce, and the impact across different platforms.

Issue Overview

The core problem: After a user deactivates their Expensify card and sees the success page, clicking the back button in the RHP (right-hand pane) incorrectly navigates to a "not here" page. Ideally, it should return to the card details page. This unexpected behavior can be confusing and disruptive for users managing their cards.

Version: 9.2.58-2

Reproducible: Yes, in both staging and production environments.

Reported by: Applause Internal Team

Affected Component: User Settings

Steps to Reproduce

To replicate this issue, follow these steps:

  1. Precondition: Ensure you are logged in with an Expensifail account, have a physical card assigned, private details are filled in (Account > Profile), and the date of birth indicates the user is over 18.
  2. Navigate to staging: Go to staging.new.expensify.com.
  3. Access workspace chat: Go to a workspace chat.
  4. Add shipping details: Click "Add shipping details".
  5. Confirm details: Click "Confirm".
  6. Enter magic code: Input the magic code.
  7. Close RHP: After the Verify button changes from a spinner back to Verify, close the RHP.
  8. Go to Wallet: Navigate to Account > Wallet.
  9. Select Expensify Card: Click the "Expensify Card" card (available by default for Expensifail accounts).
  10. Report card issue: Click "Report card loss or damaged".
  11. Choose a reason: Select any reason and click "Next".
  12. Deactivate card: Click "Deactivate card".
  13. Enter magic code: Input the magic code.
  14. Click back button: After the Success page opens, click the RHP back button.

Expected vs. Actual Result

Expected Result: The RHP back button on the Success page should navigate back to the card details page.

Actual Result: The RHP back button on the Success page after deactivating the card opens a "not here" page. This is the crucial bug we're addressing.

Impact and Platforms

This issue has been observed across a wide range of platforms, indicating it's not specific to a single environment. The affected platforms include:

  • Android: App and mWeb Chrome
  • iOS: App, mWeb Safari, and mWeb Chrome
  • Windows: Chrome
  • MacOS: Chrome/Safari and Desktop

Technical Details and Context

Understanding the underlying technical aspects can help in pinpointing the root cause. The issue seems to stem from how the navigation stack is managed within the RHP after the card deactivation process. When the user clicks the back button on the success page, the system is failing to correctly identify the previous page in the stack, leading to the "not here" page.

The fact that this occurs consistently across different browsers and operating systems suggests that the problem is likely within the core JavaScript logic or the routing mechanism of the Expensify application, rather than a browser-specific quirk.

Potential Causes and Debugging Strategies

To effectively debug this issue, consider the following potential causes and strategies:

  1. Incorrect Navigation Stack Management:

    • Check the RHP's navigation stack implementation. Ensure that the card details page is correctly added to the stack before the deactivation process begins.
    • Verify that the success page correctly removes or updates the navigation stack. The back button's functionality depends on the accuracy of this stack.

  2. Asynchronous Operations and Race Conditions:

    • Review the asynchronous operations involved in the card deactivation process. Ensure that all operations complete in the correct order, especially those that modify the navigation stack.
    • Look for potential race conditions. If multiple operations are trying to update the navigation stack simultaneously, it could lead to inconsistencies.

  3. Event Handling and Back Button Logic:

    • Examine the event handling logic for the back button. Ensure that the correct event handler is being triggered and that it's correctly interpreting the navigation stack.
    • Check for any custom back button implementations. If a custom implementation exists, verify that it's functioning correctly in all scenarios.

  4. Routing Configuration:

    • Review the application's routing configuration. Ensure that the routes for the card details page and the success page are correctly defined.
    • Verify that the back button is correctly referencing these routes. An incorrect route reference could lead to the "not here" page.

Suggested Fixes

Based on the potential causes, here are some suggested fixes:

  1. Ensure Correct Navigation Stack Management:

    • Before navigating to the deactivation flow, explicitly add the card details page to the navigation stack.
    • After successful deactivation, ensure the success page either replaces itself with the card details page or correctly updates the stack so the back button leads to the card details page.

  2. Synchronize Asynchronous Operations:

    • Use Promises, async/await, or other synchronization mechanisms to ensure that asynchronous operations related to navigation and state updates complete in the correct order.
    • Implement proper error handling to catch and log any errors that might occur during these operations.

  3. Validate Back Button Logic:

    • Double-check the event handler for the back button to ensure it correctly reads the navigation stack and navigates to the appropriate page.
    • Consider adding logging statements to track the state of the navigation stack when the back button is clicked.

  4. Review and Correct Routing Configuration:

    • Verify that the routes for the card details page and the success page are correctly defined and that the back button correctly references these routes.
    • Use a consistent routing strategy throughout the application to avoid confusion and errors.

Workaround

Currently, there is no known workaround for this issue. Users encountering this problem will need to manually navigate back to the wallet and then to the card details page.

Conclusion

The Expensify card back button issue is a minor but impactful bug that affects user experience across various platforms. By understanding the steps to reproduce, potential causes, and suggested fixes, we can work towards a resolution that ensures a smoother and more intuitive user experience. Keep an eye on this space for updates, and feel free to contribute your insights if you have any further information.