[Due for payment 2025-03-31] [$250] Enable copy action on mobile for select travel details (minimally address and confirmation number)

[blimpich]

At the moment, it's not possible to copy key travel information. Minimally this is the hotel address and confirmation number, though there could be more examples. To address this issue, let's add a "copy" icon next to common travel info. This both communicates that copying is possible, and gives users a one-tap way to take that action.

Here's a screenshot of what the hotel trip details currently looks like, for reference.

Example of our copy icon used elsewhere:

Screen.Recording.2025-03-04.at.3.11.13.PM.mov

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897065395249352167
• Upwork Job ID: 1897065395249352167
• Last Price Increase: 2025-03-04
• Automatic offers:
• gijoe0295 | Contributor | 106480233

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (External)

[gijoe0295]

@blimpich Missing the screenshot:

[blimpich]

Should be fixed now, @gijoe0295 can you see it now?

[gijoe0295]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-06 03:37:20 UTC.

Proposal

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

Enable copy action on mobile for select travel details (minimally address and confirmation number)

What is the root cause of that problem?

New feature

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

We need to update confirmation and address menu items, and optionally record locator, flight/train code, seat in flight/train trips, vendor, confirmation number in car trips,.. to include the copy icon.

App/src/pages/Travel/HotelTripDetails.tsx

Lines 74 to 77 in f9c552a

	<MenuItemWithTopDescription
	description={translate('travel.hotelDetails.confirmation')}
	title={reservation.confirmations?.at(0)?.value}
	interactive={false}

For the design, we have several options:

1️⃣ Center the copy button with the content itself

If we want to show the copy icon right next to the address text, we can leverage the MenuItem's titleComponent prop and use CommunicationsLink component as we already used in ProfilePage:

App/src/pages/ProfilePage.tsx

Lines 256 to 265 in 533230a

	<CommunicationsLink value={phoneOrEmail ?? ''}>
	<UserDetailsTooltip accountID={details?.accountID ?? CONST.DEFAULT_NUMBER_ID}>
	<Text
	numberOfLines={1}
	style={styles.w100}
	>
	{isSMSLogin ? formatPhoneNumber(phoneNumber ?? '') : login}
	</Text>
	</UserDetailsTooltip>
	</CommunicationsLink>

titleComponent={
    <CommunicationsLink value={reservation.start.address ?? ''}>
        <Text style={styles.w100}>
            {reservation.start.address ?? ''}
        </Text>
    </CommunicationsLink>
}

We might want to suppress the fixed height of the CommunicationsLink here by introducing a new prop shouldSuppressHeight to make sure it works well in case the address spans into more than 1 line. The copy icon will be middle-aligned (can be customized later):

We might need further style adjustments to align the copy icon position. Maybe middle align the copy icon, or move it closer to the inner text... This needs design team confirmation.

2️⃣ Center the copy button with the entire row (and right align the icon)

In HotelTripDetails, use MenuItem's rightComponent & shouldShowRightComponent props to insert a copy icon following this implementation:

App/src/components/CommunicationsLink.tsx

Lines 27 to 34 in d766103

	<ContextMenuItem
	icon={Expensicons.Copy}
	text={translate('reportActionContextMenu.copyToClipboard')}
	successIcon={Expensicons.Checkmark}
	successText={translate('reportActionContextMenu.copied')}
	isMini
	onPress={() => Clipboard.setString(value)}
	/>

To make it middle-aligned, we can wrap it inside a View with alignSelf: center style.

3️⃣ Show a smaller copy icon next to the push row label (or menu item's description)

Introduce new props for MenuItem: shouldShowCopyIcon and copyValue. Then use the same ContextMenuItem component as above. Wrap it and the description Text here inside a flex-row, end-aligned View.

<View style={[styles.flexRow, styles.alignItemsEnd, styles.w100]}>
    <Text
        style={descriptionTextStyles}
        numberOfLines={numberOfLinesDescription}
    >
        {description}
    </Text>
    {shouldShowCopyIcon && !!copyValue && (
        <ContextMenuItem
            icon={Expensicons.Copy}
            ...
            onPress={() => Clipboard.setString(copyValue)}
        />
    )}
</View>

To make the copy icon smaller, introduce iconWidth & iconHeight to ContextMenuItem and pass them to the Icon component.

We can extract the ContextMenuItem to a variable and use it for the case description shown below the title here.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA - UI improvement

What alternative solutions did you explore? (Optional)

1. We might want to use a larger copy button like this:

In this case, we can use PressableWithDelayToggle like this:

App/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx

Lines 114 to 123 in 6ba1ae6

	<PressableWithDelayToggle
	text={translate('twoFactorAuth.copy')}
	textChecked={translate('common.copied')}
	icon={Expensicons.Copy}
	inline={false}
	onPress={() => {
	Clipboard.setString(account?.recoveryCodes ?? '');
	setError('');
	setCodesAreCopied();
	}}

2. We might want to incorporate the copy button into the MenuItem component for reusability. To do that, we can introduce a prop to enable showing the copy icon with similar implementation as above.

[ntdiary]

I feel the copy icon should be right next to the address rather than in the top right corner of the menu item.
BTW, @blimpich, does your address contain line breaks? I mocked the data and saw that the address wasn’t split into two lines. 😂

[gijoe0295]

copy icon should be right next to the address

@ntdiary I updated my proposal.

does your address contain line breaks

It does contain the line breaks but should be stripped out after #57801 is completed.

[blimpich]

Hmm good point, there are a couple cases here I hadn't considered. Lets bring a member of the design team here to get their opinion on how it should look.

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[blimpich]

👋 @dannymcclain hello! We have a couple questions about how this new copy functionality should look in the trip preview UI:

1. should the address contain line breaks?
2. if the address has line breaks, where should the icon for copying the address to the clipboard go?

[dannymcclain]

Definitely going to need @Expensify/design and specifically @shawnborton to weigh in on this one, but I think we could approach it one of two ways:

Center the copy button with the entire row (and right align the icon)

This does not follow the same pattern for copying a user's email from their profile, but does kinda jive with our general patterns regarding alignment. The copy button does feel a bit disconnected from the content though...

Center the copy button with the content itself

This more closely follows the pattern from profile, and seems to work pretty well with one line and multi-line content, so this is probably the way to go. I'd like a gut check from the design team, but I think this is what I would recommend.

[dannymcclain]

should the address contain line breaks?

Oh also, for this question, I think it could go either way depending on what data we get, right? I was under the impression we didn't have much control over this.

[blimpich]

We definitely have the power to remove line breaks from the address in the trip preview. Adding line breaks if the address doesn't come with them would be more of a pain since we'd have to parse the address and figure out where to put them. Getting rid of them is totally doable though 👍

[blimpich]

Asked here if the newline is intentional on our side or if it just happens to be how the data is coming in from Spotnana.

[dannymcclain]

Same same! 🤝

Also, can we get a sense of how this is applied to all components that use something like this?

We just enable it with an optional prop.

So will this be available for any read-only push row?

[gijoe0295]

Will this be available for any read-only push row

I think to apply this to ALL read-only menu items are out of scope of this issue. A majority of them can be "copiable" by default but we still need to go through all the MenuItem instances for safety.

The general idea is that: Read-only menu items are marked with interactive=false. We can use this prop to detect a read-only menu item:

• Enable the copy feature by default in MenuItem if interactive=false and its default value would be title, without the need to pass copyValue.
• For more complicated cases where the title is a component (titleComponent), we still need to pass copyValue. So the fallback chain of copyValue should be:

const copyValue = copyValueProp ?? (!interactive && title);

@blimpich It's up to you to decide whether we want to incorporate this improvement globally in this issue or to resolve them in a separate one. I'm happy with any option though.

cc @ntdiary

[ntdiary]

Same same! 🤝

Also, can we get a sense of how this is applied to all components that use something like this?

We just enable it with an optional prop.

So will this be available for any read-only push row?

@dannymcclain, not sure if there was a similar definition for the read-only push row before. 😂

So far, the information in trip detail page uses MenuItem component, while the email in the profile page uses UserDetailsTooltip component.

BTW, as a fundamental and widely used component, MenuItem has grown to nearly a thousand lines of code. It has so many custom render options that it doesn’t feel as easy to use as it should be. ( Not opposing @gijoe0295's proposal, just have a minor gripe about this component 😅 )

Finally, If there are no other thoughts, let's proceed with @gijoe0295's proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @blimpich is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[blimpich]

Lets keep is scoped to just the trip preview UI for now. And handle the rest of the read-only push rows in a different issue 👍

[melvin-bot]

📣 @gijoe0295 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.17-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Enable copy action for travel details #58246

If no regressions arise, payment will be issued on 2025-03-31. 🎊

For reference, here are some details about the assignees on this issue:

• @ntdiary requires payment through NewDot Manual Requests
• @gijoe0295 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ntdiary] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[ntdiary]

Select only one test case for regression test.

Precondition:

Test:

1. Book a hotel trip.
2. Open the hotel trip details
3. Right-click (desktop) or long-press (mobile) the address information.
4. Verify the Copy to clipboard context menu will appear.
5. Select it and verify the address will copy successfully.

Do we agree 👍 or 👎

[strepanier03]

Payment summary

• $250 - @ntdiary via NewDot Manual Requests
• $250 - @gijoe0295 paid via Upwork

[strepanier03]

@ntdiary - Payment summary above, please feel free to request payment.

@gijoe0295 - I paid and closed your Upwork contract.

Thank you both for your work on this!

[JmillsExpensify]

$250 approved for @ntdiary