[HOLD for payment 2021-12-06] [HOLD for payment 2021-11-25] Update "Be the first person to comment!" screen when you start a new DM

[mallenexpensify]

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:

Sent DM message to someone I hadn't messaged before

Expected Result:

The blank screen should have avatars, a message for "This is the beginning of your chat history with XXXX (pronouns), as well as showing the timezone above the message input when messaging someone 1:1.

Actual Result:

Only see "Be the first person to comment!"

Solution

Let's update this state/area to include the users icon, name, preferred pronouns and the time in their time zone (only if 1:1 DM).

Design files are here in Figma

Platform:

Where is this issue occurring?

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

Expensify/Expensify Issue URL: link

View all open jobs on Upwork

Upwork job: https://www.upwork.com/jobs/~0159561fdd76ccd036

[MelvinBot]

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

[Santhosh-Sellavel]

@mallenexpensify

What's it gonna be for the new group chat?

[mallenexpensify]

Great point @Santhosh-Sellavel ! I addressed your question in an old internal issue we had been working on, I instructed folks to post comments/feedback to this issue. We have two choices

1. Address group chats in this GH and figure out what we want before posting the job.
2. Only focus on the single DM usecase for now and address groups later.

[Santhosh-Sellavel]

Is this going to be external? @mallenexpensify
If it's I'm interest then.

An overview of implementation details,

• Will create a new component to show the required details.
• Will use component instead of current textview, which shows 'be first to comment' in ReportActionsView.js
• And add relevant styles or reuse available styles.
• Also change placeholder text in chat input.

[mallenexpensify]

It will very likely be external @Santhosh-Sellavel , @michaelhaxhiu needs to triage the issue first, part of that is figuring out what we want to do about group messages. My hunch is it's best to fix this issue specifically for the 1:1 DM usecase now then create a new issue in the future to address both group messages and possibly rooms.

@michaelhaxhiu, this shouldn't require a designer, an engineer should be able to take care of everything

[rosegrech]

Great question about the group. I want to say lets work on how the 1:1 looks like and then probably handle the group in a new GH to keep things neat and tidy. I'd love to say whatever we use for 1:1 will work for the group but ard to say that as of now :)

[shawnborton]

@megankelso @michelle-thompson I vaguely recall that we explored what this screen would look like for various use cases... actually I think it was @michelle-thompson that did it for Concierge Travel.

So basically we could do something like this?

And maybe before we have those features ready to go, we could just use a generic message for the group situation like so:

And then in terms of scalability, looks like Michelle had mocked up something like this for when a group has lots of participants:

[michelle-thompson]

Cool, happy to move forward with the generic messaging you've mocked up above!

[shawnborton]

Sweet, so I think maybe we want to make the avatars in my mockup a bit smaller like your original mocks (the one at the bottom) for scalability purposes. Otherwise, then I think we just need to decide if we're going to add Group chats to the exported Upwork issue?

[michelle-thompson]

Ahh, you mean so the size of the avatar never has to change? And I figure might as well add group chats to this issue.

[shawnborton]

Yeah, I think I like the size you had here:

...better than the larger size I used. So that gives us something like this: