[Awaiting C+ payment] [HOLD for payment 2023-07-24] [$1000] Phone number contact in task assignee is displayed with @expensify.sms

[kavimuru]

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

---

Action Performed:

1. Open the app
2. Click plus and click on assign task
3. Enter any title and click on next
4. Click on Assignee
5. Search for user with phone number as default contact method and select it
6. Observe that on new task page under assignee, the phone number contact is displayed with @expensify.sms in the end

Expected Result:

App should display phone number contact below assignee in new format as it displays in assignee search

Actual Result:

App displays phone number contact in old format and with @expensify.sms behind it below assignee

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.35-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

old.format.for.phone.number.assignee.mp4

Recording.5270.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688140198815779

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010ead72a986dba400
• Upwork Job ID: 1676235816963620864
• Last Price Increase: 2023-07-04

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[c3024]

Proposal

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

Subtext in assignee shows @expensify.sms at the end

What is the root cause of that problem?

The text displayed is the description for assignee MenuItem in NewTaskPage which is subtitle that comes like @expensify.sms for BE.

https://github.com/Expensify/App/blob/c0ece67e0edcb725d8f72cf57cd40d98854c552c/src/pages/tasks/NewTaskPage.js#L161C1-L164C121

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

We can sanitize it with LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) to get only phone number. We can do the same for shareDestination in the next MenuItem as well.
What alternative solutions did you explore? (Optional)

[namhihi237]

Proposal

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

What is the root cause of that problem?

Show the assigned task here we are getting the original:

App/src/components/ReportActionItem/TaskPreview.js

Lines 61 to 62 in c0ece67

	const taskAssignee = props.taskReport.managerEmail || props.action.childManagerEmail;
	const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;

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

So we need to reformat like:

const taskAssignee = LocalePhoneNumber.formatPhoneNumber(props.taskReport.managerEmail || props.action.childManagerEmail);

Result:

What alternative solutions did you explore? (Optional)

N/A

[chiragxarora]

Proposal

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

Phone number contact in task assignee is displayed with @expensify.sms

What is the root cause of that problem?

Assignee object on confirm task page has the following structure:

{
  displayName: ......, // display name of the user
  icons: [
    { source, type, name }
  ],
  subtitle: .....,  // login of the user
}

Root cause of the issue is that when on confirm task page we render the menu items for different fields like title, description, assignee, share somewhere then for assignee menu item we are directly sending the subtitle field without applying any filter.

App/src/pages/tasks/NewTaskPage.js

Lines 161 to 168 in c0ece67

	<MenuItem
	label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
	title={assignee.displayName || ''}
	description={assignee.displayName ? assignee.subtitle : props.translate('newTaskPage.assignee')}
	icon={assignee.icons}
	onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
	shouldShowRightIcon
	/>

Problem with this is that this works fine for the user with email type login but when the user has phone type login, subtitle field will have our sms domain at the end at subtitle will end with @expensify.sms. And in case of phone login, we are removing the sms domain in our app which we didn't do here

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

We have a method specifically created in our common library expensify-common which goes by the name removeSMSDomain defined here

https://github.com/Expensify/expensify-common/blob/52e551cae863ca0a4ec7be8b1ae9b0dee90632e7/lib/str.js#L956-L958

And we have used this method all over our app and we shall use this here too.

We need a conditional statement to distinguish between email login and phone login and that we can do by comparing
displayName and subtitle like this

(assignee.displayName === assignee.subtitle ? assignee.subtitle : Str.removeSMSDomain(assignee.subtitle))

Why this works?

Points to note: the method only edits the string if it contains sms domain that means it doesn't affect the emails

Cases:

1. user has email login

Whatever above condition returns, we will have no issue because in case it returns true, we display subtitle which is his email, and if its false, we apply remove domain method but it doesnt affect emails.

2. user has phone login (main case)

His subtitle field will be of the format +(country-code)(mobile)@expensify.sms

Here user's display name will always be different from subtitle because if user has not set display name, then display name would be of the form 0(mobile) and if user has set his display name then he can never set his display name equal to the subtitle field because display name does not allow +, @, .

So in this caase, our condition will always be false and we will always run the removeSMSDomain method which will remove @expensify.sms from the subtitle.

So compiling everything explained above, essential changes in our NewTaskPage would look like

<MenuItem
    label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
    title={assignee.displayName || ''}
    description={assignee.displayName ? (assignee.displayName === assignee.subtitle ? assignee.subtitle : Str.removeSMSDomain(assignee.subtitle)) : props.translate('newTaskPage.assignee')}
    icon={assignee.icons}
    onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
    shouldShowRightIcon
/>

At the time of submission, No other proposal has given this solution

Results

bandicam.2023-07-02.13-47-18-103.mp4

What alternative solutions did you explore? (Optional)

We could also use formatPhoneNumber but that method will cause inconsistency since it will turn the description field into display name and ideally title should have display name and subtitle should have login. Note that we have used formatPhoneNumber for creating default display name for the users who have not set their display name like this
012345 56789

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[trjExpensify]

Yup, this is reproducible. As we do elsewhere throughout the app, we shouldn't be showing the @expensify.sms portion of the phone number login. Let's not reinvent the wheel and extend however we're doing that elsewhere here on the taskReport.

@thienlnam putting this on your radar as well, as it relates to tasks. Going to move it External for the time being.

[melvin-bot]

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

[melvin-bot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.