@planningcenter/chat-react-native 3.2.0-rc.8 → 3.2.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/form_list.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FlashList, type FlashListProps } from '@shopify/flash-list'
+import { MemberResource } from '../../../types'
+import { Person, Text } from '../../../components/display'
+import { useTheme } from '../../../hooks'
+
+interface FormListProps {
+  memberData: MemberResource[]
+  FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
+  listEmptyText?: string
+}
+
+export const FormList = ({ memberData, FormContent, listEmptyText }: FormListProps) => {
+  const styles = useStyles()
+
+  return (
+    <FlashList
+      data={memberData}
+      ListHeaderComponent={FormContent}
+      renderItem={({ item }) => <Person person={item} style={styles.person} />}
+      keyExtractor={item => item.id.toString()}
+      estimatedItemSize={45}
+      ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
+    />
+  )
+}
+
+const ListEmptyText = ({ text }: { text: string }) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.emptyTextContainer}>
+      <Text style={styles.emptyText}>{text}</Text>
+    </View>
+  )
+}
+
+export const Divider = () => {
+  const styles = useStyles()
+
+  return <View style={styles.divider} />
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    person: {
+      paddingHorizontal: 16,
+      paddingBottom: 12,
+    },
+    emptyTextContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 32,
+    },
+    emptyText: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+    divider: {
+      borderBottomWidth: 1,
+      borderBottomColor: colors.fillColorNeutral050Base,
+    },
+  })
+}