[CRITICAL] [Groups] Frontend (Part 2): Update the Group Chat creation flow UI and Details page

[marcaaron]

Doc Section: https://docs.google.com/document/d/1NcklRh6NogUWhKL0J5udTE8bok3_9ZoZ57JTllP-QJg/edit#bookmark=id.pa6oyw3cxv7q

Holding on:

• https://github.com/Expensify/Expensify/issues/340997
• https://github.com/Expensify/Expensify/issues/352995
• https://github.com/Expensify/Expensify/issues/340999
• https://github.com/Expensify/Expensify/issues/341005
• https://github.com/Expensify/Expensify/issues/341001
• https://github.com/Expensify/Expensify/issues/341002
• https://github.com/Expensify/Expensify/issues/341004
• https://github.com/Expensify/Expensify/issues/341003
• [$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. #32317

Group Chats Design Doc

High level section with mockups: https://docs.google.com/document/d/1NcklRh6NogUWhKL0J5udTE8bok3_9ZoZ57JTllP-QJg/edit#bookmark=id.9fdzsieljz63

At this point, the latest app version has already migrated off of Group DMs and is creating Group Chats under the hood. We now need to add the ability to:

• Give a custom group name during creation
• Upload a custom avatar
• Add the update member role page and set the roles

We will also allow people to do these things + invite members via the "Details" page when tapping on a Group chat.

By the end of this ticket we should be able to:

Creation

• Give a custom group name

  • Tapping/clicking the group name on the confirmation will push to a new page where editing is possible. The group name is pre-selected to optimize for adding a custom, unique name instead of the default
    

• Upload a custom avatar

  • This should work similar to how uploading an avatar works for workspaces (example)
    

Both of these will need to be staged/stored locally so that they can be passed to the API when we tap "Start group"

Details view (accessible from tapping on the Avatar in the header of the chat)

• Avatar can be updated from here (by anyone)
• The "Leave" button will allow a user to leave the Group (HOLD on API changes)
• The "Pin" button will be the same action as right-click to pin
• "Call" will generate a Google Meet link
• Share page - works the same as existing chats
• Private notes - same as existing chats
• Settings - same as existing chats however we can also change the Name of the report here (anyone)

Members page

The design for this closely follows the design for the Simplified Collect design doc so should be held on those changes and/or worked on in parallel and we will have a shared component for both flows.

• We can see who is an admin and not in the Members page (pill tag)
• For admins, we can select multiple or all members (for bulk actions)

• Selecting members will replace the "Invite members" button with the n selected button with dropdown (shown above)
• Note: The highlighting styles when members are selected.
• Tapping the "3 selected" opens the popover menu with these options:
  • Remove members
  • Make admin (when at least one member is selected)
  • Make member (when at least one admin is selected)
• Confirmation modal will be shown for "Remove members"

• For members (non-admins), we will see this:

Tapping a row (not the checkbox) will bring them to these screens respectively:

Admins

• "Remove from group" option will launch a confirm modal
• Role selector will launch a new screen like this:
  
• Profile - takes you to the profile

Members

Just go direct to the profile screen for the user

Invite member button

Opens to a new screen:

• Multiple members can be invited
• "Invite" button shows when at least one member is staged
• Redirect back to the "Members" page on success with new members visible.

Testing membership changes

When a member is added/removed or their admin status changes we will display the following "system messages" and must confirm these messages are present and showing up correctly prior to launching these features.

• a system message will clarify when someone is invited, e.g. “invited %displayName%”, visible to all participants
• Removing a member from a Group chat triggers a system message for all Group chat participants, e.g. “removed %displayName%”
• When someone is made an admin, or demoted back to a member, we’ll use a “whisper” style message so that person knows that their role changed, e.g. “made %displayName% a member” or “made %displayName% an admin”

[marcaaron]

Bumping to Weekly but it's still on HOLD pending more Auth changes and the first App PR. This issue will introduce all the features we need to complete the Group Chats feature.

[marcaaron]

Still on HOLD as we need to get the first PR merged. I think @waterim will help us here as well. But let me know if that has changed!

[marcaaron]

Making this a Daily since I think the first PR is close enough that we can begin to work on the second.

[waterim]

Hello, Im Artem from Callstack

[marcaaron]

Removing this issue from the scope to HOLD on https://github.com/Expensify/Expensify/issues/341000 (I have doubts we will complete that particular migration by May 1st).

However, the issue here really needs to happen ASAP.

@waterim Thank you for your continued hard work here! 🙇

We ideally need to have something in review by next week. Let me know if it will be possible. I am hopeful because the APIs for these other features we are layering on top of the Members page should be pretty simple in comparison to adding the ability to create a Group Chats together with the Group DMs.

[marcaaron]

Last PR still not deployed - but removing the HOLD since there is no need to wait 🚀

[danielrvidal]

@waterim do you have an update on this one? This is high priority so it would be great to make some steady progress.

[waterim]

@danielrvidal yes, already had a conversation with @marcaaron
Started today and working till the end of this week before OOO and after @marcaaron will take it not to loose any time here

[waterim]

My update: added invite, updated members page, added edit chat name

will post an early PR tomorrow

[marcaaron]

@s77rt would you like to work with us on this one as the C+?

[s77rt]

Yes sure!

[marcaaron]

The final major front end PR is more or less shaping up into a testable state 🚀

To do list before merge:

• Wait for https://github.com/Expensify/Web-Expensify/pull/41571 to go to production to fix a bug related to updating the avatars (it's on staging already so should be sometime today or tomorrow).

• Trigger an AdHoc build on the current PR and loop in Design team for feedback.

• Cover failure cases for the new API commands. The "success" case works well, but there's basically no error handling so I want to make sure there is at least some minimal error handling in case something goes wrong.

• The es translations are placeholder. Need to request help with that.

• We need to confirm the marketing copy for this:

  In the case where the last member of a Group chat opts to leave, we’ll display a confirmation warning message explaining that the Group chat will be inaccessible to all users for all time if they leave.

Lastly, as we work through this it has become more clear that there are opportunities to harmonize the UI for both the UCR and Group Chat flows. I suspect we will have some follow up issues as part of this. My goal for this week is to get the Group Chats feature as laid out in the doc onto staging. Then we can look at everything else. cc @shawnborton @dannymcclain since you both had some ideas here. I want to make sure we address them - but maybe we can do some follow up collaboration once we first implement what was decided in the Design Doc.

[marcaaron]

In final reviews now.

[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]

⚠️ 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]

⚠️ 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]

⚠️ 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]

⚠️ 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.

[marcaaron]

This is on production now.

[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.