fix: fallback to localized currency symbol when list symbol is code-like#78157
Conversation
|
All contributors have signed the CLA ✍️ ✅ |
|
I have read the CLA Document and I hereby sign the CLA |
There was a problem hiding this comment.
Pull request overview
This PR improves the currency symbol display in the Create expense amount input by implementing a smart fallback mechanism. When a currency's symbol in CURRENCY_LIST is just the currency code itself (e.g., "TZS"), the system now falls back to using the localized Intl-based currency symbol instead of showing the raw code.
Key changes:
- Added
isCurrencyCodeLikeSymbol()function to detect when a symbol is effectively just the currency code - Added
getPreferredCurrencySymbol()function that chooses between the list symbol and localized symbol - Updated
MoneyRequestAmountInputcomponent to use the new preferred symbol logic
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/libs/CurrencyUtils.ts | Adds helper functions isCurrencyCodeLikeSymbol and getPreferredCurrencySymbol to intelligently select currency symbols |
| src/components/MoneyRequestAmountInput.tsx | Updates the amount input to use getPreferredCurrencySymbol instead of getLocalizedCurrencySymbol for better symbol display |
| tests/unit/CurrencyUtilsTest.ts | Adds comprehensive test coverage for the new currency symbol selection logic |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| [undefined, 'USD', false], | ||
| ['USD', undefined, false], | ||
| [undefined, undefined, false], | ||
| ])('Returns %s for symbol=%s, currencyCode=%s', (symbol, currencyCode, expected) => { |
There was a problem hiding this comment.
The test description template has the parameters in the wrong order. With test.each parameters [symbol, currencyCode, expected], the current template "Returns %s for symbol=%s, currencyCode=%s" will produce misleading output like "Returns true for symbol=USD, currencyCode=USD" (where the first value is actually 'expected', not 'symbol'). The template should be reordered to match the parameter order, such as "symbol=%s, currencyCode=%s returns %s".
| ])('Returns %s for symbol=%s, currencyCode=%s', (symbol, currencyCode, expected) => { | |
| ])('symbol=%s, currencyCode=%s returns %s', (symbol, currencyCode, expected) => { |
| @@ -209,6 +209,35 @@ function sanitizeCurrencyCode(currencyCode: string): string { | |||
| return isValidCurrencyCode(currencyCode) ? currencyCode : CONST.CURRENCY.USD; | |||
| } | |||
|
|
|||
| /** | |||
| * Checks if a "symbol" is effectively just the ISO currency code (e.g. "CLP"). | |||
There was a problem hiding this comment.
The example in the comment uses "CLP" but this is misleading. Looking at the currency list, CLP actually has "Ch$" as its symbol, not "CLP". A more accurate example would be a currency that truly has a code-like symbol, such as "TZS" (Tanzanian Shilling, which has "TZS" as its symbol).
| * Checks if a "symbol" is effectively just the ISO currency code (e.g. "CLP"). | |
| * Checks if a "symbol" is effectively just the ISO currency code (e.g. "TZS"). |
Screenshots🔲 iOS / native20.12.2025_22.36.21_REC.mp4🔲 iOS / Safari20.12.2025_22.37.53_REC.mp4🔲 MacOS / Chrome20.12.2025_22.20.03_REC.mp4🔲 Android / Chrome🔲 Android / native20.12.2025_22.47.42_REC.mp4 |
parasharrajat
left a comment
There was a problem hiding this comment.
Reviewer Checklist
- I have verified the author checklist is complete (all boxes are checked off).
- I verified the correct issue is linked in the
### Fixed Issuessection above - I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the
Testssection - I verified the steps for Staging and/or Production testing are in the
QA stepssection - I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I verified the steps for local testing are in the
- I checked that screenshots or videos are included for tests on all platforms
- I included screenshots or videos for tests on all platforms
- I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
- If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
- I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
toggleReportand notonIconClick). - I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g.
myBool && <MyComponent />. - I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to
src/languages/*files and using the translation method - I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the
Waiting for Copylabel for a copy review on the original GH to get the correct copy. - I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in
STYLE.md) were followed
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
- If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
- I verified that this PR follows the guidelines as stated in the Review Guidelines
- I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarhave been tested & I retested again) - I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
- I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
- If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a
/** comment above it */ - The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to
thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor) - Any internal methods bound to
thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick) - All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
- If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
- If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e.
StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
- If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
- If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases) - If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
- If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
- If the PR modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added
Designlabel so the design team can review the changes.
- If a new page is added, I verified it's using the
ScrollViewcomponent to make it scrollable when more elements are added to the page. - If the
mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps. - I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.
🎀 👀 🎀 C+ reviewed
|
@mountiny Ready for review. |
|
@thedavos Prettier is failing |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
Okey, it should be okey now |
|
|
7a11f5c to
5362fb2
Compare
|
Please don't use force push prefer merge commits. |
Thanks for the note. I used a force-push only to fix an accidentally polluted branch/PR diff. Going forward I’ll avoid force-push and will use merge commits to update the branch. If you’d prefer, I can open a fresh PR from a clean branch and close this one |
Sure, i’ll add unit tests covering |
|
@mountiny Added direct unit tests for |
| numberFormRef.current = newRef; | ||
| }} | ||
| symbol={getLocalizedCurrencySymbol(preferredLocale, currency) ?? ''} | ||
| symbol={getPreferredCurrencySymbol(currency) ?? ''} |
There was a problem hiding this comment.
You need to pass preferredLocale
There was a problem hiding this comment.
Refactor getPreferredCurrencySymbol function to pass that.
There was a problem hiding this comment.
It's done, i’m now passing preferredLocale into getPreferredCurrencySymbol and updated the unit tests accordingly.
|
@thedavos Prettier is failing, can you merge main and run prettier please? |
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
|
hi, prettier done and updated with main |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/mountiny in version: 9.2.90-0 🚀
|
|
🚀 Deployed to production by https://github.com/mountiny in version: 9.2.90-2 🚀
|
Explanation of Change
This PR standardizes the currency prefix shown in the Create expense amount input.
Fixed Issues
$ #75709
PROPOSAL: #75709 (comment)
Tests
5.1. Shows a real symbol when available.
5.2. Falls back to localized currency output when the stored “symbol” is code-like.
Offline tests
N/A
QA Steps
Same as Tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Screen.Recording.2025-12-19.at.1.58.24.PM.mov