Fix: Unresponsive Currency Change In Workspace Travel Booking

by SLV Team 62 views
Workspace: Changing the Workspace Default Currency is Unresponsive in Book Travel Flow

Hey guys! We've got a bit of a snag in the Expensify app that we need to iron out. It looks like changing the workspace's default currency during the book travel flow isn't working as it should. Let's dive into the details and see what's up!

Discussion Category: Expensify, App

If you're looking to contribute, don't forget to check out the contributing guidelines and email contributors@expensify.com to join our Slack channel. We'd love to have you on board!

Version Number: 9.2.37-1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Regression Test Link: BrowserStack Test Run

Affected Tester: applausetester+nuewpa@applause.expensifail.com

Issue Reported By: Applause Internal Team

Devices Used: iPhone 13 (iOS 18.7.1 & Safari), Samsung Galaxy A52 (Android 14), Windows 11 (Chrome)

App Component: Workspace Settings

Action Performed:

Alright, here’s how we stumbled upon this issue. Follow these steps to reproduce it:

Preconditions: Make sure you're signed up for a new account in NewDot Staging using an expensifail account.

Steps:

  1. Tap on that FAB (Floating Action Button).
  2. Hit "Book Travel".
  3. Again, tap "Book Travel" in the Right-Hand Navigation (RHN).
  4. Keep an eye out for the upgrade modal – it should pop up.
  5. Tap on "Upgrade".
  6. You should now see the workspace confirmation page.
  7. Now, here’s where things get tricky: Click on "default currency" to try and change the currency.

Expected Result:

Ideally, clicking on "default currency" should be responsive, and you should be able to change the currency without any hiccups. You know, smooth sailing and all that!

Actual Result:

Unfortunately, clicking on "default currency" does absolutely nothing. It's as unresponsive as a sleepy cat on a Monday morning. No currency changing for you!

Workaround:

Sadly, no workaround has been discovered yet. We're all scratching our heads on this one.

Platforms:

  • [x] Android: App
  • [x] Android: mWeb Chrome
  • [x] iOS: App
  • [x] iOS: mWeb Safari
  • [x] iOS: mWeb Chrome
  • [x] Windows: Chrome
  • [x] MacOS: Chrome / Safari
  • [ ] MacOS: Desktop

Screenshots/Videos

Video Proof

View all open jobs on GitHub

Digging Deeper into the Currency Change Issue

So, let's break down why this unresponsive currency change is a real pain. Imagine you're a user setting up your workspace for the first time. You're all excited to get your travel booking sorted, but then you hit a wall when you can't even set the right currency. It's like trying to bake a cake without being able to measure your ingredients – total chaos!

First Impressions Matter: For new users, this is a pretty bad first impression. It makes the app seem buggy and unreliable right off the bat. We want users to feel confident and in control from the moment they sign up, and this kind of issue undermines that trust.

Upgrading Woes: The problem occurs right after the upgrade modal, which means users who are paying for the service are immediately running into a snag. This is especially frustrating since they've just committed to the platform.

Multiple Platforms Affected: As you can see from the platform list, this isn't just a problem on one specific device or browser. It's happening across Android, iOS, Windows, and MacOS, which means it's a widespread issue that needs immediate attention.

Impact on Travel Booking: Obviously, if you can't set the right currency, you can't accurately book travel. This effectively blocks users from using a key feature of the app, which is a major issue.

Possible Causes and Troubleshooting Steps

Okay, so we know what the problem is and why it's important to fix. Now, let's brainstorm some possible causes and troubleshooting steps:

1. API Endpoint Issues:

  • The Problem: The most likely culprit is that the API endpoint responsible for updating the default currency is either down, returning an error, or not being called correctly.
  • Troubleshooting:
    • Check the server logs to see if there are any errors related to the currency update endpoint.
    • Use debugging tools to inspect the network requests and responses when clicking on the "default currency" button. Make sure the correct data is being sent and that the server is returning a success response.
    • Try manually hitting the API endpoint with a tool like Postman to see if it's working at all.

2. JavaScript Errors:

  • The Problem: There might be a JavaScript error on the page that's preventing the currency update function from being called.
  • Troubleshooting:
    • Open the browser's developer console and look for any JavaScript errors when clicking on the "default currency" button.
    • Use a debugger to step through the JavaScript code and see if any exceptions are being thrown.

3. State Management Issues:

  • The Problem: The app might not be properly updating its internal state when the currency is changed, which could lead to the UI not reflecting the change.
  • Troubleshooting:
    • Check the state management code (e.g., Redux, MobX, or React Context) to see if the currency value is being updated correctly.
    • Use debugging tools to inspect the app's state and see if the currency value is changing when you expect it to.

4. UI Rendering Problems:

  • The Problem: The UI might not be re-rendering after the currency is updated in the state, which could make it seem like the change isn't happening.
  • Troubleshooting:
    • Make sure the UI components that display the currency are properly connected to the app's state and are re-rendering when the state changes.
    • Try manually forcing a re-render of the UI to see if that fixes the issue.

5. Race Conditions:

  • The Problem: A race condition could be occurring if multiple asynchronous operations are trying to update the currency at the same time.
  • Troubleshooting:
    • Use debugging tools to inspect the order in which the asynchronous operations are being executed.
    • Try using synchronization primitives (e.g., mutexes or locks) to prevent race conditions.

Next Steps and Getting This Fixed

Okay, we've identified the problem, looked at potential causes, and brainstormed some troubleshooting steps. Now, let's talk about what needs to happen next to get this fixed ASAP.

1. Assign a Developer:

  • The first step is to assign a developer to investigate this issue. Ideally, this should be someone who is familiar with the workspace settings component and the currency update API.

2. Reproduce the Issue:

  • The developer needs to be able to reproduce the issue consistently. This will allow them to effectively debug the code and identify the root cause.

3. Debug and Identify the Root Cause:

  • Using the troubleshooting steps outlined above, the developer should dive into the code and identify the exact reason why the currency change is not working.

4. Implement a Fix:

  • Once the root cause is identified, the developer needs to implement a fix. This might involve updating the API endpoint, fixing a JavaScript error, or modifying the state management code.

5. Test Thoroughly:

  • After implementing the fix, it's crucial to test it thoroughly on all affected platforms (Android, iOS, Windows, MacOS). This will ensure that the issue is resolved and that no new issues have been introduced.

6. Deploy the Fix:

  • Once the fix has been thoroughly tested, it can be deployed to the staging environment for further testing.

7. Monitor the Fix:

  • After deploying the fix to production, it's important to monitor the app to make sure the issue is resolved and that no new issues are arising.

Let's get this fixed quickly so our users can get back to booking their travel without any currency headaches!