@planningcenter/chat-react-native 3.2.0-rc.17 → 3.2.0-rc.19

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.js

@@ -1,20 +1,20 @@
-import { PlatformPressable } from '@react-navigation/elements';
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Heading, Icon, Image, Text } from '../../components';
-import { useTheme } from '../../hooks';
+import { Button, Heading } from '../../components';
 import { useGroupsGroups } from '../../hooks/use_groups_groups';
-import { platformFontWeightMedium, pluralize } from '../../utils';
-const ASPECT_RATIO = 16 / 9;
-const THUMBNAIL_WIDTH = 80;
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+import { pluralize } from '../../utils';
+import { RecipientLinkRow } from './components/recipient_link_row';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ViewMoreLinkRow } from './components/view_more_link_row';
+const MAX_VISIBLE_GROUPS = 5;
 export const ConversationSelectRecipientsScreen = ({ route, }) => {
     const styles = useStyles();
     const navigation = useNavigation();
     const { data: groups = [] } = useGroupsGroups();
     const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
+    const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS);
+    const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS;
     const handleNavigateToConversationNew = (group) => {
         navigation.navigate('New', {
             screen: 'ConversationNew',
@@ -25,25 +25,25 @@ export const ConversationSelectRecipientsScreen = ({ route, }) => {
             },
         });
     };
-    return (<ScrollView style={styles.container}>
+    const handleGroupsViewMore = () => {
+        navigation.navigate('New', {
+            screen: 'ConversationSelectGroupRecipients',
+            params: {
+                ...route.params,
+            },
+        });
+    };
+    return (<ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
           <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => {
+          {visibleGroups.map(group => {
             const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
-            return (<PlatformPressable key={group.id} style={styles.row} onPress={() => handleNavigateToConversationNew(group)} accessibilityRole="link" accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}>
-                <Image source={{ uri: group.headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt=""/>
-                <View style={styles.rowContent}>
-                  <Text style={styles.rowName} numberOfLines={2}>
-                    {group.name}
-                  </Text>
-                  <Text variant="tertiary">{group.membershipsCount} members</Text>
-                </View>
-                <Icon name="general.rightChevron" size={16} style={styles.rowIconRight}/>
-              </PlatformPressable>);
+            return (<RecipientLinkRow key={group.id} imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => handleNavigateToConversationNew(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);
         })}
+          {hasMoreGroups && (<ViewMoreLinkRow onPress={handleGroupsViewMore} accessibilityHint="Navigate to a full list of your groups."/>)}
         </View>
       </View>
       <View style={styles.section}>
@@ -61,52 +61,22 @@ export const ConversationSelectRecipientsScreen = ({ route, }) => {
 };
 const useStyles = () => {
     const { bottom } = useSafeAreaInsets();
-    const theme = useTheme();
     return StyleSheet.create({
-        container: {
-            flex: 1,
-            gap: 8,
+        contentContainer: {
+            gap: 24,
+            paddingTop: 16,
+            paddingBottom: 16 + bottom,
         },
         section: {
-            padding: 16,
             flex: 1,
         },
         sectionHeader: {
             flexDirection: 'row',
             justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingBottom: 4,
         },
         selectTeamsButton: {},
-        row: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-            paddingVertical: 16,
-            borderBottomWidth: 1,
-            borderColor: theme.colors.fillColorNeutral050Base,
-        },
-        rowImage: {
-            width: THUMBNAIL_WIDTH,
-            height: THUMBNAIL_HEIGHT,
-            borderRadius: 4,
-        },
-        rowName: {
-            fontWeight: platformFontWeightMedium,
-            flexShrink: 1,
-        },
-        rowContent: {
-            flexShrink: 1,
-        },
-        rowIconRight: {
-            marginLeft: 'auto',
-            color: theme.colors.fillColorNeutral030,
-        },
-        routeDebug: {
-            alignContent: 'center',
-            padding: 16,
-            paddingBottom: bottom,
-            borderTopWidth: 1,
-            borderTopColor: theme.colors.fillColorNeutral050Base,
-        },
     });
 };
 //# sourceMappingURL=conversation_select_recipients_screen.js.map

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, Heading, Icon, Image, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { AppName } from '../../types/resources/app_name'\nimport { platformFontWeightMedium, pluralize } from '../../utils'\n\ntype ConversationSelectRecipientsScreenProps = StaticScreenProps<{\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nexport const ConversationSelectRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <ScrollView style={styles.container}>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">My groups</Heading>\n        </View>\n        <View>\n          {groupsWithCreatePermission.map(group => {\n            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n            return (\n              <PlatformPressable\n                key={group.id}\n                style={styles.row}\n                onPress={() => handleNavigateToConversationNew(group)}\n                accessibilityRole=\"link\"\n                accessibilityLabel={groupAccessibilityLabel}\n                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}\n              >\n                <Image\n                  source={{ uri: group.headerImage?.thumbnail }}\n                  resizeMode=\"cover\"\n                  style={styles.rowImage}\n                  alt=\"\"\n                />\n                <View style={styles.rowContent}>\n                  <Text style={styles.rowName} numberOfLines={2}>\n                    {group.name}\n                  </Text>\n                  <Text variant=\"tertiary\">{group.membershipsCount} members</Text>\n                </View>\n                <Icon name=\"general.rightChevron\" size={16} style={styles.rowIconRight} />\n              </PlatformPressable>\n            )\n          })}\n        </View>\n      </View>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">Teams I lead</Heading>\n          <Button\n            style={styles.selectTeamsButton}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                },\n              })\n            }\n            title=\"Select teams\"\n            variant=\"outline\"\n            iconNameLeft=\"general.search\"\n          />\n        </View>\n      </View>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      gap: 8,\n    },\n    section: {\n      padding: 16,\n      flex: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    selectTeamsButton: {},\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 16,\n      borderBottomWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n    },\n    rowImage: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    rowName: {\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    rowContent: {\n      flexShrink: 1,\n    },\n    rowIconRight: {\n      marginLeft: 'auto',\n      color: theme.colors.fillColorNeutral030,\n    },\n    routeDebug: {\n      alignContent: 'center',\n      padding: 16,\n      paddingBottom: bottom,\n      borderTopWidth: 1,\n      borderTopColor: theme.colors.fillColorNeutral050Base,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { Button, Heading } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { pluralize } from '../../utils'\nimport { RecipientLinkRow } from './components/recipient_link_row'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\nimport { ViewMoreLinkRow } from './components/view_more_link_row'\n\nconst MAX_VISIBLE_GROUPS = 5\n\nexport const ConversationSelectRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n  const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS)\n  const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  const handleGroupsViewMore = () => {\n    navigation.navigate('New', {\n      screen: 'ConversationSelectGroupRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <ScrollView contentContainerStyle={styles.contentContainer}>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">My groups</Heading>\n        </View>\n        <View>\n          {visibleGroups.map(group => {\n            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n            return (\n              <RecipientLinkRow\n                key={group.id}\n                imageUri={group.headerImage?.thumbnail}\n                title={group.name}\n                subtitle={`${group.membershipsCount} members`}\n                onPress={() => handleNavigateToConversationNew(group)}\n                accessibilityLabel={groupAccessibilityLabel}\n                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}\n              />\n            )\n          })}\n          {hasMoreGroups && (\n            <ViewMoreLinkRow\n              onPress={handleGroupsViewMore}\n              accessibilityHint=\"Navigate to a full list of your groups.\"\n            />\n          )}\n        </View>\n      </View>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">Teams I lead</Heading>\n          <Button\n            style={styles.selectTeamsButton}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                },\n              })\n            }\n            title=\"Select teams\"\n            variant=\"outline\"\n            iconNameLeft=\"general.search\"\n          />\n        </View>\n      </View>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      gap: 24,\n      paddingTop: 16,\n      paddingBottom: 16 + bottom,\n    },\n    section: {\n      flex: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingHorizontal: 16,\n      paddingBottom: 4,\n    },\n    selectTeamsButton: {},\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/types/screen_props.d.ts

@@ -0,0 +1,9 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import { AppName } from '../../../types/resources/app_name';
+import { GraphId } from '../../../types/resources/group_resource';
+export type ConversationSelectRecipientsParams = {
+    chat_group_graph_id?: GraphId;
+    group_source_app_name?: AppName;
+};
+export type ConversationSelectRecipientsScreenProps = StaticScreenProps<ConversationSelectRecipientsParams>;
+//# sourceMappingURL=screen_props.d.ts.map

package/build/screens/conversation_select_recipients/types/screen_props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen_props.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/types/screen_props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAA;AAEjE,MAAM,MAAM,kCAAkC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,uCAAuC,GACjD,iBAAiB,CAAC,kCAAkC,CAAC,CAAA"}

package/build/screens/conversation_select_recipients/types/screen_props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=screen_props.js.map

package/build/screens/conversation_select_recipients/types/screen_props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen_props.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/types/screen_props.tsx"],"names":[],"mappings":"","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport { AppName } from '../../../types/resources/app_name'\nimport { GraphId } from '../../../types/resources/group_resource'\n\nexport type ConversationSelectRecipientsParams = {\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}\n\nexport type ConversationSelectRecipientsScreenProps =\n  StaticScreenProps<ConversationSelectRecipientsParams>\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.2.0-rc.17",
+  "version": "3.2.0-rc.19",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "e08fb91663287cbdec079e616e66908c09535bb8"
+  "gitHead": "5b6f02db88d2113ee904fff72b294f412cb58ae8"
 }

package/src/hooks/use_api.ts

@@ -4,7 +4,7 @@ import {
   useInfiniteQuery,
   useQuery,
 } from '@tanstack/react-query'
-import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { ApiCollection, ApiError, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
@@ -18,7 +18,7 @@ export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: Api
   type Resource = ApiResource<T>
   const apiClient = useApiClient()
 
-  const { data, ...query } = useQuery<Resource, Response>({
+  const { data, ...query } = useQuery<Resource, ApiError>({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ queryKey }) => {
       const [url, d, headers, app = 'chat'] = queryKey as RequestQueryKey
@@ -48,7 +48,7 @@ export const useApiPaginator = <T extends ResourceObject>(
   const apiClient = useApiClient()
   const query = useInfiniteQuery<
     ApiCollection<T>,
-    Response,
+    ApiError,
     InfiniteData<ApiCollection<T>>,
     any,
     Partial<RequestData> | undefined

package/src/navigation/index.tsx

@@ -29,6 +29,7 @@ import {
   ConversationFiltersScreenOptions,
 } from '../screens/conversation_filters_screen'
 import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -46,6 +47,21 @@ export const NewConversationStack = createNativeStackNavigator({
             Cancel
           </HeaderRightButton>
         ),
+        headerBackVisible: false,
+      }),
+    },
+    ConversationSelectGroupRecipients: {
+      screen: ConversationSelectGroupRecipientsScreen,
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+          >
+            Cancel
+          </HeaderRightButton>
+        ),
       }),
     },
     ConversationFilterRecipients: {

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -5,8 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FlashList } from '@shopify/flash-list'
 import { Heading } from '../../components'
 import { useTheme } from '../../hooks'
-import { useFlattenedArrayOfServiceTypesAndTheirTeams } from './hooks/use_flattened_array_of_service_types_and_their_teams'
-import { FAKE_SERVICE_TYPE_WITH_TEAMS_DATA } from './utils/fake_service_type_with_teams_data'
+import { useFlattenedArrayOfServiceTypesWithTeams } from './hooks/use_flattened_array_of_service_types_with_teams'
 import { ConversationFilterRecipientsScreenProps, SectionTypes } from './types'
 import { HeaderRow } from './components/header_row'
 import { tokens } from '../../vendor/tapestry/tokens'
@@ -14,6 +13,7 @@ import { CheckboxRow } from './components/checkbox_row'
 import { useHeaderHeight } from '@react-navigation/elements'
 import { FilterRecipientsProvider } from './context/conversation_filter_recipients_context'
 import { HeaderRightWithContext, FilterHeaderTitle } from './components/navigation_header'
+import { useServiceTypesWithTeams } from './hooks/use_service_types_with_teams'
 
 const SERVICE_TYPE_LABELLED_BY_PREFIX = 'header-'
 
@@ -33,8 +33,9 @@ export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOp
 export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
   const styles = useStyles()
 
-  const data = useFlattenedArrayOfServiceTypesAndTheirTeams({
-    data: FAKE_SERVICE_TYPE_WITH_TEAMS_DATA,
+  const { serviceTypes } = useServiceTypesWithTeams()
+  const data = useFlattenedArrayOfServiceTypesWithTeams({
+    data: serviceTypes,
     firstRowStyle: styles.firstRow,
     lastRowStyle: styles.lastRow,
   })

package/src/screens/conversation_filter_recipients/hooks/{use_flattened_array_of_service_types_and_their_teams.tsx → use_flattened_array_of_service_types_with_teams.tsx}

@@ -8,7 +8,7 @@ interface Props {
   lastRowStyle: ViewStyle
 }
 
-export function useFlattenedArrayOfServiceTypesAndTheirTeams({
+export function useFlattenedArrayOfServiceTypesWithTeams({
   data,
   firstRowStyle,
   lastRowStyle,

package/src/screens/conversation_filter_recipients/hooks/use_service_types_with_teams.ts

@@ -0,0 +1,90 @@
+import { useCallback, useMemo } from 'react'
+import { useApiGet } from '../../../hooks/use_api'
+import { ResourceObject } from '../../../types'
+import { ServiceTypeWithTeams } from '../types'
+import { uniqBy } from 'lodash'
+
+export function useServiceTypesWithTeams() {
+  const response = useApiGet<ServicesChatResource>({
+    url: `/chat`,
+    data: {
+      fields: {
+        Chat: ['teams_i_lead'],
+      },
+    },
+    app: 'services',
+  })
+
+  const { data, isFetching, isError, error } = response
+
+  const teamsILead = data?.teamsILead || stableEmptyTeamResponseArray
+
+  const decoratedResponse = useMemo(() => {
+    return decorateTeamResponseItems(teamsILead)
+  }, [teamsILead])
+
+  const hasNoServicesAccess = useCallback(() => {
+    if (isError && error) {
+      const errorArray = error
+      const allErrors = errorArray.errors.map(e => e.detail)
+      if (allErrors.some(e => e.includes(NOT_IN_APPLICATION_CODE))) {
+        return true
+      }
+    }
+    return false
+  }, [isError, error])
+
+  return {
+    serviceTypes: decoratedResponse,
+    isFetching,
+    isError,
+    noServicesAccess: hasNoServicesAccess(),
+  }
+}
+
+function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[]) {
+  return teamResponseItems
+    .map(({ value, serviceTypeName, teamName }) => ({
+      service_type: {
+        id: value.serviceTypeId,
+        name: serviceTypeName,
+      },
+      team: {
+        id: value.teamId,
+        name: teamName,
+      },
+    }))
+    .reduce((acc: ServiceTypeWithTeams[], { service_type, team }) => {
+      let serviceTypeEntry = acc.find(entry => entry.id === service_type.id)
+
+      if (!serviceTypeEntry) {
+        serviceTypeEntry = {
+          id: service_type.id,
+          name: service_type.name,
+          teams: [],
+        }
+        acc.push(serviceTypeEntry)
+      }
+      const initialTeams = serviceTypeEntry.teams
+      serviceTypeEntry.teams = uniqBy([...initialTeams, team], 'id')
+      return acc
+    }, [])
+}
+
+interface TeamResponseItem {
+  value: {
+    teamId: number
+    serviceTypeId: number
+  }
+  name: string
+  teamName: string
+  serviceTypeName: string
+  order: string[]
+}
+
+interface ServicesChatResource extends ResourceObject {
+  teamsILead: TeamResponseItem[]
+}
+
+const stableEmptyTeamResponseArray: TeamResponseItem[] = []
+const NOT_IN_APPLICATION_CODE = 'TRASH_PANDA'

package/src/screens/conversation_select_recipients/components/recipient_link_row.tsx

@@ -0,0 +1,91 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Image, Text } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { platformFontWeightMedium } from '../../../utils'
+
+interface RecipientLinkRowProps {
+  onPress: () => void
+  accessibilityLabel: string
+  accessibilityHint: string
+  imageUri?: string
+  title: string
+  subtitle: string
+}
+
+export const RecipientLinkRow = ({
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  imageUri,
+  title,
+  subtitle,
+}: RecipientLinkRowProps) => {
+  const styles = useStyles()
+
+  return (
+    <PlatformPressable
+      style={styles.row}
+      onPress={onPress}
+      accessibilityRole="link"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
+      <View style={styles.innerContainer}>
+        {imageUri && (
+          <Image source={{ uri: imageUri }} resizeMode="cover" style={styles.image} alt="" />
+        )}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {subtitle}
+          </Text>
+        </View>
+        <Icon name="general.rightChevron" size={16} style={styles.icon} />
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useStyles = () => {
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      paddingLeft: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 16,
+      paddingRight: 16,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.fillColorNeutral050Base,
+    },
+    image: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    title: {
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    content: {
+      flexShrink: 1,
+      gap: 2,
+    },
+    icon: {
+      marginLeft: 'auto',
+      color: theme.colors.fillColorNeutral030,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/components/view_more_link_row.tsx

@@ -0,0 +1,30 @@
+import { StyleSheet, View } from 'react-native'
+import { TextButton } from '../../../components'
+
+interface ViewMoreLinkRowProps {
+  onPress: () => void
+  accessibilityHint: string
+}
+
+export const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {
+  const styles = useRowStyles()
+
+  return (
+    <View style={[styles.row]}>
+      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
+        View more
+      </TextButton>
+    </View>
+  )
+}
+
+const useRowStyles = () => {
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -0,0 +1,76 @@
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+import { Heading } from '../../components'
+import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+
+export const ConversationSelectGroupRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: groups = [] } = useGroupsGroups()
+  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+
+  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
+    navigation.navigate('New', {
+      screen: 'ConversationNew',
+      params: {
+        group_id: group.id,
+        source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  return (
+    <FlashList
+      data={groupsWithCreatePermission}
+      keyExtractor={item => item.id.toString()}
+      estimatedItemSize={65}
+      contentContainerStyle={styles.contentContainer}
+      ListHeaderComponent={
+        <View style={styles.sectionHeader}>
+          <Heading variant="h3">All my groups</Heading>
+        </View>
+      }
+      renderItem={({ item: group }: { item: GroupsGroupResource }) => {
+        const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
+
+        return (
+          <RecipientLinkRow
+            key={group.id}
+            imageUri={group.headerImage?.thumbnail}
+            title={group.name}
+            subtitle={`${group.membershipsCount} members`}
+            onPress={() => handleNavigateToConversationNew(group)}
+            accessibilityLabel={groupAccessibilityLabel}
+            accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
+          />
+        )
+      }}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      paddingBottom: bottom,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+      paddingBottom: 4,
+    },
+  })
+}