@planningcenter/chat-react-native 3.2.0-rc.9 → 3.3.0

package/src/screens/conversation_filter_recipients/hooks/use_flattened_array_of_service_types_with_teams.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+import { type ViewStyle } from 'react-native'
+import { SectionTypes, type SectionListData, type ServiceTypeWithTeams } from '../types'
+
+interface Props {
+  data: ServiceTypeWithTeams[]
+  firstRowStyle: ViewStyle
+  lastRowStyle: ViewStyle
+}
+
+export function useFlattenedArrayOfServiceTypesWithTeams({
+  data,
+  firstRowStyle,
+  lastRowStyle,
+}: Props) {
+  const flattenedData: SectionListData = useMemo(
+    () =>
+      data.flatMap(serviceType => {
+        const teamIdsForServiceType = serviceType.teams.map(team => team.id)
+
+        return [
+          {
+            type: SectionTypes.header as const,
+            data: {
+              serviceTypeName: serviceType.name,
+              serviceTypeId: serviceType.id,
+              teamIdsForServiceType,
+            },
+            sectionStyle: firstRowStyle,
+          },
+          ...serviceType.teams.map((team, teamIdx) => {
+            const isLastTeamInServiceType = teamIdx === serviceType.teams.length - 1
+
+            return {
+              type: SectionTypes.team as const,
+              data: {
+                teamName: team.name,
+                teamId: team.id,
+                serviceTypeId: serviceType.id,
+              },
+              sectionStyle: isLastTeamInServiceType ? lastRowStyle : undefined,
+            }
+          }),
+        ]
+      }),
+    [data, firstRowStyle, lastRowStyle]
+  )
+
+  return flattenedData
+}

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_filter_recipients/types.tsx

@@ -0,0 +1,47 @@
+import { type ViewStyle } from 'react-native'
+import { AppName } from '../../types/resources/app_name'
+import { StaticScreenProps } from '@react-navigation/native'
+
+export interface ServiceTypeWithTeams {
+  id: number
+  name: string
+  teams: {
+    id: number
+    name: string
+  }[]
+}
+
+export enum SectionTypes {
+  header,
+  team,
+}
+
+export interface ServiceTypeProps {
+  serviceTypeName: string
+  serviceTypeId: number
+  teamIdsForServiceType: number[]
+}
+
+export interface TeamProps {
+  teamName: string
+  teamId: number
+  serviceTypeId: number
+}
+
+export type SectionListData = Array<
+  DataItem<ServiceTypeProps, SectionTypes.header> | DataItem<TeamProps, SectionTypes.team>
+>
+
+interface DataItem<T, TName extends SectionTypes> {
+  type: TName
+  data: T
+  sectionStyle?: ViewStyle
+}
+
+export type ConversationFilterRecipientsParams = {
+  source_app_name?: AppName
+  team_ids?: number[]
+}
+
+export type ConversationFilterRecipientsScreenProps =
+  StaticScreenProps<ConversationFilterRecipientsParams>

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import { FlatList, StyleSheet, View, ViewStyle } from 'react-native'
+import { FlatList, Platform, StyleSheet, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading } from '../../../components'
 import { useTheme } from '../../../hooks'
@@ -169,7 +169,10 @@ const useStyles = () => {
 
   return StyleSheet.create({
     flatlistContainer: {
-      paddingBottom: 64 + bottom,
+      paddingBottom: Platform.select({
+        ios: 64 + bottom,
+        android: 16 + bottom,
+      }),
     },
     section: {},
     sectionHeader: {

package/src/screens/conversation_filters/components/rows.tsx

@@ -121,7 +121,9 @@ export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
 
   return (
     <View style={[styles.borderLessRow]}>
-      <TextButton onPress={() => navigation.navigate(routeName, {})}>View more</TextButton>
+      <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>
+        View more
+      </TextButton>
     </View>
   )
 }
@@ -172,6 +174,9 @@ const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
       paddingRight: 16,
       paddingLeft: 16,
     },
+    viewMoreButton: {
+      flex: 1,
+    },
     row: {},
     rowImage: {
       width: THUMBNAIL_WIDTH,

package/src/screens/conversation_filters/group_filters.tsx

@@ -1,31 +1,40 @@
 import React from 'react'
-import { FlatList, RefreshControl, View } from 'react-native'
+import { FlatList, RefreshControl, StyleSheet } from 'react-native'
 import { Text } from '../../components/display'
 import { ConversationFiltersParams } from './screen_props'
 import { StaticScreenProps } from '@react-navigation/native'
 import { useGroupsToFilter } from './hooks/filters'
 import { GroupRow } from './components/rows'
 import { useFilterContext } from './context/conversation_filter_context'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
 
 export const GroupFilters = () => {
+  const styles = useStyles()
   const { groups, fetchNextPage, isRefetching, refetch } = useGroupsToFilter()
   const { params } = useFilterContext()
   const { chat_group_graph_id } = params
-
   return (
-    <View>
-      <FlatList
-        data={groups}
-        renderItem={({ item }) => (
-          <GroupRow group={item} isActive={item?.id.toString() === chat_group_graph_id} />
-        )}
-        ListEmptyComponent={<Text>No groups available</Text>}
-        refreshing={isRefetching}
-        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
-        onEndReached={() => fetchNextPage()}
-      />
-    </View>
+    <FlatList
+      data={groups}
+      renderItem={({ item }) => (
+        <GroupRow group={item} isActive={item?.id.toString() === chat_group_graph_id} />
+      )}
+      ListEmptyComponent={<Text>No groups available</Text>}
+      refreshing={isRefetching}
+      refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+      onEndReached={() => fetchNextPage()}
+      contentContainerStyle={styles.container}
+    />
   )
 }
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  return StyleSheet.create({
+    container: {
+      paddingBottom: bottom + 12,
+    },
+  })
+}

package/src/screens/conversation_filters/hooks/filters.ts

@@ -46,7 +46,7 @@ export const useGroupsToFilter = () => {
     () =>
       groups
         .map(group => {
-          const groupsGroup = groupsData.find(g => group.id.includes(g.id))
+          const groupsGroup = groupsData.find(g => group.id === `Groups-Group-${g.id}`)
           const { membershipsCount, headerImage } = groupsGroup || {}
 
           return {

package/src/screens/conversation_filters/team_filters.tsx

@@ -1,31 +1,40 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import React from 'react'
-import { FlatList, RefreshControl, View } from 'react-native'
+import { FlatList, RefreshControl, StyleSheet } from 'react-native'
 import { Text } from '../../components/display'
 import { TeamRow } from './components/rows'
 import { useFilterContext } from './context/conversation_filter_context'
 import { useTeamsToFilter } from './hooks/filters'
 import { ConversationFiltersParams } from './screen_props'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
 
 export const TeamFilters = () => {
+  const styles = useStyles()
   const { teams, fetchNextPage, isRefetching, refetch } = useTeamsToFilter()
   const { params } = useFilterContext()
   const { chat_group_graph_id } = params
-
   return (
-    <View>
-      <FlatList
-        data={teams}
-        renderItem={({ item }) => (
-          <TeamRow team={item} isActive={item?.id.toString() === chat_group_graph_id} />
-        )}
-        refreshing={isRefetching}
-        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
-        ListEmptyComponent={<Text>No teams available</Text>}
-        onEndReached={() => fetchNextPage()}
-      />
-    </View>
+    <FlatList
+      data={teams}
+      renderItem={({ item }) => (
+        <TeamRow team={item} isActive={item?.id.toString() === chat_group_graph_id} />
+      )}
+      refreshing={isRefetching}
+      refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+      ListEmptyComponent={<Text>No teams available</Text>}
+      onEndReached={() => fetchNextPage()}
+      contentContainerStyle={styles.container}
+    />
   )
 }
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  return StyleSheet.create({
+    container: {
+      paddingBottom: bottom + 12,
+    },
+  })
+}

package/src/screens/conversation_filters_screen.tsx

@@ -120,6 +120,7 @@ const useStyles = () => {
   return StyleSheet.create({
     container: {
       height: containerHeight,
+      flex: 1,
     },
     headerTitle: {
       textAlign: 'left',

package/src/screens/conversation_new/components/groups_form.tsx

@@ -1,35 +1,28 @@
 import { StackActions, useNavigation } from '@react-navigation/native'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Platform, StyleSheet, TextInput, View } from 'react-native'
-import { Heading, Text } from '../../../components'
+import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
-import { useSuspenseGet } from '../../../hooks'
-import { useApiClient } from '../../../hooks/use_api_client'
-import { useMutation } from '@tanstack/react-query'
+import { KeyboardView } from '../../../components/display/keyboard_view'
+import { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import {
-  ApiResource,
-  ConversationResource,
-  GroupsGroupResource,
-  ResourceObject,
-} from '../../../types'
-import { FAKE_MEMBER_DATA } from '../utils/fake_member_data'
-import { Divider, FormList } from './form_list'
+  GroupMembersForNewConversationResult,
+  useGroupMembersForNewConversation,
+} from '../../../hooks/groups/use_group_members_for_new_conversation'
+import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+import { GroupsGroupResource } from '../../../types'
+import { GraphId } from '../../../types/resources/group_resource'
 import { pluralize } from '../../../utils'
-import { KeyboardView } from '../../../components/display/keyboard_view'
-import { MemberErrorCard } from './member_error_card'
+import { Divider, FormList } from './form_list'
 
 type GroupsFormProps = {
-  groupId?: string
-}
-
-interface ChatConversationPayload extends ResourceObject {
-  value: string
+  groupId: number
+  chat_group_graph_id?: GraphId
 }
 
-export const GroupsForm = ({ groupId }: GroupsFormProps) => {
+export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
   const navigation = useNavigation()
   const [title, setTitle] = useState<string>()
-  const apiClient = useApiClient()
   const { data: group } = useSuspenseGet<GroupsGroupResource>({
     url: `/me/groups/${groupId}`,
     data: {
@@ -40,70 +33,46 @@ export const GroupsForm = ({ groupId }: GroupsFormProps) => {
     app: 'groups',
   })
 
-  const isMemberError = false // TODO: Replace with error from a future useGroupsMember hook
-
-  const { mutate: handleSave } = useMutation({
-    throwOnError: true,
-    onSuccess: result => {
-      handleRedirectToConversation({ conversation_id: result.data.id })
-    },
-    mutationFn: () =>
-      apiClient.groups
-        .post<ApiResource<ChatConversationPayload>>({
-          url: `/me/groups/${groupId}/chat_conversation_payload`,
-          data: {
-            data: {
-              type: '',
-              attributes: {
-                title,
-              },
-            },
-          },
-        })
-        .then(res => res.data.value)
-        .then(payload =>
-          apiClient.chat.post<ApiResource<ConversationResource>>({
-            url: '/me/conversations',
-            data: {
-              data: {
-                type: 'Conversation',
-                attributes: {
-                  payload,
-                },
-              },
-            },
-          })
-        ),
-  })
+  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })
 
-  const handleRedirectToConversation = useCallback(
-    ({ conversation_id }: { conversation_id: number }) => {
-      // exit from the create stack
-      navigation.getParent()?.goBack()
+  const redirectToConversation = useCallback(
+    (conversationId: number) => {
       // navigate to the conversation screen
       navigation.dispatch(
-        StackActions.push('Conversation', {
-          conversation_id,
+        StackActions.popTo('Conversation', {
+          conversation_id: conversationId,
+          chat_group_graph_id,
         })
       )
     },
-    [navigation]
+    [chat_group_graph_id, navigation]
   )
 
+  const { mutate: handleSave } = useGroupsConversationCreate({
+    groupId,
+    title,
+    onSuccess: redirectToConversation,
+  })
+
   return (
     <KeyboardView>
       <FormList
-        memberData={FAKE_MEMBER_DATA} // TODO: Replace with actual group members
+        memberData={groupMemberships.adultMembers}
         FormContent={
           <FormContent
             group={group}
             title={title}
             setTitle={setTitle}
-            isMemberError={isMemberError}
+            groupMemberships={groupMemberships}
           />
         }
       />
-      <ActionButton title="Start Conversation" onPress={() => handleSave()} />
+      <ActionButton
+        disabled={!title}
+        title="Start Conversation"
+        onPress={() => handleSave()}
+        infoText="Conversation will be automatically updated if any members are added or removed from this group."
+      />
     </KeyboardView>
   )
 }
@@ -112,13 +81,28 @@ interface FormContentProps {
   group: GroupsGroupResource
   title?: string
   setTitle: (title: string) => void
-  isMemberError: boolean
+  groupMemberships: GroupMembersForNewConversationResult
 }
 
-function FormContent({ group, title, setTitle, isMemberError }: FormContentProps) {
+function FormContent({ group, title, setTitle, groupMemberships }: FormContentProps) {
   const styles = useStyles()
+  const currentPerson = useCurrentPerson()
   const { name, membershipsCount } = group
-  const memberHeader = pluralize(membershipsCount, 'member')
+
+  const myGroupsMembership = useMemo(
+    () => groupMemberships.data.find(m => m.id === currentPerson.id),
+    [groupMemberships.data, currentPerson.id]
+  )
+  const isLeader = myGroupsMembership?.role === 'leader'
+
+  const childMembers = groupMemberships.childMembers
+  const hasChildren = childMembers.length > 0
+  const adultCount = groupMemberships.adultMembers.length
+  const memberCount = isLeader ? membershipsCount : adultCount
+  const memberHeaderLabel = `${pluralize(memberCount, 'member')} selected`
+
+  const showMemberError = groupMemberships.isError
+  const showChildNotice = hasChildren && isLeader
 
   return (
     <View style={styles.formContent}>
@@ -139,9 +123,14 @@ function FormContent({ group, title, setTitle, isMemberError }: FormContentProps
       </View>
       <Divider />
       <View style={styles.memberSection}>
-        <Heading variant="h3">{memberHeader} selected</Heading>
-        {isMemberError && (
-          <MemberErrorCard description="There was an issue loading group members, please refresh and try again." />
+        <Heading variant="h3">{memberHeaderLabel}</Heading>
+        {showChildNotice && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {showMemberError && (
+          <Banner
+            appearance="error"
+            description="There was an issue loading group members, please refresh and try again."
+            style={styles.banner}
+          />
         )}
       </View>
     </View>
@@ -149,6 +138,7 @@ function FormContent({ group, title, setTitle, isMemberError }: FormContentProps
 }
 
 const useStyles = () => {
+  const { colors } = useTheme()
   const sectionPadding = 16
   const inputPadding = 8
 
@@ -178,10 +168,14 @@ const useStyles = () => {
     },
     titleInput: {
       fontSize: 18,
+      color: colors.textColorDefaultPrimary,
     },
     memberSection: {
       padding: sectionPadding,
       paddingBottom: 0,
     },
+    banner: {
+      marginTop: 16,
+    },
   })
 }

package/src/screens/conversation_new/components/team_form.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Text } from '../../../components'
 
 type TeamFormProps = {
-  initialTeamIds?: string[]
+  initialTeamIds?: number[]
   initialPlanId?: number
 }
 

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -4,20 +4,27 @@ import { GroupsForm } from './components/groups_form'
 import { TeamsForm } from './components/team_form'
 import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
+import { GraphId } from '../../types/resources/group_resource'
 
 type ConversationNewScreenProps = StaticScreenProps<{
-  group_id?: string
-  team_ids?: string[]
+  group_id?: number
+  team_ids?: number[]
   plan_id?: number
   source_app_name: AppName
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
-  const { group_id, team_ids, source_app_name, plan_id } = route.params
+  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params
 
   switch (source_app_name) {
     case 'Groups':
-      return <GroupsForm groupId={group_id} />
+      return group_id ? (
+        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />
+      ) : (
+        <SourceAppErrorCard />
+      )
     case 'Services':
       return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />
     default: