Format phone numbers in account switcher menu items#86741
Conversation
Wrap the text and description fields in createBaseMenuItem with formatPhoneNumber so that copilot accounts registered with phone numbers show a formatted number instead of the raw login with @expensify.sms. Co-authored-by: Eric Han <eh2077@users.noreply.github.com>
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@MelvinBot Please mark it ready for review |
|
PR has been marked as ready for review! 🚀 |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-04-07.at.9.20.47.PM.movAndroid: mWeb ChromeScreen.Recording.2026-04-07.at.9.13.39.PM.moviOS: HybridAppScreen.Recording.2026-04-07.at.9.18.09.PM.moviOS: mWeb SafariScreen.Recording.2026-04-07.at.9.12.53.PM.mov |
|
@MelvinBot Can you add unit test to cover the change? |
Adds two test cases to LocalePhoneNumberTest covering the @expensify.sms domain scenario used by the AccountSwitcher: a US number formatted locally and a foreign number formatted internationally. Co-authored-by: Eric Han <eh2077@users.noreply.github.com>
|
Added unit tests for the
These test the exact formatting behavior that |
|
@eh2077 is this ready to review? I'm waiting on the checklist |
src/components/AccountSwitcher.tsx
Outdated
| text: personalDetails?.displayName ?? personalDetails?.login ?? '', | ||
| description: Str.removeSMSDomain(personalDetails?.login ?? ''), | ||
| text: formatPhoneNumber(personalDetails?.displayName ?? personalDetails?.login ?? ''), | ||
| description: formatPhoneNumber(personalDetails?.login ?? ''), |
There was a problem hiding this comment.
Reverted — the text line now uses the original expression without formatPhoneNumber.
There was a problem hiding this comment.
@MelvinBot No, only format the text prop with method formatPhoneNumber. Don't change formatting for the description prop.
There was a problem hiding this comment.
Done — text now uses formatPhoneNumber, and description is back to Str.removeSMSDomain.
Display names should not be formatted as phone numbers. Co-authored-by: Eric Han <eh2077@users.noreply.github.com>
|
The only failing check is PR Reviewer Checklist — the reviewer ( All code checks (tests, ESLint, typecheck, prettier, etc.) are passing. |
…or description Co-authored-by: Eric Han <eh2077@users.noreply.github.com>
eh2077
left a comment
There was a problem hiding this comment.
works well.
@Valforte sorry for the delay, checklist is here #86741 (comment), thanks!
|
🚧 @Valforte 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, and Web. Happy testing! 🧪🧪
|
|
✋ 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/Valforte in version: 9.3.55-0 🚀
Bundle Size Analysis (Sentry): |
|
No help site changes required. This PR fixes a display formatting bug — it wraps phone-number display names with I reviewed the relevant help article ( |

Explanation of Change
When a Copilot account is registered with a phone number and has no custom display name set, the backend sets
displayNameequal to the full login (e.g.,+15857527441@expensify.sms). The account switcher popover'screateBaseMenuItemfunction used this raw value directly, causing the@expensify.smssuffix to appear in the menu.This PR wraps both the
textanddescriptionfields increateBaseMenuItemwithformatPhoneNumber(), which strips the@expensify.smssuffix and formats the number for the user's locale. It safely passes through non-phone strings unchanged, so email-based accounts are unaffected.Fixed Issues
$ #86308
PROPOSAL: #86308 (comment)
Tests
+1 585-752-7441) instead of+15857527441@expensify.smsOffline tests
N/A - This is a display-only change that uses data already available locally. No network requests involved.
QA Steps
@expensify.smsand is formatted properlyPR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand 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
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari