[HOLD for payment 2024-09-18][$250] Profile - Phone number login is displayed as @expensify.sms

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.29-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Login with phone number
2. Go to Account settings
3. Take a look at the top of the page

Expected Result:

Phone number should be displayed without suffix @expensify.sms

Actual Result:

Phone number is displayed with suffix @expensify.sms

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833010029599658221
• Upwork Job ID: 1833010029599658221
• Last Price Increase: 2024-09-09
• Automatic offers:
• jjcoffee | Reviewer | 103887462
• dominictb | Contributor | 103887465

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-09-05 14:03:16 UTC.

Proposal

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

Phone number login is displayed as @expensify.sms

What is the root cause of that problem?

We didn't remove sms domain here

App/src/components/AccountSwitcher.tsx

Line 163 in 6760f96

{currentUserPersonalDetails?.login}

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

We need to remove sms domain

                            {Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')}

We might also need to do the same here for the display name too

App/src/components/AccountSwitcher.tsx

Line 146 in 6760f96

{currentUserPersonalDetails?.displayName}

It might be more centralized if we remove sms domains in useCurrentUserPersonalDetails

    const login = accountPersonalDetails?.login;
    const currentUserPersonalDetails: PersonalDetails = useMemo(
        () => ({...accountPersonalDetails, ...(login && {login: Str.removeSMSDomain(login ?? '')}), accountID}),

What alternative solutions did you explore? (Optional)

If we want to format phone number in addition to removing sms domain we can use formatPhoneNumber from useLocalize here

App/src/components/AccountSwitcher.tsx

Line 34 in 6760f96

const {translate} = useLocalize();

    const {translate, formatPhoneNumber} = useLocalize();

                            {formatPhoneNumber(currentUserPersonalDetails?.login ?? '')}

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-09-05 14:09:22 UTC.

Proposal

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

Phone number login is displayed as @expensify.sms

What is the root cause of that problem?

We are not removing the expensify here domain also we are not formatting the phone number as we do in Profile page

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

We can use LocalePhoneNumber.formatPhoneNumber here. we can do something like this

 { LocalePhoneNumber.formatPhoneNumber(currentUserPersonalDetails?.login ?? '')}

Note

We use the same LocalePhoneNumber.formatPhoneNumber in useLocalize() so it's the same approach

What alternative solutions did you explore? (Optional)

Or we can format phone number directly in useCurrentUserPersonalDetails.ts

[FitseTLT]

Updated to add alternative approach

[Nodebrute]

Proposal updated added a note

[dominictb]

Proposal

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

• Phone number is displayed with suffix @expensify.sms

What is the root cause of that problem?

• When implementing AccountSwitcher component, we don't remove @expensify.sms in:
  

  App/src/components/AccountSwitcher.tsx

  Line 51 in 6760f96

  description: personalDetails?.login,

  
  and
  

  App/src/components/AccountSwitcher.tsx

  Line 163 in 6760f96

  {currentUserPersonalDetails?.login}

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

• We need to remove @expensify.sms domain by using Str.removeSMSDomain in:
  

  App/src/components/AccountSwitcher.tsx

  Line 51 in 6760f96

  description: personalDetails?.login,

  
  and
  

  App/src/components/AccountSwitcher.tsx

  Line 163 in 6760f96

  {currentUserPersonalDetails?.login}

• Note: We cannot remove @expensify.sms in useCurrentUserPersonalDetails directly because useCurrentUserPersonalDetails are used in other positions. For example, in:
  

  App/src/components/AccountSwitcher.tsx

  Line 78 in 6760f96

  if (delegateEmail === currentUserPersonalDetails.login) {

  
  and
  

  App/src/components/AccountSwitcher.tsx

  Line 101 in 6760f96

  .filter(({email}) => email !== currentUserPersonalDetails.login)

  
  the delegateEmail can be contained @expensify.sms, so if we remove the @expensify.sms from currentUserPersonalDetails.login, condition delegateEmail === currentUserPersonalDetails.login can be failed.

What alternative solutions did you explore? (Optional)

Result

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021833010029599658221