[$500] Right clicking email address shows pop up that says Copy URL to clipboard

[mvtglobally]

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. Right click an email address in NewDot

Expected Result:

Pop up to say Copy email to clipboard

Actual Result:

Pop up says Copy URL to clipboard.
When you copy and paste, it shows mailto:testemail@gmail.com. We should only copy the email address and not include mailto:

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Upwork job link: https://www.upwork.com/jobs/~01f207936302328d06
Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1646102764234269

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @madmax330 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mateusbra]

PROPOSAL

(if external)

1. First we have to add translations to en.js and es.js:

//en.js
copyEmailToClipboard: 'Copy e-mail to clipboard',
//es.js
copyEmailToClipboard: 'Copiar e-mail al portapapeles',

2. We should create a new action within ContextMenuActions.js:
   

   App/src/pages/home/report/ContextMenu/ContextMenuActions.js

   Lines 29 to 38 in 2837a6a

   	{
   	textTranslateKey: 'reportActionContextMenu.copyURLToClipboard',
   	icon: Expensicons.Clipboard,
   	successTextTranslateKey: 'reportActionContextMenu.copied',
   	successIcon: Expensicons.Checkmark,
   	shouldShow: type => type === CONTEXT_MENU_TYPES.LINK,
   	onPress: (closePopover, {selection}) => {
   	Clipboard.setString(selection);
   	hideContextMenu(true, ReportActionComposeFocusManager.focus);
   	},

   
   add to line 39 removing mailto::

    {
        textTranslateKey:'reportActionContextMenu.copyEmailToClipboard',
        icon: Expensicons.Clipboard,
        successTextTranslateKey: 'reportActionContextMenu.copied',
        successIcon: Expensicons.Checkmark,
        shouldShow: type => type === CONTEXT_MENU_TYPES.EMAIL,
        onPress: (closePopover, {selection}) => {
            Clipboard.setString(selection.replace("mailto:",""));
            hideContextMenu(true, ReportActionComposeFocusManager.focus);
        },
    },

and create e-mail type here:

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 22 to 25 in 2837a6a

	const CONTEXT_MENU_TYPES = {
	LINK: 'LINK',
	REPORT_ACTION: 'REPORT_ACTION',
	};

add:
EMAIL: 'EMAIL',
3. As we only have the fileName prop with the URL/email value, we should create another prop doing the same as fileName but with a reliabler name:

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

Lines 19 to 21 in 6e0bffe

	const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
	const fileName = lodashGet(props.tnode, 'domNode.children[0].data', '');
	const parentStyle = lodashGet(props.tnode, 'parent.styles.nativeTextRet', {});

Here we will add:

const link = lodashGet(props.tnode, 'domNode.children[0].data', '');

and also add the link prop within our anchorForCommentsOnlyPropTypes.js

4. Now we have to call the properly context menu for the URL or Email here:
   

   App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

   Line 64 in d4ed740

   ContextMenuActions.CONTEXT_MENU_TYPES.LINK,

   
   Change this line to:

Str.isValidEmail(this.props.link) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,

Note: We will have to do item 4. within index.js and index.native.js to cover native and non-native applications.

SCREEN RECORDING

2022-03-04.17-58-58.mp4

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[michaelhaxhiu]

Job is posted to upwork here.