Add button for creating a new group clip clop (#10066)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/dms/dialogs/NewChatDialog.tsx

@@ -1,7 +1,5 @@
 import {useCallback} from 'react'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {logger} from '#/logger'
@@ -10,6 +8,7 @@ import {FAB} from '#/view/com/util/fab/FAB'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from '#/components/dialogs/SearchablePeopleList'
+import {InitiateChatFlow} from '#/components/dms/InitiateChatFlow'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import * as Toast from '#/components/Toast'
 import {useAnalytics} from '#/analytics'
@@ -22,10 +21,12 @@ export function NewChat({
   onNewChat: (chatId: string) => void
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const ax = useAnalytics()
   const requireEmailVerification = useRequireEmailVerification()
 
+  const isGroupChatEnabled = ax.features.enabled(ax.features.GroupChatsEnable)
+
   const {mutate: createChat} = useGetConvoForMembers({
     onSuccess: data => {
       onNewChat(data.convo.id)
@@ -37,7 +38,7 @@ export function NewChat({
     },
     onError: error => {
       logger.error('Failed to create chat', {safeMessage: error})
-      Toast.show(_(msg`An issue occurred starting the chat`), {
+      Toast.show(l`An issue occurred starting the chat`, {
         type: 'error',
       })
     },
@@ -50,6 +51,13 @@ export function NewChat({
     [control, createChat],
   )
 
+  const onCreateGroupChat = useCallback(
+    (_dids: string[], _groupName: string) => {
+      control.close()
+    },
+    [control],
+  )
+
   const onPress = useCallback(() => {
     control.open()
   }, [control])
@@ -68,20 +76,27 @@ export function NewChat({
         onPress={wrappedOnPress}
         icon={<Plus size="lg" fill={t.palette.white} />}
         accessibilityRole="button"
-        accessibilityLabel={_(msg`New chat`)}
+        accessibilityLabel={l`New chat`}
         accessibilityHint=""
       />
-
       <Dialog.Outer
         control={control}
         testID="newChatDialog"
         nativeOptions={{fullHeight: true}}>
         <Dialog.Handle />
-        <SearchablePeopleList
-          title={_(msg`Start a new chat`)}
-          onSelectChat={onCreateChat}
-          sortByMessageDeclaration
-        />
+        {isGroupChatEnabled ? (
+          <InitiateChatFlow
+            title={l`New chat`}
+            onSelectChat={onCreateChat}
+            onSelectGroupChat={onCreateGroupChat}
+          />
+        ) : (
+          <SearchablePeopleList
+            title={l`Start a new chat`}
+            onSelectChat={onCreateChat}
+            sortByMessageDeclaration
+          />
+        )}
       </Dialog.Outer>
     </>
   )