[$250] [HOLD for payment 2024-04-09] [CRITICAL] [Groups] Frontend (Part 1): Create Group Chats + Splits. Deprecate Group DM creation. Support viewing both Group DMs and Group Chats.

marcaaron commented 11 months ago

Holding on:

Group Chats Design Doc

Changes described in detail here.

Goals

Update the the Group Chat creation flow UI to have a new "confirm" screen

Current UI:

New UI (with differences noted):

The creator will be shown as the "admin"

API call:

Set the chatType to group when calling OpenReport so the backend will know we are creating a "Group Chat" and add a constant for this.
For now, default avatar is fine - no need to have the upload yet.
Group name should also be non-interactive for now (we will add this later).
- It should automatically take the standard name: %firstName%, %firstName%, …. one for each member, with the first member alphabetically appearing first (leftmost)
- If a Group chat contains only one member because everyone else has left, then the default name will be %firstName%’s group chat
We should send a new param called groupChatAdminLogins. For now, it will include the creator of the chat only.

Migration notes:

We are moving from one kind of "Group DM" towards a new format of "Group Chat"
So, we must make sure that when merging this PR both Group DMs and Group Chats are still supported in all App versions. Though this new version should not create Group DMs and only create Group Chat. This means any existing Group DMs should be visible by all users. And old app versions can safely create Group DMs.
Splits should also be creating Group Chats instead of Group DMs (see this doc section)
Add the default Group chat avatar assets. Default to one based on reportID (as this won't ever change) similar to how the default avatars are generated.

This will all need to be performed in one App PR. We will hard deprecate older versions after it is deployed to production by updating the minimum app version so there is a hard dependency on this PR getting approved and merged:

[ ] https://github.com/Expensify/App/pull/32326

Other things to note:

New Group Chats (like DMs) should have a notificationPreference of 'hidden' until a comment is left. We must ensure this behavior is preserved.

Implementation notes:

Our existing screen for this flow is: NewChatSelectorPage, but the Chat tab section is the NewChatPage. Its Modal stack navigator is here.

We need to: Modify the “Create group” button so that it says “Next”. Add an additional page to the NewChatSelectorPage stack navigator. Create a new page which we will call NewChatConfrmPage Add the appropriate routes for this page at /new/chat/confirm

Switching the button to “Next” here when we have tapped the “Add to group” option. Navigating to the new page

We need to add logic to navigate the user to the confirm page when they have selected “Add to group” here and have some staging participants.

We’ll also need some way for this new page to access those participants. The selectedOptions are currently stored here and house the members being added to the group. We will move them to a new Onyx key called newGroupChat that will be exclusively used to hold the state for a Group chat that is in the process of being created. This will allow the user to refresh the page and pick up where they left off (which is not possible today) and also allow us to share this state between all pages in the flow.

Start group button By this point, the newGroupChat Onyx state should have the following required data for the OpenReport API call: optimisticReportID optimistic accountIDs for any participants groupChatAdminLogins - should only contain the creator reportName - empty string (for now)

onPress we will navigate to the report just like we do already for Group DMs.

To do this, we will modify the navigateAndOpenReport() method here to handle the: memberRoles (if any) reportName

It already handles the logins. So, we need to add arguments for roles and reportName to that method. We must also modify the logic here when we have the group chat case since we won’t ever need to get an existing chat and will always be creating one.

The optimisticReport returned from ReportUtils.buildOptimisticChatReport() must be modified to update the participants field (see refactor plan here) with the corresponding role for each participant. Finally, the optimistic report is passed here to be created in the server. We must also pass the memberRoles as it will contain the link between any optimistic accountID and the login/email.

Group chat avatars will also need to display correctly in the Search function, Report header, details page, etc. We must modify the methods that get the avatars from personal details or workspace and first check for the report.avatarUrl. We can modify the existing ReportUtils.getIcons() method to first check the report.avatarUrl when we have a “Group chat” and fallback to a default avatar based off of the reportID.

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0174ced808f29e748c
Upwork Job ID: 1777806130629287936
Last Price Increase: 2024-04-09