[$500] MEDIUM: Add email address to hover state of chat switcher results

[quinthar]

Problem: When searching for someone who has two accounts (ie, one for a personal address and one for work), if the name and avatar are identical, there is no way to tell them apart. Accordingly, if you are trying to explicitly message their work or personal account, there is no way to do this reliably.

Solution: Everywhere else in product when you hover over a name, we show its email address. Let's add this feature to the search result page.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b202ea4b9d8efa08
• Upwork Job ID: 1766606544852156416
• Last Price Increase: 2024-04-13

[melvin-bot[bot]]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @Chinedu25! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[macbrina]

Proposal

Problem: The issue arises when searching for someone who has both personal and work accounts, as their names and avatars are identical, making it impossible to differentiate between the two accounts reliably when attempting to send a message.

Root Cause: The root cause of this problem is the lack of distinct identifiers between personal and work accounts with identical names and avatars, leading to confusion and inability to target messages accurately.

Solution: To solve this problem, i propose implementing a feature that allows users to add custom labels or tags to their contacts, indicating whether they are personal or work accounts. These labels/tags would be visible during the search process, providing clarity and enabling users to select the correct account when sending messages.

Alternative Solutions:

1. Implementing a color-coding system for personal and work accounts.
2. Adding an option for users to choose a different avatar for their work account to differentiate it from their personal account.
3. Introducing a toggle switch to switch between personal and work mode, displaying only the relevant contacts based on the selected mode.

However, the proposed solution of adding custom labels/tags is the most straightforward and user-friendly approach to address the issue effectively.

[melvin-bot[bot]]

📣 @macbrina! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[macbrina]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/pmbaekwe

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[abzokhattab]

Proposal

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

Add email address to hover state of chat switcher results

What is the root cause of that problem?

new feature: on hovering over the item text we need to show the user details tooltip

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

the current list of the SearchPage uses the UserListItem which doesn't show the user details tooltip on hovering, To address this, we need to use the UserDetailsTooltip component, which is the tooltip that appears when hovering over the user icon

To do so we have two approaches:

1. either to change the current behavior in the UserListItem without backward compatibility by replacing the item text component with:

               <UserDetailsTooltip accountID={Number(item?.tooltipText)}>
                            <Text
                                style={[
                                    styles.optionDisplayName,
                                    isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                    item.isBold !== false && styles.sidebarLinkTextBold,
                                    styles.pre,
                                    item.alternateText ? styles.mb1 : null,
                                ]}
                            >
                                {item.text}
                            </Text>
                        </UserDetailsTooltip>

2. or we can keep the current behaviour as its and declare a new prop useUserDetailsToolTip which will use the new UserDetailsTooltip implementation if set.

POC

https://github.com/Expensify/App/assets/59809993/df8fffbb-885e-455f-9b0e-388ddc4edfec

additionally, for optimizing the list performance we can show the list only if the user details tooltip text is not the same as the item.text

[brandonhenry]

@quinthar this is an odd request? As it currently stands, if you hover over the avatar image, it already shows the hover state tooltip?

[Owl0223]

Problem: Lack of identifiers in the search result block for personal and work accounts. Solution:

1. I recommend adding a tooltip just as you provided in your expected result.

2. In addition to that, I recommend to add a tag, that differentiates different accounts based on either thier email's domain or asking users(new ones) to select the account as either work or personal.

3. For old users, we can identify the tags based on a certain list of email domains for personal account and everything else for work account.

[melvin-bot[bot]]

📣 @Owl0223! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Owl0223]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01a22390089fc12cb7

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Tony-MK]

I believe this happens on staging when you hover on the report avatar.

[ahmedGaber93]

Proposal

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

Add email address to hover state of chat switcher results

What is the root cause of that problem?

we already surround user name with a simple simple text tooltip TextWithTooltip here not UserDetailsTooltip and it designed to work only if the text is ellipsis and show the full ellipsis text not user details.

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

conditionaly use UserDetailsTooltip for users and current TextWithTooltip for other chat types

here with

 {item?.accountID !== 0 ? (
    <UserDetailsTooltip
        accountID={Number(item.accountID)}
        icon={item.icons ? item.icons[0] : undefined}
        fallbackUserDetails={{
            displayName: item.text,
        }}
    >
        <Text
            style={[
                styles.optionDisplayName,
                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                item.isBold !== false && styles.sidebarLinkTextBold,
                styles.pre,
                item.alternateText ? styles.mb1 : null,
            ]}
            numberOfLines={1}
        >
            {item.text}
        </Text>
    </UserDetailsTooltip>
) : (
    <TextWithTooltip
        shouldShowTooltip={showTooltip}
        text={item.text}
        style={[
            styles.optionDisplayName,
            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
            item.isBold !== false && styles.sidebarLinkTextBold,
            styles.pre,
            item.alternateText ? styles.mb1 : null,
        ]}
    />
)}         

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal

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

MEDIUM: Add email address to hover state of chat switcher results

What is the root cause of that problem?

We don't use DisplayNames for displaying tooltips inside UserListItem . https://github.com/Expensify/App/blob/dd7eaef1b1212c8670e89d433ec55728b7c74ac0/src/components/SelectionList/UserListItem.tsx#L83-L85

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

We need to use DisplayNames instead of TextWithTooltip. We need to follow few steps to get it working everywhere we show user/report details.

1. We need to update type of UserListItem item property, when we use UserListItem, in most cases the type of item we get is OptionData and if the type is not of OptionData, we still get accountID which is enough to get the required values for the DisplayNames.

type UserListItemProps = ListItemProps & {
    /** Errors that this user may contain */
    errors?: Errors | ReceiptErrors | null;

    /** The type of action that's pending  */
    pendingAction?: PendingAction | null;

    /** The React element that will be shown as a footer */
    FooterComponent?: ReactElement;

    item: ListItem & OptionData;
};

2.We need to get some details to pass as prop before we use DisplayNames,

    const personalDetails = usePersonalDetails();
    const participantAccountIDs = item.participantsList?.length ? item.participantsList?.map((e) => e.accountID) : [item.accountID];
    const participantPersonalDetailList = Object.values(OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails)) as PersonalDetails[];
    const hasMultipleParticipants = participantPersonalDetailList.length > 1 || item?.isChatRoom || item?.isPolicyExpenseChat || ReportUtils.isExpenseReport(item);
    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
        (participantPersonalDetailList || []).slice(0, 10),
        hasMultipleParticipants,
        undefined,
        ReportUtils.isSelfDM(item),
    );

3. Replace TextWithTooltip with DisplayNames.

<DisplayNames
    accessibilityLabel={translate('accessibilityHints.chatUserDisplayNames')}
    fullTitle={item.text ?? ''}
    displayNamesWithTooltips={displayNamesWithTooltips ?? []}
    tooltipEnabled
    numberOfLines={1}
    shouldUseFullTitle={!!item.isChatRoom || !!item.isPolicyExpenseChat || !!item.isTaskReport || !!item.isThread || !!item.isMoneyRequestReport}
/>

Optional

We can disable it for component where we don't require the tooltip, we might only need it in SearchPage only so we can check if we have participantsList or not and based on that we will use DisplayNames or TextWithTooltip.

PS: This is pseudo-code, there might be minor changes required but that can be covered in the PR phase.

Result

https://github.com/Expensify/App/assets/85894871/43a1d46f-d809-461f-9072-159c11a06e30

[miroshar-success]

done

[melvin-bot[bot]]

📣 @OskarMast! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[c3024]

@quinthar

As @brandonhenry and @Tony-MK identified, hovering over the avatar shows the tooltip with display name and email, This is the case with all components using SelectionList. That is enough to check the email of a user IMO.

Do we want to show the tooltip with display name and email on hovering the user name as well?

https://github.com/Expensify/App/assets/102477862/5b31df93-0b46-4ce5-8fc1-0c1a878e7372

[miroshar-success]

No problem. Done

[abzokhattab]

@c3024 Just a small note to consider, the avatar tooltip will not show the actor's email in case the report is a workspace and not a direct DM please check the video mentioned here also here is another one:

https://github.com/Expensify/App/assets/59809993/db94ce9c-6fe9-4617-a54f-df3a815f1240

[Krishna2323]

@c3024, I believe the inconsistency should be fixed here, we should be showing tooltips on hovering on the names when we don't have logins as subtitle.

https://github.com/Expensify/App/assets/85894871/7c899119-9fe5-4754-8fa1-92d6a5684e50

[melvin-bot[bot]]

@c3024 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Krishna2323]

@c3024, any updated here?

[c3024]

Asked here in Slack

[melvin-bot[bot]]

@c3024 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot[bot]]

@c3024 Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸