App: [HOLD for C+ newdot payment] [$500] Web - App crashes when currency in url is changed to invalid currency code

Proposal

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

The app crashes when the currency in the URL is changed to an invalid currency code.

What is the root cause of that problem?

We currently don’t perform a check to verify whether the currency from the route parameters is valid or not. This issue is not limited to the new money request page; it also affects the edit and confirmation money request pages.

Additionally, when the currency code length exceeds 3 characters, the app crashes due to the NumberFormatUtils.formatToParts function used in getLocalizedCurrencySymbol and isCurrencySymbolLTR functions within the CurrencyUtils.js file. The issue arises because we are not handling errors in these functions.

Here are the relevant code sections: https://github.com/Expensify/App/blob/ebcc8d045695871d8189a6335c6cdfeede657deb/src/libs/CurrencyUtils.js#L51-L57 https://github.com/Expensify/App/blob/ebcc8d045695871d8189a6335c6cdfeede657deb/src/libs/CurrencyUtils.js#L75-L83

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

We can find the relevant code here: https://github.com/Expensify/App/blob/4676492705a96d766fd1f0f1d2e2401cfd5bc566/src/pages/iou/steps/MoneyRequestAmountForm.js#L252 https://github.com/Expensify/App/blob/44721d2035642266b43d1bad36b30d7a3c5e239d/src/libs/CurrencyUtils.js#L65-L67 Fortunately, we already have a function for obtaining the currency symbol. If the currency symbol is undefined, it signifies that the currency is invalid. While we could create a custom validation function for currency, I believe it would be more consistent and simpler to add the validation logic for currency to the submit button in the MoneyRequestAmountForm.

isDisabled={!currentAmount.length || parseFloat(currentAmount) < 0.01 || !CurrencyUtils.getCurrencySymbol(currency)}

We can also use a default value when CurrencyUtils.getCurrencySymbol(currency) returns undefined. https://github.com/Expensify/App/blob/ebcc8d045695871d8189a6335c6cdfeede657deb/src/pages/iou/steps/MoneyRequestAmountForm.js#L223

selectedCurrencyCode={CurrencyUtils.getCurrencySymbol(currency) ? 'USD' : currency}

Considering the second issue, we have two options for addressing it within the functions in the CurrencyUtils.js file:

First, we can employ the try/catch syntax. Second, we can utilize a default currency code such as USD.

For example:

currency: !getCurrencySymbol(currencyCode) ? 'USD' : currencyCode,

I would prefer the second option because it’s simpler and more straightforward.

What alternative solutions did you explore? (Optional)

Alternatively, we can include form helper text in our money request form to display the error using the proposed validation logic.

Result: